Once upon a time a Web Designer was forced to create all of the styling for their website using HTML code. This was relatively simple to do; HTML provided tags such as <h1> for a heading and <p> for a paragraph of text, not to mention the <font> tag that allowed web designers to specify the colour and size of segments of content on their web pages. Simple! Until you start to consider larger websites that is. Imagine a 100 page website where each page needs to be consistent in its appearance. Adding all of that formatting information into each individual segment of HTML sounds like an incredible hassle, not to mention what happens if you want to make a simple change, for example altering the style of all of the headings.

Enter CSS (Cascading Style Sheets). These sheets, saved as .css files, are specifically designed to manage how a website written in a markup language is displayed. The sheets are saved externally to the rest of your HTML code, and correspond to every page on the website. Essentially that means that when a web designer wants to alter the style of all of the headings on a large website featuring many different pages, they only need to edit the .css file and not every individual page.

CSS is something that every Web Designer needs to know, particularly as it is now supported by every internet browser. The style sheets you create can control the fonts that you use, the colours and backgrounds of your website, the positioning of elements on your pages, your margins, lines, heights, widths and much, much more. There is currently no more precise and accurate way to organise and control the layout of your website, and with a multitude of sophisticated techniques included, CSS can be the tool to make each and every one of your web pages look stunning.

How does CSS work?

Every element that a web designer wishes to style using CSS must come complete with a specific rule in a .css file. This rule is made up of two distinct parts, a Selector, and a number of Declarations. Let’s stick with our example and think about changing how a heading looks on each of our 100 web pages:

h1 {

color:red;

font-size:14px;

}

In this example, h1 is your Selector; it determines the element you are actually styling. The clauses within the brackets are the two Declarations in this instance, defining the colour and size of the text. If you decided that you wanted to change the size of this heading on every page on your website you could simply change it here, and watch the alteration be propagated to every <h1> HTML tag within your website.

This has been a very simplistic look at the power of CSS, but hopefully it has raised your awareness as to how important this skill is for a web designer. There are many tutorials online that can help you to get started with developing and using CSS and there are also many excellent books available that many web designers will find very useful as a handy reference.

If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.