HTML and CSS Reference
In-Depth Information
Text Align
Aligning text is an important part of building a rhythm and flow on a page; we do this using
the
text-align
property. The
text-align
property has five values:
left
,
right
,
center
,
justify
, and
inherit
. All of these values are fairly straightforward; as ex-
pected, they align text to the left, right, or center, or they justify text.
The following CSS sets all paragraph text to be center aligned:
1.
p {
2.
text-align: center;
3.
}
The
text-align
property, however, should not be confused with the
float
property.
The
text-align
values
left
and
right
will align text within an element to the left
or right, whereas the
float
values
left
and
right
will move the entire element. So-
metimes the
text-align
property will give us the desired outcome, and other times we
may need to use the
float
property.
Text Decoration
The
text-decoration
property provides a handful of ways to spruce up text. It accepts
the keyword values of
none
,
underline
,
overline
,
line-through
, and
inher-
it
. Use of the
text-decoration
property varies, but the most popular use is to under-
line links, which is a default browser style.
Here the CSS styles any element with the class of
note
with a
text-decoration
of
underline
:
1.
.note {
2.
text-decoration: underline;
3.
}
Multiple
text-decoration
values may be applied to an element at once by space-sep-
arating each keyword within the value.
Text Indent
The
text-indent
property can be used to indent the first line of text within an element,
as is commonly seen in printed publications. All common length values are available for
this property, including pixels, points, percentages, and so on. Positive values will indent
text inward, while negative values will indent text outward.
Search WWH ::
Custom Search