An Introduction to CSS
By Ben Hunt2007-12-17
How CSS works
|
|
CSS is a new smarter way to apply style properties to HTML elements.
You can set all kinds of style properties, like border, font, background, spacing etc. (We'll go into these in detail later.)
There are 3 main ways CSS styles can be applied:
- Inline with HTML
- On-page style definitions
- Separate style sheets
1. CSS Inline with HTML (use with caution)
You can write CSS directly into an HTML tag. In the example below, don't worry about the specific styles for now. (The <div> element is simply a box, as you'll see in the introduction to HTML.)
Code
Looks like
This approach is very similar to the old-style inline HTML styling, and suffers from all the same problems.
It is only appropriate where the styling really is one-off. If there's a possibility that you'll use the same styling elsewhere, you really should use one of the alernative methods below, because it will save time and effort if you have to change your styling later.
Tutorial Pages:
» The old way to style content
» How CSS works
» On-page CSS definitions
» Separate style sheets
» Advantages of separate stylesheets
» How CSS styles apply to HTML elements
