At this point, this document assumes you are using FireFox with the Web Developer extension, or, are in a position to easily change the CSS file of this document and reloading it in your browser to watch the results.
In this section, we'll be doing some experiments on this file, not the small file we wrote above.
DocBook provides for, at least, the following ways to draw special attention to a message:
![[Note]](note.png) | Note |
|---|---|
This is a <note>. | |
![[Warning]](warning.png) | Warning |
|---|---|
This is a <warning>! | |
![[Caution]](caution.png) | Caution |
|---|---|
This is a <caution>! | |
Note the cool little icons. On most DocBook installations you'll find some sample icons, as shown above, that you need to copy to a place where your browser can find them. Feel free to use different icons though, these are pretty boring.
Time for some CSS, we may want to make these warnings somewhat more special. Open the CSS file that belongs to this page (in FireFox, right-click on this page, select Web Developer, select CSS, select Edit CSS). Now add the following:
.caution, .warning {
border: 1px solid #f00;
}
This adds a bright red border around <caution> and <warning> messages. You may have been wondering what “Cascading” means in Cascading Style Sheets, well, here goes. Below the stanza above, add:
.caution {
font-size: 1.2em;
}
Now we've specialised the appearance of the <caution> message from the general stanza above that also specified the <warning> layout. The result is that the Caution text is now bigger by 20%.
This is really a matter of taste. Many sites these days feel the need to make their links stand out a bit more, for example by giving them a dotted underline and making them invert on hover. Well, if you want this, you can do it. Paste the following into the CSS:
a {
text-decoration: none;
border-bottom: 1px dotted #000;
}
a:hover {
background-color: #777;
color: #fff;
}
This first removes the traditional underline by setting text-decoration to none, followed by specifying a dotted black bottom-border.
Additionally, the a-element is configured to have a different back- and foreground when the cursor hovers over it. To test, here is a fine url to hover over. To pimp up your page further, briefly consider text-decoration: blink.