Conclusion

Right, I think that marks the end of this webpage for me. For you, though, the job is not finished yet. You should now go through the HTML section of this book again, adding all the HTML examples and concepts that you find along the way to your website. Some examples of things you could add to the webpage are as follows:

images (why not create a mini photo gallery);
links;
unordered lists;
ordered lists;
div class;
div id; and
spans.

It’s a good idea to do this now as it will test your knowledge and understanding of what we have learned so far. At this point you should have a solid grasp of visual design and should be able to add in examples of each of the above elements while updating the styles accordingly to ensure it looks good and fits in with our current style. The training wheels are off now, go and see what you can create. When you are ready, let’s move on to the CSS page and we can start you off with a couple more CSS examples over there. Keep going, you are doing great!

CSS page

Hopefully now you have had a chance to go through and finish off the HTML page with more examples. Great stuff, let’s now turn our focus to the CSS page and jump straight in with a few examples of how we can show our examples on this page. Let’s first get started with the base file.

The steps

Let’s take our html.html page and duplicate it to css.html.
Now mawit into the CSS page:
1. – change the title
2. – change the active class on the navbar
3. – strip out the section divs – leave one for us to use as a template
4. – rewrite the introductory text
5. – remove all of the quick links we added

Great, now we should have a nice base file to work from.

Let’s go straight in with an example of styling text. This is going to be nice and simple. All we are going to do is:

Edit the ‘.section’ div that you left when you were migrating html.html to css.html.
Add a new title and paragraph for styling text.
Add a relevant id to the section and replicate the id down in the click handler function value.
Add a link to the quick links navigation menu with the id as the ref value.
Inside the ‘.example’ div create a paragraph tag with some text inside it.
Now add the following style directly to the paragraph opening tag:
1. – change the colour of the text to ‘#1998E2’
2. – change the font size to anything of your choosing
3. – alter the line height
4. – change the alignment
5. – add in any other text styles you deem appropriate

Now save the file and check out the file in the browser. You should see your text with the styling you applied to it. Clicking the ‘show code’ button should show the inline styles code you used to make the changes to the text’s style.

The code for this page should look like this: