The changes that we are making go into the head of the document. They must go between <head> and </head>. I recommend putting them just before the </head>.
Go to HTML Source view and put <style> and </style> just before </head>. Put them on two separate lines.
First, let’s change our <h1> heading to be centered and green. Place the following text between the <style> and </style> tags:
h1 {
text-align: center;
color: green;
}
Now, let’s tackle those <h2> artist headlines. Place the following between your <style> and </style> tags:
h2 {
text-align: right;
border-bottom-style: dashed;
border-top-style: dashed;
color: green;
padding-right: 1em;
background-color: yellow;
}
This should make your level one headings appear in green text on a yellow background, with a dashed line on the top and bottom. If you want to change the color, or the dash, or the alignment, or add further stylistic embellishment to your headings, you can change it in the <style> area. It will automatically change every incarnation of that tag on the rest of the page.
You can also change character-level tags, such as the emphasis tags. Get into Normal view and emphasize some words and phrases using “Text Style” and then “Emphasis” under the “Format” menu. Your emphasized text should be displayed in italics. Then, go back to HTML Source view and add these lines to your <style> area:
em {
font-weight: bold;
font-style: normal;
font-variant: small-caps;
}
This will change each emphasized word from the default display of italic to small-caps and bold. The words are still emphasized, but the display is changed. If you later decide to display emphasized text in a different manner, you can change the style once, and it will automatically apply to all emphasized text on the page.
Go ahead and play around with the three styles you’ve just added. Change H2 to center, for example (and then easily change it back if you decide you prefer right-aligned level 2 headlines). See if you can put a border around your emphasized text, and decide what looks better.
