What is CSS and how does your website use it

Find out how CSS can be used for styling all parts of a web page to create very complex results, such as animation, and hover effects.

CSS stands for Cascading Style Sheets and along with HTML, are the two core elements of a webpage. HTML is the part that provides the structure and contains the text, images, videos, etc and CSS is the language that adds the style, such as colours, borders, backgrounds and fonts.

So, what does it look like, and how does it work?
CSS works by interacting with the HTML elements on a page and applying styles to them based on the rules that you set out.

Here’s some HTML…

This is some text. This is some different text. 

… where everything between the opening tag and the closing tag (notice the extra “/” to close the tag) is a paragraph. On screen it looks like this…

This is some text.

To add styling to this a CSS rule would be created, like the example here…

p { color: red; font-weight: bold; font-size: 14px; }

In this case, the “p” is the selector and it references the in the HTML, telling the browser to take the content of any elements and style them using the CSS rules in the brackets. This changes the appearance of the HTML so that it now looks like this…

This is some text. This is some different text.

This is the basic function of CSS and is very simplified. CSS can be used for styling all parts of a web page and can be combined to create very complex results, such as animation, and hover effects that change as a mouse moves around a screen.

The power of CSS comes from being able to combine rules, overwrite them and adjust them for specific items within a web page. This is the principle of CSS specificity and it works by targeting parts of a webpage using classes and IDs. Firstly, what are classes and IDs? These are just names that can be given to HTML elements within a webpage or a website and can be seen in the example below…

This is some text with a class. This is some text with a different class. 

Classes allow us to get very specific and now we can target individual elements of the same type within a page. Let’s add some CSS for the elements…

.my_class_name p { color: red; font-weight: bold; font-size: 14px; } .my_other_class p { color: blue; font-size: 10px; }

… notice the dot before the class name, to identify the text as a class. ID’s work in the same way, but use a “#” instead of a dot. Here’s what that will look like on a webpage.

This is some text with a class. This is some text with a different class.

Now that we can see how using classes to identify particular elements allows CSS to be very specific, the next part is the “Cascading” part of CSS. Simply put, if the same element or class is mentioned more than once in a website, that latest rules will be applied to update any previous rules for the same element or class. To see this, we can combine our previous examples and see how they work together (the numbers at the start of the lines are just for reference to make it easier to discuss each line).

1 This is some text. 2 This is some different text. 3 This is some text with a class. 4 This is some text with a different class. 5 6 p { color: red; font-weight: bold; font-size: 14px; } 7 .my_class_name p { color: green; font-weight: bold; font-size: 14px; } 8 .my_other_class p { color: blue; font-size: 10px; } 9 .my_class_name p { font-style: italic; color: purple;}

When we look at the output after applying this CSS we can see how the cascading effect has changed the results.

This is some text. This is some different text. This is some text with a class. This is some text with a different class.

Let’s take a look at how this worked;
The first two lines which do not have a class are still changed by the CSS on line 6 that targets all elements.
The third line with a class called “my_class_name” is changed by the CSS on line 7 to make it bigger, bold and green.
But this is then changed by the later rule on line 9 which adds the italics and updates the colour to purple.
The fourth line with a class called “my_other_class” is changed by the CSS on line 8, as it’s more specific than the element.

Finally, there are three places where CSS can be inserted, and the cascading applies from the first to the third in that order…

A separate file that is checked by the browser when the webpage is loading to see what styles to apply. This is the actual “sheet” in CSS and is the main place to put CSS rules.
On an individual page and marked out using HTML. The CSS is written between and opening <style> and closing </style> tags. This CSS overrides the rules in separate files checked when the page is loading.
“In Line” CSS is written into the individual lines of html within the opening tag (eg; ) and overrides any other rules that target the same item. This is seen as the last resort for placing CSS as it is harder to manage when changes need to be made.

So where HTML is the blocks and mortar of your house, consider CSS to be the paint, plants, window and door styles that make it look different (better!) than the other houses in the neighbourhood.