Advanced CSS

As we learned in the last advanced article, CSS or Cascading Style Sheets, can be used with XML to allow XML documents to be displayed in a Web browser. But how do you actually create a style sheet?

There are three parts of a style sheet:

• selector
  the element or class and id title to which the style will be applied
• property
  the information on how to format the selector
• value
  the actual style to be applied to the property on the selector

For example, if you want all of your paragraphs to be the same font, you would use the following CSS:

p {
  font-family : arial;
}

• p
  the selector. All text within the <p></p> tags is impacted by this style
• font-family
  the property. All text will have the font-family changed
• arial
  the value. The font-family will be "Arial"

As you can see above, the format of a style declaration is:

selector {
  property : value ;
  property2 : value ;
}

Group your styles for each selector together in curly braces

{}

Then separate the property from the value with a colon

:

Finally, end each style statement with a semi-colon

;

(Note: the semi-colon is only required to separate multiple styles, but it's a good idea to include it at all times. Then you can always add more styles.)

Your selector is usually an HTML tag, but you can also create IDs and classes. These types of selectors are used when you aren't sure what you're going to use the style on. For example, you may want a style class of "highlight" that changes the background color to yellow. It wouldn't matter what tag was highlighted. Here's how:

.highlight {
  background-color : #ffff00;
}

Then to use that style, set the class in your HTML tags:

<h2 class="highlight">This headline is highlighted</h2>

Or you can simply use the

<span class="highlight"></span>

tag to define the exact text to be highlighted.

The following page of this article explains some of the more common properties and the values you can use with them.

Next page > Specific CSS properties and their uses > Page 1, 2, 3