HTML and CSS Reference
In-Depth Information
Within CSS, classes are denoted by a leading period,
.
, followed by the
class
attribute
value. Here the class selector will select any element containing the
class
attribute value
of
awesome
, including both division and paragraph elements.
CSS
1.
.awesome
{ ... }
HTML
1.
<div
class="awesome"
>...</div>
2.
<p
class="awesome"
>...</p>
ID Selectors
ID
selectors are even more precise than class selectors, as they target only one unique ele-
ment at a time. Just as class selectors use an element's
class
attribute value as the select-
or, ID selectors use an element's
id
attribute value as a selector.
Regardless of which type of element they appear on,
id
attribute values can only be used
once per page. If used they should be reserved for significant elements.
Within CSS, ID selectors are denoted by a leading hash sign,
#
, followed by the
id
at-
tribute value. Here the ID selector will only select the element containing the
id
attribute
value of
shayhowe
.
CSS
1.
#shayhowe
{ ... }
HTML
1.
<div
id="shayhowe"
>...</div>
Additional Selectors
Selectors are extremely powerful, and the selectors outlined here are the most common
selectors we'll come across. These selectors are also only the beginning. Many more ad-
vanced selectors exist and are readily available. When you feel comfortable with these se-
lectors, don't be afraid to look into some of the more advanced selectors.
All right, everything is starting to come together. We add elements to a page inside our
HTML, and we can then select those elements and apply styles to them using CSS. Now
Search WWH ::
Custom Search