Learn CSS, part 1 - CSS rules and selectors
(Page 5 of 7 )
As we said before, CSS is a styling language for Web pages. This means that CSS styles mark up elements such as <p>, <h1>, <a> and pretty much all the other elements. In CSS we call the element that we want to style a selector, like the paragraph selector from the above example.
p
{
font-family: Arial, sans-serif;
color: red;
}
We select each and every <p> element in the HTML page to have an Arial font with a red color. The term selector makes sense because you select which part of the page (which element or which elements as we will see shortly) will receive the application of specific styles. So the selector p refers to the HTML element <p>, and so on. You define the actual styling using CSS properties, such as the font-family and color properties. There are many properties in CSS, and we are going to take a look at most (if not all) of them. To set a value to a given property, you write the property followed by a colon, then the value, which must be followed by a semicolon, as shown with the font-family property below:
font-family: Arial, sans-serif;
This combination of property, colon, value and semicolon is called a CSS declaration. The combination of the selector (the p) and the declaration is called a CSS rule, which begins with a selector (or a group of selectors as we will discuss shortly), then an opening curly brace "{" followed by as many CSS declarations as you want, followed by a closing curly brace "}". CSS documents consist of CSS rules, which define what styling properties go with what selectors. We will discuss selectors in detail after a few articles in this series, but for now you need to understand that selectors are not just <p>, <a>, <body> and other HTML elements. You can define your own selectors and apply them using the id or class attributes.
Next: Groups of Selectors >>
More Style Sheets Articles
More By Michael Youssef
