In a previous article I wrote about what Cascading Style Sheets (CSS) are, and a quick sample of how to use them. In this article, I'll explain the syntax of style sheets and some of the more commonly used styles.
As I said before, there are three places you can store style information. The syntax is the same for all three, but for clarity, I am only going to discuss styles placed in the <head> of a document.
The Rules
- All style information should be stored within the <style> and
</style> element.
This is how the browsers know that the information is for styles.
- Always include a type attribute.
This attribute indicates what types of style rules you will be using. The most common type of style rule is CSS, but there are other types (XSL, JSS, and others).
- Enclose all style rules in comment tags.
This ensures that older browsers will not display the style rules by mistake.
Style rules are comprised of two things, the selector and the declaration.
- selector - The HTML element that will be affected by the rule
- declaration - The specific style calls that will affect the selector
The complete syntax for a style rule is:selector { property : value; }
So, to set all bold text to be the color red, you would write:
b { color: red; }
One of the things that makes CSS so easy to use, is that you can group together components that you would like to have the same style. For example, if you wanted all the H1, H2 and bold text red, you could write:
b {color: red;}
h1 {color: red;}
h2 {color: red;}
But with grouping, you put them all on the same line:
b, h1, h2 {color: red;}
You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial font, you would write:
h3 {
font-family: Arial;
color: blue;
}
By convention, we put separate rules on separate lines, but this is not required.
Common Styles
Different font attributes are the most commonly used style.
font-family - specifies the font face to be used
You can specify either specific fonts (e.g. Arial) or generic fonts (e.g.
sans-serif).
font-size - specifies the size of the text
You can specify a relative size (e.g. +1), absolute size (e.g. 4), the length, or
a percentage of the line height.
font-style - specifies whether the text will be displayed italic, oblique, or normal
font-variant - specifies whether the text will be displayed in small caps or normal
font-weight - specifies how light or dark (bold) the text will be
The other most commonly used style is text-decoration. With this tag you can remove the underline from links, put a line through marked out text, or make the text blink.
For example, to remove the underline from anchor text, use the style rule:
a { text-decoration: none;}
