Introduction to CSS
What CSS is
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.
The old way to style content
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:
- Because your styles are embedded
into your content, it's laborious to write.
- You have to repeat the same styles
over and over again, wherever they appear on a page and across your
whole site.
- It's also lots of work to change
the style of your site, as each page and every piece of styling has to
be edited one-by-one.
- It adds extra size to every file.
- The same styles are seen by
everyone, no matter whether they're viewing on a monitor, listening to
the content, browsing on a PDA, or printing the content.
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
<div
style="background-color:#ff3; border:1px solid black; color:red;
font-size:150%; padding:1em;">I am a styled
div!</div>
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.
2. On-page CSS definitions
A better way to write CSS is to
define your styles once in the document (preferably in the document
<head> section).
Code
<head>
<style type="text/css">
div {
background-color:#339;
color:#fff;
padding:15px;
border-bottom:5px solid red;
margin-bottom:15px;
}
</style>
</head>
<body>
<div>
I am affected by the definition above..
</div>
<div>
So am I, but the styles are only defined once.
</div>
</body>
Looks like
I am affected by the definition
above..
So am I, but the styles are only
defined once.
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.
3. Separate style sheets
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.css
body {
background-color:#ccf;
letter-spacing:.1em;
}
p {
font-style:italic;
font-family:times,serif;
}
my-html.html
<head>
<link href="my-styles.css" media="screen"
rel="stylesheet" type="text/css" />
</head>
<body>
<p>Here is some content in a
paragraph.</p>
<p>Here is another paragraph.</p>
</body>
How 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.
Advantages of separate stylesheets
There are lots of advantages of
working this way, including:
- Reduced filesize - each CSS
definition is written only once
- Reduced bandwidth - web browsers
will remember (cache) the contents of CSS file, so don't need to
download the file again with each new page that uses it
- Easier updating - you only have to
change styles in one place for them to change site-wide
- Separates the work of styling and
creating content - you can create all your HTML pages first, applying
sensible semantic markup, class names and IDs, and then do all your
design work later on your style sheets.
How CSS styles apply to HTML elements
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.
1. Applying to HTML elements
themselves
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.
p {
font-weight:bold;
line-height:1.3em;
}
<p>The styles above will apply to me because I am a
paragraph.</p>
<div>But they won't apply to me.</div>
The code above will apply bold text
and slightly increased line-height to the contents of any element of
type <p> (i.e. paragraphs).
2. Applying to elements with class
names
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).
<style
type="text/css">
.custom {
color:red;
}
</style>
<p class="custom">Applies to me.</p>
<p>But does not apply to me.</p>
This is extremely useful, because you
can definte 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).
3. Elements can have multiple classes
HTML elements can have more than one class.
Class names must be separated in the class
property with spaces.
<style
type="text/css">
.makered {
color:red;
}
.yellowbg {
background-color:#ff0;
}
</style>
<p class="makered yellowbg">Both styles will apply to
me.</p>
4. Applying styles by id
property
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).
<style
type="text/css">
#banner {
color:green;
}
.special {
color:red;
background-color:#ff9;
}
div {
color:blue;
font-weight:bold;
}
</style>
<div id="banner" class="special">
This text would come out green, because the ID trumps the
class and the element type.
</div>
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.
5. CSS styles apply to elements
within elements, unless overwritten
Taking the above example...
<style
type="text/css">
div {
color:green;
}
.special {
color:red;
background-color:#ff9;
}
#banner {
text-decoration:underline;
font-weight:bold;
color:blue;
}
</style>
<div>
This text is only inside the div...
<p class="special">
This text is inside the div and inside the
paragraph...
<span id="banner">
This text is inside the div, paragraph
with classname and span with id.
</span>
</p>
</div>
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.
