CSS Basics for Everyone
Article ID: KB101840
Whether you're seriously considering committing to
CSS-only, standards-based web sites or just want to get your
feet wet, this article will cover CSS basics to get you
started. In addition to looking at how CSS is structured,
I'll show you how to format fonts, colors, and backgrounds
-- and a popular favorite, removing link underlines from
your text navigation links!
You'll want to start with a web site that is free
of <font> tags and any other tags or attributes that set
colors, fonts, or backgrounds.
There are a few ways that you can get CSS into
your pages -- by adding CSS directly inside your HTML tags
("inline"), adding CSS to each page ("internal"), or
creating a stylesheet that applies to all your pages
("external stylesheet"). For the purposes of this article,
I'll show you how to create an external stylesheet and link
it to your pages.
It's pretty easy -- create a new, blank file in your HTML
or text editor and save it with the .css extension into your
web folder. You can call it whatever you want -- styles.css
or stylesheet.css are common filenames to use.
Now, open all your web pages and insert this code into
the <head></head> of your document:
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
Obviously you'll want to make sure that the filename (stylesheet.css
in my example) matches up with yours, and that any pages in
subfolders of your site can still fine the stylesheet by
adding appropriate path directions. For example, a page in a
subfolder would have this href instead:
../stylesheet.css.
Now it's time to actually add your CSS code by learning
some basic rules. CSS code always has this format:
selector { property: value; }
This code can be split up in different lines and indented
in different ways, but the basic premise is the same. You
can also have multiple properties and values inside of the
curly braces. Meanwhile, the "selector" can be an HTML
element (like p, h1, or a), or a class (a special name
defined by you, starting with a period, such as .special or
.alignleft), or an ID (another special name defined by you,
starting with a #, such as #pagetitle or #mainimage).
The difference between classes and IDs is that you can
apply a class multiple times within a web page while IDs can
only be used once.
Let's see how this works in real life. Assuming you've
taken out the <font> tags and other attributes that define
colors, fonts, and backgrounds, your text is probably
looking pretty plain. Let's change the default font for your
entire web site by defining the font property for the body
tag in the stylesheet. Open your .css file and add this
code:
body {
font-size: .8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Save your .css file and now look at your pages. If the
stylesheet has been linked to the pages properly, you'll now
see that the font of your site is no longer Times New Roman
(or whatever default font you have set in your browser)!
Think back to the old days when this would have taken
several <font> tags on each page, and rejoice!
Now, let's add some pizzazz to your top level headings:
h1 {
font-size: 150%;
font-weight: bold;
letter-spacing: .2em;
text-transform: uppercase;
color: #3352aa;
border-bottom: solid 1px #3352aa;
}
You'll end up with headings that are big, bold, and have
a pretty blue color with a pretty blue underline going
across the page, and the letters are uppercase and slightly
spaced apart. That definitely sets them off.
Also, the headings are still Verdana, because they pick
up the "cascading" style from the body element's rule.
Already, you've been introduced casually to some
CSS properties -- font-size, family-family,
font-weight, letter-spacing, text-transform, color, and
border-bottom (which is really a shortcut way for defining
three properties in one -- border-bottom-style,
border-bottom-width, and border-bottom-color). After just
reading a few paragraphs, you
have so many more options with CSS than you do just HTML,
including letter spacing, changing all the letters to be
uppercase (or lowercase), and defining a horizontal
separator under the text without needing images or a table
cell.
Let's extend your wow-capabilities by adding in
background colors and background images. With CSS, they are
no longer confined to just table cells or page backgrounds.
First, locate a small bullet or icon-type image that you'd like to
use to set off all your <h2> headings. Now, try this code on
for size:
h2 {
font-size: 150%;
font-weight: bold;
padding-left: 20px;
background-image: url('images/bulletimage.gif');
background-repeat: no-repeat;
}
You'll want to change the location and filename of the
image to match yours, and you may want to adjust the
padding-left amount as well, which is what pushes the text
away from the left so that there is room for the image to
show up. But as you can see, your level 2 headings now have
a cool bullet/icon setting them off -- with some simple CSS
that you can adjust at any time!
If you're still used to using table-based layouts, you
can clean up your HTML code by applying the same background
concepts to table cells. Obviously you don't want to simply
write a rule for "td" because that would apply to every
table cell. Instead, you can target specific table cells by
using classes, and even minimize some extra
table-cells-used-for-graphics action
while you're at it.
Here's a typical nested table trick -- the outermost <td>
tag represents a cell used for the left column of a layout
table (red outline), and it has a nested table inside
(purple outline) that holds the
content in one cell and a graphic element for a curved
column bottom in another:
<td>
<table .... >
<tr>
<td bgcolor="#dbe2f1">
Text content here...
</td>
<td>
<img src="images/curve.gif" ... />
</td>
</tr>
</table>
</td>
Let's take a look at this table with the bottom cell and
graphic removed completely, the bgcolor attribute replaced
with an ID (to be used only once on a page), and some
background magic applied with CSS...
<td>
<table .... >
<tr>
<td bgcolor="#dbe2f1" id="leftcolumn">
Text content here...
</td>
<td>
<img src="curve.gif" ... />
</td>
</tr>
</table>
</td>
CSS code:
#leftcolumn {
background: #dbe2f1 url('images/curve.gif') no-repeat bottom left;
padding-bottom: 70px;
}
The web page looks exactly the same but is a few lines of
code lighter. In the CSS, I used the shortcut background
property, which defines the background-color,
background-image, background-repeat, etc. properties in one
quick line of code. The CSS defines a light blue background
color for the entire cell, then sticks the curve graphic at
the bottom of the cell, The bottom padding amount keeps text
content from overlapping the curve graphic too much.
Finally -- how do you remove underlines
from linked text? While underlined linked text in content
areas is visually helpful for readers, they can be
distracting in text navigation bars. You can target your
navigation and subnavigation links using a class, and then
add some extra-special code to your stylesheet. Let's first
look at the HTML:
<p class="navlinks"> [[ your links here ]] </p>
First -- the class can be applied to any element that
contains your links. In the code above, the class is applied
to a paragraph tag. But if your links are inside of a table
cell, you can apply the class to the <td> element like this:
<td class="navlinks">
Now let's look at the CSS:
.navlinks a { text-decoration: none; }
It's really that easy! But let me explain the code a
little more. First, let's look at this code:
a { text-decoration: none; }
If you ONLY have "a" as the CSS selector, then you'll
take away underlines from EVERY link in your web site. But
this may make links hard to pinpoint in the content areas of
your site. So, by adding the ".navlinks" in front of the
"a," you're limiting the definition to "only link tags that
are inside something with the navlinks class." This means
that your navigation links won't have underlines, but the
other links in your site will.
I hope this article has helped you to begin to see the
possibilities of how CSS can really start to transform your
site, even if you're still more comfortable using tables.
There are so many more wonderful properties out there that
you can define -- I'd encourage you to visit w3schools.com
and look at the possible CSS properties and the values that
they can have.
You've already caught a glimpse of how CSS can streamline
your code; in next month's newsletter, we'll put a
tables-based site vs. a CSS-only site on the scale and see
how they weigh!
Authors and Contributors:
Corrie Haffly
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1121/kb101840.htm
permalink to this article:
http://www.pixelmill.com/support/kb101840.htm
Back to top