|
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10)
CSS (Cascading Style Sheets) are all the rage these
days. The reason for their growing popularity is obvious. They
offer Web designers the power and flexibility to manage the design
of their Web site in a way not possible using standard HTML. As
a matter of fact, this Web site uses CSS. CSS offers the same capability
as templates: the ability to alter the style elements of a large
Web sites by editing one document.
Browser Support
The current downside of using CSS is the buggy support by mainstream browsers.
Although Microsoft added CSS support to Internet Explorer 3.0, the integration
was not without problems. Netscape added CSS to Netscape 4.0 but bugs exist
there as well. On the plus side if a browser does not support CSS it simply
ignores it and uses existing code to render Web pages. In my opinion CSS
is here to stay and offers Web designers enormous flexibility in creating
and controlling type, color, margins, and other style elements.
Types of Style Sheets
CSS can be applied to HTML pages using three methods. Each has advantages and
disadvantages. You can also combine these three methods in a number of ways.
External CSS
This is the most powerful way to apply styles throughout an entire Web site.
You create a CSS document in a text editor and save the file with a .css
extension. Any page that links to that .css document takes on the styles
within it. Here is a sample of a .css document. I call it - style1.css.
|
<style>
<! - -
body {
background: #CCCCFF;
}
p {
font-family: arial;
font-size: 12pt;
}
- - >
</style>
|
To apply this CSS document to an HTML document add
one line of code within the <head> tags. There are no close
tags with this syntax.
|
<head>
<link rel=stylesheet href="style1.css" type="text/css">
</head>
|
Like a template, one Web page or ten thousand can
be controlled by this one document.
Embedded CSS
This type of CSS style is applied to a single Web page. These style tags are
placed within the <head> tags of an HTML page. This is an example of
an 'embedded CSS':
|
<html>
<head>
<title>Example of Embedded CSS</title>
<style>
<! - -
body {
background: #CCCCFF;
}
p {
font-family: times;
font-size: 14pt;
}
- - >
</style>
</head>
<body>
This is an example of embedded CSS.
</body>
</html>
|
This CSS will create a light purple background color for the Web page and apply
14 point 'times' font to everything inside paragraph <p> </p> tags.
(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) |
