Styling Generated Content in CSS3
Marking and Numbering Sections with CSS3 – Part 5
Forward: Hey, you can give styles to generated content. That is what we learn in this tutorial.
By: Chrysanthus Date Published: 3 Aug 2012
Introduction
Giving styles to generated content is simple. Just go to the :before or the :after pseudo element declaration block and type the properties and values for the styles you want. However, before we look at an example on that, let us first see how to set the numeration for a counter; the default is decimal (1, 2, 3, 4. etc.). It can be roman numeration or even alphabet.
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
Setting the Numeration for the Counter
The value to the property, list-style-type for a list can be, “decimal”, or “lower-roman” or “upper-roman” or “lower-alpha” or “upper-alpha” or something else.
decimal
With this value you have, 1, 2, 3, 4, 5, etc.
lower-roman
With this value you have, i, ii, iii, iv, v, etc.
upper-roman
With this value you have, I, II, III, IV, V, etc.
lower-alpha
With this value you have, a, b, c, d, e, etc.
upper-alpha
With this value you have, A, B, C, D, E, etc.
Now, the full syntax for the counter function is actually,
counter(name, list-style-type-value)
So you can have something like:
counter(section, lower-alpha)
Read and try the following code, which numbers sections with lower-alpha:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
body {counter-reset:section}
h3.section:before
{
counter-increment:section;
content:"Section 3"counter(section, lower-alpha)" - ";
}
</style>
</head>
<body>
<section>
<h3 class="section">First Heading</h3>
<p class="test">Section 1 paragraph.</p>
<p class="test">Section 1 paragraph</p>
</section>
<section>
<h3 class="section">Second Heading</h3>
<p class="test">Section 2 paragraph.</p>
<p class="test">Section 2 paragraph</p>
</section>
<section>
<h3 class="section">Third Heading</h3>
<p class="test">Section 3 paragraph.</p>
<p class="test">Section 3 paragraph</p>
</section>
</body>
</html>
Giving styles to generated content is simple. Just go to the :before or the :after pseudo element declaration block and type the properties and values for the styles you want. Read and try the following code sample:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<style type="text/css">
body {counter-reset:section}
h3.section:before
{
background-color:bisque;
color:blue;
counter-increment:section;
content:"Section 3"counter(section, lower-alpha)" - ";
}
</style>
</head>
<body>
<section>
<h3 class="section">First Heading</h3>
<p class="test">Section 1 paragraph.</p>
<p class="test">Section 1 paragraph</p>
</section>
<section>
<h3 class="section">Second Heading</h3>
<p class="test">Section 2 paragraph.</p>
<p class="test">Section 2 paragraph</p>
</section>
<section>
<h3 class="section">Third Heading</h3>
<p class="test">Section 3 paragraph.</p>
<p class="test">Section 3 paragraph</p>
</section>
</body>
</html>
Conclusion
Wow, it has been a long ride, for the whole series. Generated content needs the :before or :after pseudo element. If it would involve counting, then it would need the counter-reset, counter-increment and content properties. The value of the content function is a string code that has a counter function call. If you do not like the default styles of the generated content, you can set new ones; just type the properties and values for the new styles you want in the declaration block of the pseudo element for the generated content. In numbering, the whole numbers and numbers after the decimal point are determined independently. The decimal point itself is a character that is printed; it is not the result of some calculation.
That is it. I hope you appreciated the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course