Page
1 of 3: What CSS is & why its used.
Cascading Style Sheets (CSS) are a powerful way to separate formatting from content on a web document. A text file (saved as a *.css file) can contain a large amount of declarations for the way in which HTML elements look. This css file is then referenced from each page with the use of a single small line of code, specifying the filename and where the file is. Without the use of a stylesheet, an HTML document can look a little flat. If you like, CSS is like a nice shiny wrapping for HTML.
As well as using an external file, styles can be hard-coded into most HTML elements, although the external file is a more consistent way of formatting, as the linked stylesheet will be universal (to the whole site). Hard-coded, or inline declarations will only render on that specific page, creating a possible issue of consistency.
A stylesheet consists of HTML elements, followed by rules defining how the elements will look. Font sizes, types, background colours, table borders are a few example of what would be defined in a typical stylesheet. The syntax of a stylesheet defines an HTML element followed by an attribute, which is then defined by a value. For instance, BODY is an HTML element, H1 is an attribute and color: black; is a value.
CSS is processed and displayed entirely client side, and you need no special software to create or run a stylesheet - a simple text editor will suffice. Programs like Microsoft Visual Interdev have a stylesheet editor built in which uses a wysiwyg interface to create the declarations without having to hand code.
Example 1: Simple inline stylesheet
<HTML>
<HEAD>
<TITLE>Introduction to styles</TITLE>
<STYLE>
H1, H2, H3
{
font-family: arial, trebuchet ms;
text-decoration: underline;
color: navy;
}
</STYLE>
</HEAD>
<BODY>
<H1>this is the h1 tag, modified using css</H1>
<H2>this is the h2 tag, modified using css</H2>
<H3>this is the h3 tag, modified using css</H3>
</BODY>
</HTML>
So, what is the above code doing? - Well, we have redefined the H1, H2 and
H3 tags in an "inline" stylesheet, i.e. one that is hardcoded within
the page, rather than a separate CSS document. We have declared how we want
H1, H2 and H3 to look, and then we have used the tags to display some text,
using our styles.
In this instance, we have grouped H1, H2 and H3 together. HTML elements can
be redefined individually, or, as shown, as a group.
Example declarations
What the declarations do:
- font-family defines a single font type or a group of font types
that will make up the text. Why are there two fonts defined? Well, if a user
doesnt have a certain font installed, it will try the next in the list and so
on. In this case the majority of people will have arial so it will render in
arial, were you to specify a font somebody didnt have with no alternatives,
the font would then render using the default on that persons machine, which
may not fit in with the styles on the rest of the website - so its a good idea
to include alternatives.
- text-decoration defines the ways text can be styled, including
such attribute values as underline, strikethrough and overline.
- color, is simply the colour that the text will be, this can be
a hex value (e.g. #FFFF00) or it can be one of the colour names, such as red
or orange. (Using hex codes is recommended, as some
browsers such as Opera will only pick up the hex code and not the colour name.)
These are just three declarations that can be made with CSS, out of a list
of thousands. A CSS book or reference point is strongly recommended for learning
and understanding them all. A good online example is webref
(External link, opens in new window)
Go to: Next page >>>
| Home | Top
Partners
