by Stephen Davies

Created on: February 14, 2007   Last Updated: November 02, 2011

What is a Style Sheet?

Style sheets or CSS (Cascading Style Sheets) have become the defacto standard where web design is concerned. Mastering these web friendly tools can add a real difference to the overall design. This is not something that only a web guru or expert programmer can grasp. Style sheets are a lot easier than one may think. My little tutorial here will illustrate. For those who have already coded in HTML, much of the following will be familiar. Don't worry about hating programming with a passion as style sheets can be learnt and used effectively quickly. What is presented in a style sheet is a set of rules that dictate to the browser - Internet Explorer, Firefox - how to display the page data and graphics.

Let me explain the code and how that applies to style sheet commands. A standard HTML code snippet will have basic properties for page alteration. There is a selector like BODY, BR, P, or maybe FONT. In basic web design, the BODY tag contains properties for the font, size and colour of text. BR places a horizontal break line. P opens up a text statement.

In its pragmatic sense, commence the style sheet with the use of the STYLE element by placing this element inside a HEAD tag. Each line will have rules containing tags (selectors). These are commands that contain properties like the colour of the page or the size of the font for example. Then a property is applied to the selector. There are vast numbers of properties that can be applied. The format is:

selector {property: value }

selector {property1: value1; property2: value2 }

The second example allows for multiple properties to be applied.

Here is a HTML snip:

Change the paragraph colour and size

Set the margins, background image and link colours

The BODY tags and embrace the properties of the web page. The FONT tag and the P tag set the text properties. The font type is Arial, text colour is blue and the size is 3. The second P tag line also displays the A tag text for the hyperlink. This hyperlink setting normally links to another page on the site or another web site address. As this is just an example, the HREF link is left blank here. The text link colours' is the hyperlink, displayed in the font type Arial and red in colour. Now this would have to be repeated on every section of the web page in order that the text emulates those properties. This is where the style sheet wields its power. By applying the code snippet below either at the top of each web page inside tags or in an external file, repetition is avoided.

Change the paragraph colour and size

P { font-size: 3; color: blue; font-family: Arial; }
A { font-size: 3; color: red; font-family: Arial; }

Every P and A tag will follow the properties of the style sheet shown above on the web page where the style sheet exists. Alternatively, create a file with the extension CSS, and link the properties to the web page:

The file example.css contains the attributes in the style sheet above. The CSS1 Specification as defined by W3C.org, the web standards consortium, has clearly defined values for CSS styles.

This basic insight should have introduced the methods and reasons for style sheets. There is a multitude of applications for which it is a very powerful ally in web design. Now follow other tutorials that dig deeper into the use of style sheets and see how it influences the design flow of a web site.

Happy coding!

Learn more about this author, Stephen Davies.
Click here to send this author comments or questions.