In this post I said that CSS is one of the codes or languages that have been developed to work with HTML, to improve the efficiency with which the fonts and styling of a website are defined.
So what is CSS?
CSS stands for Cascading Style Sheets and it’s the way the themeing or styling of modern websites is achieved.
Here’s how it works.
Website styling prior to CSS:
In the early days of websites, before CSS, you had to define each element of your website’s look and feel by hand, and page-by-page.
For example, if you wanted your links to appear in a particular colour you had to define this at the top of each page of your site.
If you later wanted to change the colour of your links, you had to go back to each page of your site and change the settings.
You can imagine how laborious that would have been for someone with a large site – say several hundred pages.
You can also see the scope for mistakes or inconsistencies to creep in – resulting in your links being styled differently on different pages.
Web pages were originally based on tables. That’s how the page was divided up into the different columns or areas (sidebars, for example).
These tables also had to be defined and styled on a table-by-table basis.
Not only was this highly labour intensive, it meant that each web page contained a lot of code – the stuff that tells the browser how to display the files – and that tended to slow down page-load times.
So CSS was developed, to improve the efficiency of managing the look and feel of websites.
Website styling with CSS.
Prior to CSS the content of the site, and the code that defined the styling, were inter-mingled.
With CSS the principle is to separate the content from the styling, so you can manage each individually.
The advantage of this is that you can first define the look and feel you want for your website then, once that’s done, all you need to do is focus on the content.
Plus, by managing the look and feel separately, you no longer need to change each page when you want to change a styling element.
Taking the example I used earlier: if you want to change the colour of links in your site you only need to make one change in your stylesheet and the new colour will be applied consistently throughout your site.
Much quicker, and no more risk of inconsistencies.
So how does CSS work?
CSS is driven by a file called a Stylesheet. You create the stylesheet as a separate file and you put a link to the stylesheet file in the HEAD section of your website.
This tells the browser where to get the information about how to layout the page.
The stylesheet file is one of the files that the web server will send to the web browser when the link requesting the page is typed in. The description of how that works is here.
With CSS you no longer use tables to define the layout of your page. Instead you use divisions, which are called divs.
So now, when you want to define a sidebar in the page of your site, you no longer have to define the table and all its attributes. You simply insert the name of the div as an HTML command. The web browser then takes the div’s definitions from the stylesheet and applies them.
As a result there is a lot less code on the page (in relation to the content) so the page loads more quickly.
The better you become at using CSS the more efficient you can make the styling of your site.
So, to summarise:
- The principle of CSS is to separate a website’s styling from its content so they can be managed separately
- CSS is driven by a separate file called a stylesheet, which tells the web browser how to layout the page.
- To change the style of an element in your website you only need to change that element in one place: the stylesheet.
- CSS uses divs, which are defined in the stylesheet, not tables to create separate sections of a web page.
- By separating the styling from the content and eliminating the need for tables, CSS reduces the amount of code in relation to content on a page, which results in faster page-load times.