Understand CSS Terminology

One reason CSS confuse people who have been learning HTML is that many of the terms are different. When they read about style sheets, it’s almost as if they are starting again from the ground floor. After getting used to elements, attributes, and values, it can be frustrating when the terminology shifts to selectors, properties, declarations, and rules. Actually, CSS terms need not be confusing as long as you learn to understand them in the context of HTML. Try understanding the basic CSS in the way described here.

• Selector Think element here. At its simplest, a selector is an element’s name. For example, say you want to choose a style for the <h4> element. Then you use the h4 selector. The only difference is that you don’t place the “less than” and “greater than” signs around it, like you would if it were a tag. Instead, <h4> is simply written as h4. As you’ll discover later in this chapter, there can be more to it than this, but this is a good starting point.

• Property Properties are essentially the same as attributes. Remember that with HTML, an attribute identifies a characteristic assigned to an element, such as width. In CSS, you have properties instead of attributes. These are also written differently. In HTML the width attribute is written with an equals sign (=) and quotation marks (" "), like this: width=" ". In CSS, the width property is written inside curly braces with a colon following it, like this: {width: }.

• Value This one’s easy. A value is the same in HTML and CSS. It is the specific characteristic assigned to an element or a selector. For example, 100 pixels can be a value assigned to an HTML attribute: width="100" or a CSS property: {width: 100px}.

• Declaration A declaration is a combination of at least one property and value. In other words, {width: 100px} is a declaration. You can include as many property/value combinations as you wish in a single style rule; however, keep in mind that if you have more than one property/value combination, you must separate them with semicolons (;). The semicolon tells the Web browser where one declaration ends and another begins. For example, if you want to specify purple text with a bold font for the same selector (element), you would separate the property/value combinations this way: {color:purple; font-weight: bold}.

• Rule A rule is the complete “sentence” combining a selector and declaration (properties and values). A complete declaration is enclosed in curly braces. For example, the following statement would be called a rule: h1 {color: purple; font-size: 24pt; margin-left: .5in;}. If you break down the preceding rule, h1 is the selector (for the level-one heading element); the properties are color, font-size, and margin-left; and the values are purple, 24pt, and .5in, respectively.