From Million Dollar Wiki
Jump to: navigation, search

What are Cascading Style Sheets (CSS)?

CSS is often seen as a complex web language that can end up baffling some users and can appear slightly intimidating. However, when explained in simple terms, it isn’t really that complex. In a nutshell, CSS is merely a HTML shortcut for users to avoid repetitious coding and use of the same tags over and over again. Cascading Style Sheets can be defined as a set of instructions for existing content, either in an external file or embedded in the page coding, used to bring style and structure (such as colours, images, fonts and layout) to a website. Not only does CSS enable the user to add style and structure but it also enables it to be done in bulk – that is, to entire pages simultaneously with one single reference. With CSS, a website can be formatted without the need for extensive coding.

Regarded as a powerful tool, CSS is also viewed as a huge time saver. If you wanted to change the font to Verdana for example, you would need to go through all 50 pages to switch over to the new font. Applying CSS in the proper manner (using an external style sheet) would mean that the change would only need to be made in one file, and the site would then update globally with the changes. Also, CSS makes your pages significantly much lighter and faster to download (as much as 50%), as there’s no need to repeat the same instructions throughout the coding.

CSS files are known as “cascading” stylesheets because styles inherit the properties of other previously defined styles, so properties "cascade down" the file as entered.

There are essentially three types of CSS:

  • Inline Style - applied to the individual HTML tag in a page.
  • Embedded or Internal Style Sheets - for controlling the display of an individual page by adding instructions between the <head> and </head> tags.
  • Linked External Style Sheets – used to control an entire site from one file.

External Stylesheets

An external stylesheet is the most useful and flexible way to use CSS. It is used for the whole, multiple-page website and by linking each page in a website to a single css stylesheet page, you get full control over the look and feel of a website. If you decide to change the background on the site, you can do it in one simple command. If you also wanted to change the <h1> tag to be slightly bigger across the whole site, for example, you can change it here.

Firstly though, you will need to put something in your file. To create your stylesheet, open a text editor such as NotePad or SimpleText. Save a blank file as stylesheet.css. There is one essential structure used in CSS:

selector {property: value; property: value; property: value; }

With this in mind, type in the following example:

p {color: red; font-size: 140%; }

The above rule applies to all paragraph elements (note that the US spelling of ‘color’ always applies, and never the UK version). Once you’ve linked the stylesheet to your pages, having this style declaration in your css file would make all the text in your pages enclosed in the <p> and </p> tags red, and sized 140% as big as the default font size.

You’ll then need to show your pages where their css file is by linking them together. Each page that you want to apply the stylesheet to would need this line of code at the top of it:

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

‘Rel’ stands for the file’s ‘RELationship’, and ‘type’ shows that it’s a text file acting as a CSS stylesheet. Your pages will now be formatted with your preferred values. You can link multiple stylesheets to each page if you want, for example, having one file with all your fonts, another for spacing and margins etc.

Embedded Stylesheet

If you use a common design across all of your site’s pages, you should be using the above method. If, however, a number of pages need some specific styling and you need to override the values you’ve defined in your main stylesheet, you can use embedded, or internal styles to embed style. An embedded stylesheet normally goes at the top of the page. An example of how to write an embedded style would look like this:

  <title>Dummy CSS</title>
    <style type="text/css">
    h1 { font-family:Arial, Courier; font-size:12px; color:#3f3f3f;}

Inline Styles

Inline styles are necessary if you need to modify one tag on its own.

They look something like this:

<p style=”color: blue;”>text</p>

This will make that specific paragraph blue.

This method is useful for one-off formatting, and overriding previously defined properties, but it should not be used wherever possible. If you find yourself adding the same style to multiple tags, it would be advisable to promote it to your main stylesheet, to save time and space.

Examples of incorrect use of CSS

1. Since the "&" is not a valid token in a selector, a user agent must ignore the whole second line, and not set the colour of H3 to green:

H1, H2 {color: blue }
H3, H4 & H5 {color: green }
H6 {color: black }

2. A declaration consists of a property, followed by a colon (:), followed by a value. Around each of these there may be a whitespace, such as spaces and tabs. Due to the way selectors work, multiple declarations for the same selector may be organised into semicolon (;) separated groups.

Therefore, the following rules:

H1 { font-weight: bold }
H1 { font-size: 14pt }
H1 { line-height: 16pt }
H1 { font-family: Verdana }
H1 { font-variant: normal }
H1 { font-style: normal }

are equivalent to:

H1 {
  font-weight: bold;
  font-size: 14pt;
  line-height: 16pt;
  font-family: Verdana;
  font-variant: normal;
  font-style: normal;

3. User agents must ignore a declaration with an unknown property. For example, if the style sheet is:

H1 { color: blue; rotation: 60minutes }

the user agent will treat this as if the style sheet had been:

H1 { color: blue}


This article was written by Claire Brown for Imre Ltd., a UK web design company. To find out more, please visit http://imre.co.uk