CSS customization of blogger template

I have been asked how I achieved the coloured fonts in my code examples. It's done via some customized CSS code.

My code examples are either inline using the <CODE> tag or longer code text is wrapped in <PRE> tags.

Examples:

Some inline code and

some
longer
text

How to add CSS customization

In the blogger main menu choose

Template
  Customize
    Advanced

In the list of advanced customizations scroll down to

      Add CSS

and in the text field enter

code {color:#8b0080; background:#ffffff; }
pre  {color:#8b0080; background:#ffffff; border:solid 1px black; }

which shows customizations for CODE and PRE:

one setting for the font colour (a kind of purple)

one setting for the background colour (white)
Additionally PRE gets assigned a small black border line.

I also have another customization for H2 headers:

h2 { text-transform: capitalize}

which capitalizes text so
  This is a nice text
is shown as

This is a nice text

This example shows nicely that these customizations are added on top i.e. font type, font attributes (bold in this case) etc. remain as defined earlier (in the template definition by the template author).