Style
In the XHTML page header we can specify the properties of page items using the stylesheet language CSS. The style is the set of properties. For example if we want to display all paragraphs (all texts between „<p>“ marks) using green color and italic letters, we can write:
p {
color: green;
font-style: italic;
}
And the paragraph will just look like this:
<p>This is a green and italic paragraph, just like any other paragraph on this page.</p>
But sometimes we do not want to make all paragraphs green, only selected ones. In such situation we will mark the selected paragraphs with some name, for example „forest_letters“. In style we specify that only „forest_letters“ styled paragraphs should be displayed using green color. (In the style name there can be no accented letters, spaces, etc.)
p.forest_letters {
color: green;
}
We will mark the selected paragraphs using the attribute „class“:
<p>This is a normal paragraph.</p> <p class="forest_letters">This is a green paragraph .</p> <p>Another normal paragraph.</p> <p class="forest_letters">Another green paragraph .</p>
We can also specify that all paragraphs should have some property, only the selected ones will have it different. For example all paragraphs will use italic font, only the „forest_letters“ paragraphs will have green color and normal font:
p {
font-style: italic;
}
p. forest_letters {
color: green;
font-style: normal;
}
An example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Colored paragraphs</title>
<style type="text/css">
p {
font-style: italic;
}
p. forest_letters {
color: green;
font-style: normal;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="forest_letters">This is a green paragraph.</p>
<p>Another normal paragraph.</p>
<p class="forest_letters">Another green paragraph.</p>
</body>
</html>
This is a normal paragraph.
This is a green paragraph.
Another normal paragraph.
Another green paragraph.
posted by Viliam Búr at 9:35 PM
0 Comments:
Post a Comment
<< Home