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
{ ... }
Properties
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.
}
Values
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