Web Design and Authoring: Session three
What is CSS?
CSS (Cascading Style Sheets) is a presentation language which we use to add styling to our structural HTML elements. CSS is not the same as HTML, it is written rather differently. CSS is downloaded and the styles applied by the browser at the same time as the HTML page is loaded.
Applying CSS styles gives us an exciting level of control over the way our pages look: including the typography, colour, background images, borders, and element placement on the page.
Using CSS for presentation and HTML for structure means that presentation and structure are completely separate, so we can make changes to the one without affecting the other. For example, we can change background and text colours in CSS to make our website look completely different, without touching the HTML. Similarly, we can change textual content, headings and links without breaking the page layout. This was not the case in early versions of HTML but, fortunately, you don't have to worry about earlier difficulties!
Using CSS has more great advantages:
- our pages can be accessible to all, as semantic HTML markup, with no presentational attributes getting in the way, is easy for screenreaders to read
- we can create a consistent look across our website by linking the same CSS stylesheet to every page
- we can make changes to the way our website looks very quickly: want a different font, or background colour? It's easy, just change two properties in one stylesheet, and your whole website will reflect the changes at once
CSS is powerful and can be complex, so we can't cover everything on this course. What we do aim for is to understand the basic principles and how to apply them, and, from that sound foundation you can develop your own learning as far as you wish.
An example: CSS Zen Garden
To see how CSS can make the same HTML page look completely different, have a look at:
CSS Zen Garden was a showcase for cutting-edge CSS for several years, and the designs on display show us a lot about the possibilities of using CSS. While the site remains a testament to what can be achieved, no new designs have been added for some time.