Whereas HTML is the language responsible for defining the content of a webpage, CSS is the language used to control its visual presentation. CSS stands for Cascading Style Sheets, a style-sheet being an external file1 (sheet) that controls the look or visual layout (style) of a document. The cascade is the mechanism with which CSS determines which styles should be applied to an element, and we will explore how this works soon.
As we briefly alluded to in the section on HTML, the huge benefit of CSS is it allows us to separate the visual presentation of a document from the contents. By defining the look of a website in a separate .css file (which is then referenced from each .html document on the site) we can share it across every page on a website; instead of having to set our styles on each page, we can define it once and know that all elements will look the same on each page of the site. If we then want to update how something is displayed at a later date, we only have to do it in one location, instead of going through every page of the site and making the same change in each.
CSS also allows us to alter the visual presentation of the document depending on the characteristics of the device it is being rendered on; changing the layout between mobile and desktop, for instance, or removing all the colour when printed out2.
This flexability has allowed the development of 'responsive design': instead of having a different page for mobile devices and desktops, we can instead build websites that adapt to fit the devices they are being viewed on - so no matter what device our visitors are using, our pages will work for them.
Just like HTML, CSS files are simple text files that follow a specific type of formatting. Unlike HTML, however, CSS is not a markup language and has its own unique rules. We will start to look at the syntax of CSS in the next chapter and throughout this section will apply what we are learning to our portfolio page from the previous section.
- Technically, it is possible to add CSS styles directly to a HTML document, but that loses the tremendous flexability that keeping the visual presentation separate from the content allows us.
- Yes, a printer is a separate device on the web and can be given unique styles.