Cascading
Stylesheets - CSS - tutorial |
Cascading Style Sheets (CSS) standards
were originally introduced in 1996, but like so many
technologies introduced by the W3C, the way the information
was presented confused many non-geeks. Consequently,
even 8 years later, many webmasters still haven't taken
advantage of this *huge* time-saving technology.
A cascading style sheet is a set of
instructions in a linked external file or within the
source code of a page that tells a browser how to render
page elements - text, tables etc.
Advantages of using CSS
How can implementing CSS help you?
Let's say you have a 50 page web site and the main
body text you use is 10pt. Times New Roman. This would
entail numerous instances of repetition in your coding:
<p><font face="Times
New Roman" size="2">This is a line
of text</font></p>
If you wanted to change the font to
Arial, you would need to edit every page to make the
changes. By using a *linked* style sheet (we'll cover
the differences between different kinds of CSS a little
later in this tutorial) you only need to change one
file and then the entire site would be updated.
Using CSS also makes your coding a
lot trimmer through making the repetition of formatting
instructions obsolete. Trimmer code = faster download
times and less bandwidth usage.
| |
Need a comprehensive manual
on using CSS? This book contains all you'll
need, including an exhaustive CSS Property
Reference Guide and tips which can serve as
a excellent desk reference. Chapters
available for free download |
Types of Cascading Style Sheets
There are three types of CSS
- Inline
- Embedded
- Linked (external)
The term Cascading Style Sheets is
a little misleading; only one type could be really
considered a "sheet", i.e. a separate page
- that is the "linked" or "external" style
sheet type - and this is where the real power of using
CSS lies.
The "cascading" refers to
the hierarchy of control:
- Inline styles takes precedence
- Then Embedded styles rules follow
- The Linked external style sheet instructions will
be used if In line or Embedded instructions are not
present present.
How to use CSS:
Let's start with the most useful kind
:
Linked External Style Sheets
Control an entire site from one file! This
is just a text file, saved with the tail extension
of .css that contains a series of instructions. When
a page links to this file, the browser references the
CSS instructions to render the page.
Exercise - using an external style
sheet
The easiest way to understand CSS
is to see it in action.
Create a text file and save it in
the root directory of your folder where you store your
web pages as test.css. In the text file, add these
instructions only:
BODY {
font-family: Arial;
font-size: 10pt;
}
Now start a new web page and save
it as testcss.htm
Place the following line between the <head> and </head>
tags
<link rel="stylesheet" type="text/css"
href="test.css">
This line "attaches" the sample.css file.
It instructs the browser to refer to the CSS file for
element rendering instructions.
After you've ensured that both files
are saved, close the page and then open it again. Try
typing some text on the new page and then previewing
it. You'll notice that the text is now in Arial 10pt.
Try changing the font name in the
test.css file to Verdana and the size to 14pt in sample.css,
save it, also close testcss.htm and open it again.
Type some text - it should be displaying in 14 pt.
Verdana
Style sheets can be as simple or as
complex as you like - there are so many elements that
can be included in your CSS.
Let's try a few more things - open
the test.css file and replace the BODY statement with
this:
BODY {
background-color: #ffffff ;
margin-top: 0%;
font-family: Arial, Verdana;
font-size: 10pt;
color: #0099CC;
}
- The background-color sets the background color
for the page in hex values
- The margin-x sets the size of the margins around
the page (you can also use bottom, left and right
statements).
- The multiple fonts are listed in case a person
doesn't have a particular font on their computer- in
that case the next font type will be used. You
can add as many fonts as you want, but it's recommended
that you only used similar font types.
- The font-size is ummmm... ;)
- The font-color is the color that the font will
be displayed using hex values.
In the above examples, we've only
applied styles to the basic body element; but this
isn't even scratching the surface of CSS controls.
Let's say you want to use 12pt. Arial
as body text, but you also use tables where you wish
to use 10pt Arial, and in a different color:
BODY {
background-color: #ffffff ;
margin-top: 0%;
font-family: Arial, Verdana;
font-size: 12pt;
color: #0099CC;
}
TD {
font-family: Arial, Verdana;
font-size: 10pt;
color: #000000;
}
The "TD" stands for Table
Data - the cells within a table.
CSS gives you incredible flexibility.
Here's another example. Your main body text is in 12
pt. Arial, table text is in 10pt.; but you have other
tables that use 8pt.
Since you've already used the TD element
in your CSS file, you'll need to create a new "class".
Here's an example of this scenario:
BODY {
background-color: #ffffff ;
margin-top: 0%;
font-family: Arial, Verdana;
font-size: 12pt;
color: #0099CC;
}
TD {
font-family: Arial, Verdana;
font-size: 10pt;
color: #000000;
}
.smallblack {
font-family: Arial, Verdana;
font-size: 8pt;
color: #000000;
}
When creating your own classes, they
can be called whatever you like, as long as it is a
single word and is preceded by a "." as shown
above. If you're coding with a text editor, you'll
need to add a class="smallblack" (without
the preceding ".")to the element e.g:
<table border="0" cellpadding="5" cellspacing="0"
class="smallblack">
If you're using as WYSIWYG editor
such as FrontPage or Dreamweaver, applying the new
class is simple - just highlight the element; then
select the class from the dropdown selector on the
menu bar - it's usually on the left hand side in FrontPage.
These examples are just to whet your
appetite. With CSS you can customize just about any
element on your web pages; from headings to scrollbars
and form background colors to classy image borders.
This is just a small taste of what
can be achieved with CSS - for more resources and references,
see the end of this article.
| |
Want to learn more about
using Cascading Style Sheets? HTML Utopia has
over 480 page of tutorials and exercises, including
an exhaustive CSS Property Reference Guide. Chapters
available for free download |
Other CSS types
Inline Styles
Inline styles can be added individual html tag in a
page by using the "style"
attribute - e.g.
<p><font style="color:
blue">This is a line of text </font></p>
If you have an external style sheet
that states all your regular body text should be black,
but you want to use blue for one block of text, the
inline style can be introduced to override the linked
style sheet statement for that text block.
Embedded Style Sheets
Embedded style sheets are used for controlling the
display of elements on an individual page by adding
formatting instructions between the <head> and
</head> tags. Embedded styles will also override
instructions contained in a linked style sheet for
that page only.
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
<!--
H1 { font-family: Arial, Verdana;}
P { color: #0099CC }
-->
</STYLE>
</HEAD>
CSS Compatibility issues
CSS, like many other coding technologies,
is constantly being developed. CSS1 was released in
1996 and CSS2 was launched in 1998. Even though it's
nearly 6 years since the second set of standards was
developed, some browsers are still not compatible with
all those standards.
This means that some CSS2 instructions
you may implement won't be correctly translated by
versions of web browsers more than a couple of years
old - so for this reason, even now, sometimes it's
best to play it safe and stick with CSS1 standards.
Related learning resources:
If you've never created a CSS compliant
site this book, "HTML
Utopia" will get you up and running quickly.
It also contains an extensive CSS Property Reference
Guide and tips which can serve as a excellent desk
reference. Chapters
available for free download
W3schools has
some excellent tutorials and references for CSS - well
worth checking out.
Forget about frames - try Includes!
- Still stuck using a framed site because you feel
it makes web site administration and updates easier?
Perhaps you don't realize the number of disadvantages
of frames. Read this article for the lowdown on framed
sites and suggestions on alternatives.
Michael Bloch
Taming the Beast
http://www.tamingthebeast.net
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce
Resources
____________________________
Copyright information.... This article is free for
reproduction but must be reproduced in its entirety,
including live links & this copyright statement
must be included. Visit http://www.tamingthebeast.net
for free Internet marketing and web development articles,
tutorials and tools! Subscribe to our popular ecommerce/web
design ezine!
|
