- Create A Free Account
- Download High-Res Stock Images For Free
- +5 Million Images
Home
HTML and CSS
Tutorials
CSS Primer
Level: Beginner Software:
Although Netscape's and Microsoft's DHTML disagreements are causing the public-especially
developers-plenty of headaches, thankfully both companies implement Cascading
Style Sheets (CSS) similarly. Because CSS is the cornerstone of DHTML, we'd
be in a real mess if they weren't compatible. The real problems arise
from the fact that each browser uses different object models to link Web-page
objects and scripts together. Ideally, there would be just one way to talk
to the objects on a page. For that reason-not to mention the fact that CSS
is easier to learn than DHTML-CSS will be adopted at a much faster rate than
its interactive sibling.
Learning CSS is like learning HTML: It seems odd at first, but once you master the basics, it's just a matter of tuning your technique. If you don't know HTML, you need to learn it before tackling CSS. Just as DHTML depends on style sheets, so do style sheets depend on HTML.
The cascading in CSS derives its name from the way a style cascades down from the general to the specific. Think of parents passing on traits to their kids; though the kids can still control their own destiny. Elements (like paragraphs or footers) inherit properties from style sheets (parents), though you can customize or override them. We'll show you how to do this in this section, which is designed to help you learn to start building pages that use style sheets.
CSS 101
Let's start with some of the basics of working with CSS. A style is simply
a collection of display and positioning attributes that a Web author defines.
For example, a style could specify 24-point, bold, blue Arial with a 1-point
green border, hovering 50 pixels down from the top of the screen.
Every style gets a name, such as H1 or bibliography or ListBullets . If the style's name is the same as a valid HTML element (or tag), then the style is automatically applied to every instance of that element.
If you give a style a name that doesn't correspond to an HTML tag, you must apply the style manually wherever you want it to appear. You do this by modifying an existing tag in your document or creating a new one. For instance, to apply a bibliography style, you might modify a paragraph tag to read <P CLASS="bibliography">.
For the record, what we're calling styles in this article are technically rules , which consist of two parts: a selector and a declaration.
| .selector { declaration } |
The selector always precedes the curly braces and the declaration consists of everything between them. The selector will be used as a name later when you apply the style. The declaration is made up of a series of properties and their associated values, separated by semicolons.
| .puppy { size:dinky; annoying:usually; collar:black; fur-decoration:spotted; } |
Not all values work with all properties, though. For instance, in the example above, the property "size" can never take the value "brown," although "collar" could take the property "spotted." Print out a CSS properties chart for future reference.
The simplest way to use styles is to apply them to existing HTML tags. Start by declaring a style in your document, ideally, inside the <HEAD>
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com