HTML and CSS Reference
In-Depth Information
Selectors generally target an attribute value, such as an id or class value, or target the
type of element, such as <h1> or <p> .
Within CSS, selectors are followed with curly brackets, {} , which encompass the styles to
be applied to the selected element. The selector here is targeting all <p> elements.
1. p { ... }
Once an element is selected, a property determines the styles that will be applied to that ele-
ment. Property names fall after a selector, within the curly brackets, {} , and immediately
preceding a colon, : . There are numerous properties we can use, such as background ,
color , font-size , height , and width , and new properties are often added. In the
following code, we are defining the color and font-size properties to be applied to
all <p> elements.
1. p {
2. color : ...;
3. font-size : ...;
4. }
So far we've selected an element with a selector and determined what style we'd like to
apply with a property. Now we can determine the behavior of that property with a value .
Values can be identified as the text between the colon, : , and semicolon, ; . Here we are
selecting all <p> elements and setting the value of the color property to be orange and
the value of the font-size property to be 16 pixels.
1. p {
2. color: orange ;
3. font-size: 16px ;
4. }
To review, in CSS our rule set begins with the selector, which is immediately followed by
curly brackets. Within these curly brackets are declarations consisting of property and value
pairs. Each declaration begins with a property, which is followed by a colon, the property
value, and finally a semicolon.
It is a common practice to indent property and value pairs within the curly brackets. As
with HTML, these indentations help keep our code organized and legible.
All of these common CSS terms combine in this manner (see Figure 1.5 ) .
Search WWH ::

Custom Search