Style Sheets: Introduction (Part 1)
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.
Style Sheets: Introduction Part 1 |
Style Sheets: Introduction Part 2
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
