CSS (Cascading Style Sheets) is a smart way to add styling information to web pages.
While it's possible to add styling to HTML (e.g. using the <font> tag) HTML should only be used to structure your content, CSS is the only way you should apply styling.
In the olden days, when you wanted to change the font of your HTML, you would have to use a <font> tag, like <font face="Times">...
If you wanted to set the background colour and border width of a table and the amount of padding in each cell, you'd put <table border="1" bgcolor="silver" cellpadding="3" cellspacing="0">
There were a few serious problems with this type of approach:
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:
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 alternative methods below, because it will save time and effort if you have to change your styling later.
A better way to write CSS is to define your styles once in the document (preferably in the document <head> section).
Code
Looks like
The benefit of this over the previous approach is that the style definitions are only written once. In this case, they'd apply to any <div> elements on the page.
Use this method when you want to apply similar styles to multiple elements on a page, but not on any other pages. To apply the same styles to things on multiple pages, you need to use method 3 below.
The ideal way to define styles for your HTML elements is to put the definitions in a separate stylesheet document. Then, any page that includes the CSS file will inherit the same styles.
(Another benefit of this method is that it enables you to use different style sheets for different user agents - which we'll address in a later article.)
HTML pages can include as many CSS files as you need, and the styles will be combined together (according to inheritance & cascading rules we'll get onto later).
Code (2 different files):
my-styles.cssHow it looks
Here is some content in a paragraph.
Here is another paragraph.
Note that, again, the styles I defined once have been applied to more than one qualifying element. The difference between this method and the one above is that, because I've defined the styles in a separate stylesheet, all I need to do to apply those styles to another HTML page is include the same stylesheet reference.
There are lots of advantages of working this way, including:
There are a few basic rules that govern which (separately-defined) styles apply to what elements. Fortunately, these are relatively simple and logical, once explained. I'll go through them one at a time.
In CSS, if you want some styles to apply to HTML elements of a certain type, you write the HTML element type, followed by style definitions all contained between curly braces and separated with semicolons.
The code above will apply bold text and slightly increased line-height to the contents of any element of type <p> (i.e. paragraphs).
You can give any HTML element one or more class names. In CSS, these are defined with a preceding period (full-stop).
Styles derived from classnames (normally) override any of the same styles defined for the HTML element type (more on this later).
This is extremely useful, because you can define style characteristics under a single class, and then apply those characteristics to multiple elements by giving them that class (even if they're different types of elements).
HTML elements can have more than one class. Class names must be separated in the class property with spaces.
HTML elements can have id properties as well as class names.
While there can be multiple elements that share any class name, there should only be one element with a particular id property. This isn't important in CSS, but it is important in DHTML, so good practice to follow.
Styles are associated with particular ids in CSS by prefixing the name with a hash/pound sign (#).
Another thing to remember is that properties inherited from an id will overwrite properties an element gets from its class (or from its HTML element type).
Note that, in the example above, the font-weight:bold; and background-color:#ff9; styles still apply to the text, because it's only the color: property that is overwritten by the superior style definition.
Taking the above example...
The first bit of text gets its green colour because it's inside the div.
The second bit of text becomes red because it's inside something with class="special", which overrides the previous color property. It also gets the additional background-color.
The third bit of text is inside all three elements, but the properties it gets from its id overrule any other conflicting style properties it gets from the other elements. Note that it has also inherited the background-color from the special paragraph, because the id's styles don't specify a background.
Do you love our approach to crafting simple & effective web sites that just work for people?
We'd love to hear about your web strategy. Contact one of our team today!
Sign up for my regular newsletter to keep updated on everything I'm doing and thinking about in web design.
