CSS Basics
A style sheet is a set of rules for defining how one or more web pages should be formatted. A style sheet allows for separation of content and how that content should be presented. CSS (cascading style sheets) is the W3C standard style sheet definition for the displaying a page on the web.
Although CSS has been around for a bit, browser support is not yet fully standards compliant. Vendors tended to implement the different rules according to their own interpretation. Browser support has improved considerably, even for IE ( one of the least compliant browsers) with the pending release IE7. For more on browser support, head over to W3Schools CSS Reference or QuirksMode.
You can include style sheets in your html pages using any of these methods:
- Inline style. Style sheet rules are inserted within an HTML tag
- Internal style sheet. The css rules are defined within the <head> element of the HTML document
- External style sheets. The css rules are defined in a separate text file, normally with the .css extension. This file can be included by linking (<link ...>) to it or by importing it using the @import command.
Using an external style sheet is normally the preferred approach as:
- you can use the same style sheet for multiple pages - good for code maintenance
- save on bandwidth as the browser only has to download one file
- your presentation is totally separated from your content
Order of precedence
Its possible to define styles for a single html page using multiple external files, or using a combination of inline, internal, and external styles. The final style is the sum of all styles. If any rules conflict, the browser will use the highest priority style as follows (from lowest to highest priority):
- Browser default styles
- External style sheets
- Internal styles
- Inline styles
For multiple external styles for the same media type, the priority is determined by the order in which you link the files.
Basic CSS Syntax
A style sheet consists of a sequence of style rules. Each rule defines the elements to be styled, and how they will be styled. A rule consists of two main parts - a selector and declarations as:
selector { declarations }
The selector specifies the element to be styled. This can be an HTML element, eg <a>, or the values of the HTML attributes class and id. Using the class and id values limits the styling to elements with the specified class or id.
The declarations are a sequence of property-value pairs separated by semicolons:
property: value;
The property specifies the type of styling you want to apply, and the value is, well, the value you want for the style. For a complete list of allowed property-value pairs, see W3Schools CSS.
Examples of CSS rules
| p { color: blue; font-size: 90% } | Styles all paragraphs(<p>) with text colour blue and font size set to 90% of the current size. |
| h1 { border-bottom: 1px solid red; } | All <h1> will have a red line below them, with a width of 1 pixel |
Inline Styles
With inline styles, you can insert the style into an HTML tag. You might use this for a one-off customisation of your styles. This should not be your normal way of defining styles, as there is no separation of presentation from content. As an example, if you want to change the color and font size for a particular <h1> element, you might do this:
<H1 style="color: red; font-size: 2em">Red letters, double size</H1>
Internal Styles Sheets
Here again you include your styles within an HTML page. Internal styles allow for a greater separation between content and presentation. Bear in mind, however, that the styles will be downloaded with every page they are included in. Also, it can be a time-consuming job to change one style on all the pages. An example HTML with an internal style sheet is shown below:
External Style Sheets
This is the best way of using style sheets if you want to define styles for multiple pages. You can link to your css file from each HTML page, or import the CSS file into each HTML page. Linking is preferred because it has better browser support. The link statement is included within the <head> element, and has the format:
<link rel="stylesheet" type="text/css" href="url_of_file">
The code below links to a file called styles.css in the same directory as the HTML page.
Style sheets for different media.
You might want your pages to print in a different format to the on-screen display, or to change the format for the visually impaired, or to scale it for mobile devices. The @media rule allows you to define styles for different media in the same style sheet.
This displays coloured text to the screen, but prints in black and white. Alternatively, you can link in different css files for each media:
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
The styles in print.css will be used for the printer, and the styles in screen.css will be used for on-screen display. Screen is the default media type if no media type is specified.
Here is the complete list of media types you can define style sheets for.
| Media type | Description |
|---|---|
| all | For all media types |
| screen | For computer screen display (default) |
| Used for printing | |
| aural | Used for sound synthesizers/web browsers |
| handheld | For small or handheld devices, eg mobiles |
| braille | Used for Braille feedback devices |
| embossed | For paged Braille printers |
| projection | Used for projection devices |
| tty | For devices with a limited display, eg a teletype machine |
| tv | For television-type devices |
Thats the end of this concise introduction to CSS. There is a nice beginners' tutorial at W3C: Starting with HTML and CSS to help you get a firm grip on CSS. You will also find tonnes of resources to help you further.
