Again, we've covered most of this. We're basically now changing the appearance of the headings, paragraphs. Since there is nothing overly complicated, we'll just get right to it. That is... no beating around the bush... no dilly dallying, no unnecessary delays, no tit-tat, not kit-kat, you get the picture.
So, first thing we'll do is style the page title. In this design we've used the <h1> for the page title. So... let's make it green and bold so it stands out on the page. We know that h1's are usually pretty huge by default, and we don't want them to be too big, so we'll use the em unit to make them twice the size of the page's font size.
h1
{
color: rgb(0,51,0);
width: 100%;
font-size: 2em;
}
We'll give h2, which we're using for sub-headings a similar style.
h2
{
color: rgb(0,153,51);
font-size: 1.5em;
}
And paragraphs... we'll make them a medium-grey, and... because at first our site is not going to have so much content on each page (with it being new), we'll have the letter spacing for the text in standard paragraphs widened a little bit.
p
{
color: rgb(102,102,102);
letter-spacing: 2px;
}
We've also got the links to think about at the moment. By default they're underlined and blue... nowadays however, links on web-pages tend not to be underlined by default. The underline usually only appears when the mouse hovers over the link, or when the user is clicking on the link. Also, by default... visited links will turn a sort of horrible red colour, we can fix this and prevent them from looking different when visited using CSS.
a:link, a:visited
{
text-decoration: none;
color: rgb(0,0,255);
}
a:hover, a:active
{
text-decoration: underline;
color: rgb(0,0,255);
}
And I think that'll do for this example template. You can of course apply as many styles and go much more advanced if you wish.
So... get all of the styles you see in this chapter added to your styles.css file, and save the file. Then view the web-page. You should see that all of your styles have taken effect. You can also see the accumulative and complete result of the previous two chapters right here. Ether way, take the quiz, and then proceed to the penultimate chapter!