We understand that the world wide web is a big, scary thing for most people, so each month we’ll try to take a word, acronym or phrase and explain to you in simple, ‘non-techie’ terms what it all means.  This is DBG’s Digital Definition of the Month!

 

CSS stands for:

cascading style sheets

 

Most commonly, these style sheets define how a website looks.  The CSS code describes to the browser how to display a particular HTML element (see:  What is HTML?) using rules.  Many websites have hundreds (or even thousands!) of rules for defining the look of a website.  For example:

body {

background-color: lightgrey;

color: black;

font-family: Arial, sans-serif;

}

In this first example, we are telling the browser to display the website page with a light grey background, black text, using the Arial font.

However it would be pretty boring if all the text on our page looked exactly the same.  Our web pages have headings so we can see what the page is about.  The HTML element for a main heading is <h1>, so if we wanted to tell the browser to display our h1 elements differently, we could simply use the following rule:

h1 {

color: orangered;

font-weight: bold;

font-size: 2em;

}

Here we are telling the browser to style the text of our h1 elements with an orange-ref colour, in bold, and set to twice the normal size.  This is where the ‘cascading’ in CSS comes from.  The h1 element will inherit the rules from the body, which means that we only need to set rules for how to display it differently to normal.

The beauty of CSS is that it allows us to change the look of a web page without having to change the HTML.  It also allows us to carefully craft the CSS to adapt to your screen size to ensure that your website looks great no matter whether it’s being displayed on a PC, tablet device, or even your smartphone.