Turning Structure Into Presentation With CSS3
On this page:
CSS?
CSS class
Why CSS
CSS example
CSS stands for Cascading Style Sheets and was first released in 1996. CSS3 is the latest version. It is a language used for describing the presentation of a document written in a markup language like HTML.
In other words CSS tells the web browser how you want the page to appear to the user - it is the clothing on the mannequin in the shop window.
Note
This page is not intended to be an in-depth tutorial about CSS. My aim is to give you a taste of what it can do and why you should use it. There are plenty of CSS resources out there and I have listed a few on the Resources page on this website. You can find more by doing an online search for CSS or CSS tutorials.
What does CSS do?
CSS defines the appearance of the HTML elements on your page. It is applied to the structure of the page to turn it from a bare skeleton into something beautiful. It's what makes your website stand out from everyone else's.
For example you may want all <article> elements to have a blue border 3 pixels thick and take up 65% of the page width. <article> is a basic element and you would write in your CSS file: article {width: 65%; border: 3px solid blue;}.
Each time you declare the <article> element it looks like this:
65% width
Solid blue border 3 pixels thick
You can style any element on your website in the same way.
What if I want an element to be different to the others?
You give it what's called a class name. In the CSS you declare your different element like this (let's take the article element again): .different {width: 50%; background-color: yellow; border: 2px dotted red;}. (.different is the class name.)
In your HTML you write: <article class="different">Rest of content here</article> and this is what you get:
50% width
Background colour yellow
Dotted red border 6 pixels thick.
You can use class names on any element in your pages to change the appearance of text, headings, containers, images, etc.
Why use CSS?
CSS is what makes your pages look pretty and improves functionality and accessibility for the viewer by separating out presentation from content and structure. CSS can affect the layout, the colours, and the fonts, among other things.
Without CSS the page you are reading now would look much like the HTML example on the previous page. The gradient colours, the font sizes and colours, the navigation bar, and the tooltips, on this website are all rendered with CSS.
Below is the result of our example from the previous page with styling (CSS) added.
What you get in the browser:
The CSS:
If you have multiple pages on your site the CSS is best stored in an external file as it reduces the amount of work you need to do to your website. Name your stylesheet with the extension .css, link to it between the <head> and </head> tags of your file like this:
<head>
<link rel="stylesheet" href="filename.css">
</head>
and you're done.
Then by making changes to just one file you can change the look of your entire website rather than editing multiple pages and repeating yourself.
Want to know more? Make your website legible and easy on the eye with tips on the Readability page.
❧