HTML and CSS Reference
In-Depth Information
<div> elements are used to group related elements
together into logical sections.
You can use descendant selectors to select elements
nested within other elements. For instance, the
descendant selector
div h2 {...}
selects all <h2>s nested in <div> elements (including
children, grandchildren, etc.).
Creating logical sections can help you identify the main
content areas, header, and footer of your page.
You can use <div> elements to group elements
together that need a common style.
You can use shortcuts for related properties. For
instance, padding-top, padding-right, padding-bottom,
and padding-left are all related to padding, and can be
specified with one shortcut rule, padding.
Use nested <div> elements to add further structure to
your files for clarity or styling. But don't add structure
unless you really need it.
Once you have grouped together sections of content
with <div> elements, you can style the <div>s just like
you would any other block element. For example, you
can add a border around a group of elements using
the border property on the <div> they are nested in.
Padding, margin, border, background, and font
properties can all be specified with shortcuts.
The <span> inline element is similar to the <div>
element: it is used to group together related inline
elements and text.
The width property sets the width of the content area
of an element.
Just like with <div>, you can add <span> elements to
classes (or give <span> elements unique ids) to style
them.
The total width of an element is the width of the
content area, plus the width of any padding, border,
and margins you add.
The <a> element is an example of an element with
different states. The main <a> element states are
unvisited, visited, and hover.
Once you set the width of an element, it no longer
expands to fit the entire width of the browser window.
You can style each of these states separately with
pseudo-classes. The pseudo-classes used most often
with the <a> element are :link, for unvisited links;
:visited, for visited links; and :hover, for the hover state.
Text-align is a property for block elements that aligns
all inline content in the block element, to the center, left
or right. It is inherited by any nested block elements.
Pseudo-classes can be used with other elements too,
not just <a>.
Additional pseudo-classes are the :hover, :active,
:focus, :first-child, and last-child pseudo-classes,
among others.
H
T
M
Lc
r
os
s
o
n
V
a
ca
t
io
n
S
in
ce y
ou
've
got
a S
upe
r B
rai
n P
ow
er t
o w
ork
on
, w
e
gav
e th
e H
TM
Lc
ros
s a
vac
ati
on
in t
his
cha
pte
r. D
on
't
wor
r y
; he
'll b
e b
ack
in
the
ne
xt o
ne
.
