Cascading Style Sheets (abbreviated CSS) is a language known to browsers which
allows you to control many elements of your HTML in a global fashion. CSS is very
economical; it saves you HTML coding time as well as byte after byte of HTML.
How does it do this?
CSS makes it possible to define an HTML element once (with various attributes)
and apply it to your entire document (or even your entire site) wherever that
element appears.
document-level stylesheets using <style>
Let's assume we are only working with a single document (.html file) for starters.
You'll generally want to keep your CSS code up in the header
portion of your file between the <head> tags. Designate your stylesheet
code with the <style> element and make sure the browser knows it's the CSS
style language. Are there other style languages worth using? No. In fact CSS is
the defualt style in most browsers. We want to use the most common languages in
our client code to avoid browser compatibility issues.
Tell the browser it's CSS anyhow (type="text/css") to allow for browsers
that haven't made CSS the default style language.
Notice too that we will wrap the CSS code itself as an HTML
comment so the browser doesn't try to print it as text. One would think the
browser would be smart enough to figure these things out, but remember that all
browsers are not created equal.
To be perfectly honest, I've never used document-level stylesheet code as demonstrated
above. This is because I've always wanted to benefit from how CSS can be used
to standardize format across an entire website. Few design approaches can compare
to CSS in making a site feel tight and cohesive on first glance.
In order to use CSS for more than page, you need to create an external CSS file
which contains only CSS code. That file is called by each of your webpages in
the header, using the <link> element as below:
The file "birdsite.css" in this example will be downloaded by the browser
and its format definitions will be applied to the webpage. On whatever page you
add the <link> tag, the styles will apply. This makes it very easy to establish
a separate stylesheet file to define the look of an entire site.
headings with CSS
Stylesheet code is much like HTML. First you establish an element and then
define it with attributes as appropriate. Let's start with HTML headings.
The below CSS code is controlling how each heading (<h1>, <h2>,
<h3>, <h4> and <h5> ) will be formatted in your document.
The elements themselves are stated first (H1, H2, etc.) and the attributes we
are applying fall within the braces {}. Take notice of where colons and semi-colons
should be placed as well. This code will work to define the heading chunks within
your HTML:
<h1>This is the top heading</h1>
<h2>This is the first subheading</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
This combination of the heading tags and their CSS definitions will produce:
This is the top heading
This is the first subheading
This is heading 3
This is heading 4
This is heading 5
There are numerous other attributes you can assign to your heading elements. In
fact, this book only touches on the most common and useful CSS applications. Check
out the WC3 recommendation
document for a more complete listing of the elements and attributes that CSS
puts at your command. If you are interested in leveraging CSS to its fullest,
read the W3C recommendation thoroughly and be sure to test your code in at least
two or three browsers. There will be differences.
<body> effects with CSS
The <body> tag can also be manipulated with CSS, affecting all text between
your <body> tags on the page. Remember, this can be overriden by any further
markup, such as heading tags or <font> tags. Best use of CSS however means
using no <font> tags at all.
Here is an example of defining the <body> text with CSS:
body {font-family: Courier; font-size: 10pt; font-style: normal}
What better way to control font sitewide than this? Linking your pages to a
stylesheet with this code would make youe entire site 10pt Courier in a heartbeat.
Once again, consult the W3C recommendation for more on what can do with the
<body> tag through CSS. Many of the attributes available to one element
are also available to other, so try things like "text-decoration"
in your body definitions as well.
links
The first thing that led me to CSS was its ability to do "hover"
effects on links. Standard HTML doesn't let you make a text link "rollover"
when the user mouses over it. CSS gives you full control over links, and using
the hover state on text links is one of the "cheapest" methods of
adding interactivity to a website. See how the four link states (link, visited,
active, and hover) are defined in CSS:
Play with your link definitions, paying special attention to the hover state
and what you'd like to do with it. Should it change color? Become underline
like above? Do nothing different? It's all up to you.
using classes
The truly enlightening fact about CSS is that is extendable into classes,
which provide a further breakdown of elements on your page. If you wanted
to define two classes of links, for example, name them like this (but be more
creative than these):
Keep in mind that if your browser history knows you've already visited a URL,
the link state for any link pointing there will be "visited". If it
is yet to be visited, the state will be "link". You may need to clear
your browser history in order to test your links while designing, so you can
check and re-check what a "fresh" user will see upon entering the
site.
You can create as many classes as you like for each element. Common sense design
rarely calls for more than two or three classes per element.
defining <table> classes
Many HTML elements are exposed to CSS refinement, although we are dealing with
just a few here. From time to time I've found it useful to set font attributes
within <table> classes in order to distinguish table text from plain-old
<body> text... and gain further control over formatting.
The first line covers tables in which we have not given a value to the class
attribute. This rule applies to the other elements as well. The second defines
a second format for tables given a class of "class2". Here is some
HTML with the second type of table nested within the first:
We could have also defined the table borders within the CSS instead of within
the HTML. But in this case we decide to set the border attribute within the <table>
tags, giving us table-by-table control over the setting... but also requiring
our attention upon creating each table. Setting attributes with CSS, to the extent
that it is convenient, can save on a lot of HTML code, but sometimes there is
no substitute for forcing the settings in the HTML itself. Know your options and
make your choice for each problem you are presented with; there is no one correct
approach.
styling input fields
Once you make two or three forms in HTML, you'll
quickly grow bored of how they look. The browser default for input fields such
as dropdown menus, text
fields and submit buttons won't often compliment
your creative page design. Luckily, CSS gives us access to input field attributes.
When I discovered this, I felt I had ascended to a new level of developer's
enlightenment.
A dropdown menu, as we've learned, is put together by <select> tags and
<option> tags in between. In CSS we can control the look of the whole
banana by defining that <select> element:
The possibilities with CSS extend far beyond these examples, but this should
be enough to get you started. Begin by controlling just one or two elements
in your webpages and expand slowly. You won't want to become completely reliant
on CSS too quickly, but it can be useful in many circumstances early on. These
are the ones we have tried to focus on in this section.