Web Pages with CSS, Why and How

Most of us (those who show any interest in the web), if we are in the industry or not will have heard about or know of Cascading Style Sheets/CSS.
Old Style coding was to style the page, on the page e.g.

Basic Web Page Syntax

But as I am sure you can imagine, not only did this make the page really cluttered, it also meant that every change would need to be done on every page, which is ok if you have 4 pages but if you had 100 pages this could make updating you website a bit of a chore.

Enter stage left CSS – Separating content from design and layout is a much slicker way to develop. It keeps pages clean and uncluttered, it keeps pages loading faster (browsers cache CSS) and makes updates not such a daunting task.

Ok, so building from your very basic web page in our previous tutorial we can now alter how our page looks from an external CSS (Style sheet)

If you are using an editor then create a style sheet giving it the name “StyleSheet.css” in the same location as your web page e.g. if you web page is on the desktop your CSS should be saved their also.

Go into your web page and add the element:

HTML_ScreenShot_3
To the Head tag. Your syntax should now look as below:

HTML_ScreenShot_4

Go back to your Stylesheet and enter the sytax:
HTML_ScreenShot_5

Save it, reload your web page, if your web page has just changed colour then I guess you are all set!

Blog Tip: If you are using multiple style sheets on one project, don’t forget to note them at the top of your page, a reminder for you and a helping hand if another developer edits your code.

Leave a Reply

Your email address will not be published. Required fields are marked *