Home
HTML and CSS
Tutorials
Style Sheets Introduction
Level: Beginner Software:
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.
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com