Style Sheets: Introduction
You've probably heard a lot about Cascading Style Sheets (CSS) lately and even if you
haven't, there's a good chance you've been using numerous Web sites that make
use of this new technology. Here you'll find a step-by-step guide to CSS, and
how you can use it to your advantage.
CSS offers Web designers many of the features commonly found in desktop publishing
applications. With CSS you can specify font point sizes, font attributes
(italics, underline, etc), page margins, colors, spacing, positioning,
visibility, and much more.
Note: To see all of the examples in this
article you need to use a browser version that supports CSS, such as Navigator
4.x or Internet Explorer 4.x.
Using CSS you can apply different attributes to every tag you use in your pages.
These attributes are expressed in "rules"; a rule is made up of a
selector (the tag to which it applies) and a declaration (the attributes to be
applied). For example, if we wanted to set your <P>
tags to display 12-point Ms Sans Serif with a yellow background, we would
create the following rule:
P { font-family: "ms sans serif"
font-size: 12pt; background-color: yellow; }
In the above rule, P is the
selector -- the HTML tag to which the style attributes will be applied. Curly
braces mark the start and end of the style declaration that apply to the
selector. It's important to remember to separate each declaration with a
semicolon.
Let's start with a basic HTML file.
<html>
<head>
<title>Welcome to my Web Page</title>
</head>
<body>
<h1>Welcome to my Web Page</h1>
<p>Today I'm going to learn CSS</p>
</body>
</html>
Now let's add some style! We'll change the
attributes of the <H1> tag for our header and
<P> for our page content by inserting the following
code into the <HEAD> of our HTML document.
<STYLE TYPE="text/css&">
<!--
P { font-family: "ms sans serif";
font-size: 12pt;
background-color: yellow; }
H1 { font-family: "impact, arial";
font-size: 35pt;
color: blue; }
-->
</STYLE>
Being able to attach attributes to specific tags
can be useful, but if you're like most people you probably don't think of your
pages in terms of where the <H1> and
<P> tags are. You probably break the page down into content areas such as
"header," "content," "nav bar," etc. CSS makes it
easy to assign a style to a specific area by using classes.
Classes let you identify a content area
regardless of the tags used to create it and assign a style to it. For example,
a <p>tag with header class would look like this:
<p class="header">This is the header</p>
You can define rules for classes just as easy as
for regular tags except classes always start with a period. Here's an example
of a class declaration.
.header { font-family: "ms sans serif"
font-size: 24pt; }
.content { font-family: "arial"
font-size: 12pt;
color: blue; }
This makes it easy to set up a CSS definition
that defines the style for the various elements in your page without having to
hard-code each one. It's easier, saves time, and makes for smaller HTML files.
CSS lets you add styles to your pages in several
ways. As we saw above, you can use the <STYLE>
tag to add your style declarations at the top of each individual page. This is
great when you only want to modify one page but a better solution is to put all
your style declarations in an external file and link to them from your Web
page. This way you can update your entire Web site by modifying just one
file. Using the first example we could create a style sheet file named
"styles.css":
P { font-family: "ms sans serif"
font-size: 12pt;
background-color: yellow; }
H1 { font-family: "impact"
font-size: 35pt;
color: blue; }
and link to it by inserting the following within
the <HEAD> of your Web page.
<HEAD>
<TITLE>Page Title</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">
</HEAD>
Finally, if you want to apply a style declaration to just a single HTML element, you can
do that too. Here's an example.
<font face="arial" style="background-color: yellow;
font-size: 16pt;">
Inline Style Declaration
</font>
<< Previous Beginners Article |
Next Beginners Article >>
Beginners Main Menu 1 to 7 |
Beginners Main Menu 8 to 14 |
Beginners Main Menu 15 to 21
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
