by eturo
Text
Formatting and adding style to text is a key issue for any web designer.
In this lesson you will be introduced to the amazing opportunities CSS gives
you to add layout to text. The following properties will be described:
¤ Text indention
[text-indent]
The property text-indent
allows you to add an elegant touch to text paragraphs by applying an indent to
the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with
:
p {
text-indent: 30px;
}
¤ Text alignment
[text-align]
The CSS property text-align
corresponds to the attribute align used in old versions of HTML. Text can
either be aligned to the left,
to the right or centred. In addition to this, the
value justify will stretch each
line so that both the right and left margins are straight. You know this layout
from for example newspapers and magazines.
In the example
below the text in table headings is aligned to the right while the
table data are centred. In addition, normal text paragraphs are
justified:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
¤ Text decoration
[text-decoration]
The property text-decoration
makes it is possible to add different "decorations" or
"effects" to text. For example, you can underline the text, have a
line through or above the text, etc. In the following example,
are underlined headlines,
are headlines with a line above the text and
are headlines with a line though the text.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
¤ Letter space
[letter-spacing]
The spacing between
text characters can be specified using the property letter-spacing. The value
of the property is simply the desired width. For example, if you want a spacing
of 3px between the letters in a
text paragraph
and 6px
between letters in headlines
the code below could be used.
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
¤ Text transformation
[text-transform]
The text-transform
property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML
code.
An example could be
the word "headline" which can be presented to the user as
"HEADLINE" or "Headline". There are four possible values
for text-transform:
o capitalize
§ Capitalizes the
first letter of each word. For example: "john doe" will be "John
Doe".
o uppercase
§ Converts all
letters to uppercase. For example: "john doe" will be "JOHN
DOE".
o lowercase
§ Converts all
letters to lowercase. For example: "JOHN DOE" will be "john
doe".
o none
§ No transformations
- the text is presented as it appears in the HTML code.
As an example, we
will use a list of names. The names are all marked with
Try to take a look
at the HTML code for this example and you will see that the text actually is in
lowercase.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Links
You can apply
what you already learned in the previous lessons to links (i.e. change colors,
fonts, underline, etc). The new thing is that CSS allows you to define these
properties differently depending on whether the link is unvisited, visited,
active, or whether the cursor is on the link. This makes it possible to add
fancy and useful effects to your website. To control these affects you use
so-called pseudo-classes.
¤ What is a pseudo-class?
A pseudo-class allows you to take into
account different conditions or events when defining a property for an HTML
tag.
Let's look at an example. As you know,
links are specified in HTML with
a as a selector in CSS:
a { color: blue; }
A link can have different states. For
example, it can be visited or not visited. You can use pseudo-classes to assign
different styles to visited and unvisited links.
a:link{
color: blue; } a:visited{
color: red; }
o
Use
a:link and a:visited
for unvisited and visited links respectively.
o
Links that are active have the pseudo-class
a:active
and a:hover
is when the cursor is on the link.
We will now go through each of the
four pseudo-classes with examples and further explanation.
a. Pseudo-class: link
The pseudo-class
:link is used for links leading
to pages that the user has not visited. In the code example below, unvisited
links will be light blue.
a:link{
color: #6699CC; } b. Pseudo-class: visited
The pseudo-class
:visited is used for links
leading to pages that the user has visited. For example, the code below would
make all visited links dark purple:
a:visited{
color: #660099; } c. Pseudo-class: active
The pseudo-class
:active is used for links that
are active. This example gives active links a yellow background color:
a:active{
background-color: #FFFF00; }
d. Pseudo-class: hover
The pseudo-class
:hover is used when the mouse
pointer hovers over a link. This can be used to create interesting effects. For
example, if we want our links to be orange and be italicized when the cursor is
pointed at them, our CSS should look like this:
a:hover{
color: orange; font-style: italic; }
Effect when the cursor is over a link
It is particular popular to create different
effects when the cursor is over a link. We will therefore look at a few extra
examples related to the pseudo-class
:hover.Example 1a: Spacing between letters
The spacing
between letters can be adjusted using the property
letter-spacing. This can be
applied to links for a special effect:
a:hover{
letter-spacing: 10px; font-weight:bold; color:red; }Example 1b: UPPERCASE and lowercase
As we looked at the property
text-transform,
which can switch between upper- and lowercase letters. This can also be used to
create an effect for links:
a:hover{
text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
Example 2: Remove underline of links
You should consider carefully whether
it is necessary to remove the underlining as it might decrease usability of
your website significantly. People are used to blue underlined links on
web pages and know that they can click on them. If you change the underlining
and color of links there is a good chance that users will get confused and therefore
not get the full benefit of the content on your website.
That said, it is very simple to remove the
underlining of links. The property
text-decoration
can be used to determine whether text is underlined or not. To remove
underlining, simply set the value of text-decoration
to none.
a {text-decoration:none;
}
Alternatively, you can set
text-decoration along with other
properties for all four pseudo-classes.
a:link { color: blue;text-decoration:none;
} a:visited { color: purple;text-decoration:none;
} a:active { background-color: yellow;text-decoration:none;
} a:hover { color:red;text-decoration:none;
}
