|
CSS stands for Cascading Style Sheets. This is a simple styling language
which allows attaching style to HTML elements. Every element type as well
as every occurance of a specific element within that type can be declared
an unique style, e.g. margins, positioning, color or size. So you might
consider these style sheets as templates, very similar to templates in
desktop publishing applications. For example:
body { background-color: white;
color: darkblue;
font-size: 10pt;
font-family: Arial;
margin-left: 10%}
Linking and Embedding
There are many ways to link style sheets to HTML, each carrying its own
advantages and disadvantages. New HTML elements and attributes have been
introduced to allow easy incorporation of style sheets into HTML documents.
External style sheets
An external style sheet can be linked with any number of HTML documents
by using <link> that is placed in the document HEAD. The tag's various
attributes indicate things about the style sheet - the rel attribute the
type of link (a style sheet); the type attribute the type of style sheet
(always text/css); and the href attribute the location of the style sheet.
This is a very convenient way of formatting the entire site as well as
restyling it by editing just one file. For example:
<HTML><HEAD>
<LINK rel="stylesheet" type="text/css" href="basic.css">
</HEAD>
<BODY> ... </BODY>
</HTML>
Once you have linked the style sheet to your page, you then have to create
the style sheet. For example:
body { font-family: Verdana, Helvetica, Arial, sans-serif;
color: darkblue; background-color: #ffeeff}
If you saved the example above as a style sheet, then every page that
links to it will have the specified styles. Files containing style information
must have extension .css.
Embedded Style Sheets
If you have a single document that has a unique style, you can use an
embedded style sheet. If the same style sheet is used in multiple documents,
then an external style sheet would be more appropriate. A embedded style
sheet is inside the HEAD element with the STYLE element and will apply
to the entire document:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
body { background: url(flower.gif) lightyellow; color: darkblue }
.zn { margin-left: 8em; margin-right: 8em }
-->
</STYLE>
The required TYPE attribute is used to specify a media type, as is its
function with the LINK element. You should write the style sheet as a
HTML comment, that is, between <!-- and --> to hide the content
in browsers without CSS support which would otherwise be displayed.
Importing Style Sheets
You can import a style sheet with CSS's @import statement:
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(http://www.computerjobsweb.com/style.css);
@import url(/product/file.css);
table { background: yellow; color: #003366 }
-->
</STYLE>
The @import allows you to keep some things the same while having others
different; and follows this syntax: @import url(style.css);
Note: If more than one sheet is imported they will cascade in order they
are imported - the last imported sheet will override the next last; the
next last will override the second last, and so on. If the imported style
is in conflict with the rules declared in the main sheet then it will
be overridden.
Inline Style
Inline style is the style attached to one specific element. Any opening
tag may take the style attribute:
<P style="font-size: 10pt">
To use inline style, one must declare a single style sheet language for
the entire document using the Content-Style-Type HTTP header extension.
With inlined CSS, an author must send text/css as the Content-Style-Type
HTTP header or include the following tag in the HEAD:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
|
Earn your 
Go to