CSS Tips & Tricks (2)
Styling <pre>
The CSS stylesheet for the following code is the code itself:
pre{
background: url(cssimages/pre_bgd.gif) repeat-y left top;
padding: 0px 20px;
margin:1em 0;
width: 500px;
}
The following is the background image used in this rule:
Styling <blockquote>
The following block of text is contained inside the blockquote element:
The final value of a property is the result of a four-step calculation: the value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value").
The HTML looks like:
<blockquote><p>The final value ...</p></blockquote>
The stylesheet looks like:
blockquote{
background: url(cssimages/quote.gif) no-repeat left top;
padding: 0 8%;
margin:1em 0;
width: 83%;
text-align: justify;
}
The quote.gif image we used here is the following:
More examples of styling blockquote
Example of having the quotation mark image on both top left and bottom right corners:
The final value of a property is the result of a four-step calculation: the value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value").
The HTML for this example looks like:
<blockquote class="double_quote"><span>The final ...</span></blockquote>
The CSS stylesheet for this example:
blockquote.double_quote {
padding: 0;
background: #ffc url(cssimages/quote.gif) no-repeat left top;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 1em 0;
width: 90%;
}
blockquote.double_quote span {
display: block;
background: url(cssimages/quote_close.gif) no-repeat bottom right;
padding: 15px 50px;
}
The next example is similar to the first example, only changes the image used as quotation mark to the images of curly brackets. Also modifies the padding for span to 30px.
The final value of a property is the result of a four-step calculation: the value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value").
The following is the stylesheet for this example:
blockquote.code_quote {
padding: 0;
background: #ffc url(cssimages/curly_open.gif) no-repeat left top;
margin: 1em 0;
width: 90%;
}
blockquote.code_quote span {
display: block;
background: url(cssimages/curly_close.gif) no-repeat bottom right;
padding: 15px 30px;
}
Some important comments on quotes
Don't forget to specify the cite attribute:
<blockquote cite="SOURCE OF THE QUOTE"></blockquote>
You can also use the blockcode element for quoting of a block of code.
Styling Links
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.
REMEMBER: pseudo-elements and pseudo-classes are part of CSS standard, not part of HTML standard.
The syntax of pseudo-classes:
selector:pseudo-class {property: value}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property: value}
Be careful about using the above syntax though, there shouldn't be any space between the class and pseudo-class. Also use a instead of a:link, because IE has some problems with it.
Exercise files: exer2.zip
Anchor Pseudo-classes
A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. a:active MUST come after a:hover in the CSS definition in order to be effective. Pseudo-class names are not case-sensitive.
Example of styling links
The HTML for the link:
<a class="link_style1" href="#Link_Example">Click me</a>
Stylesheet for the 1st link:
a.link_style1 {
text-decoration: none;
color: #CC3300;
border-bottom: dotted 1px #CC3300;
}
a.link_style1:visited {
}
a.link_style1:hover {
background: #333;
}
a.link_style1:active {
color: #0000FF;
}
Stylesheet for the 2nd link:
a.link_style2 {
font-size: 0.7em;
display: block;
padding: 3px;
width: 420px;
color: #AAAAAA;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.link_style2:visited {
}
a.link_style2:hover {
color: #00ACF4;
width: 420px;
background: #F8F8F8 url(cssimages/arrow_right.jpg) 98% 50% no-repeat;
}
a.link_style2:active {
color: #c30;
}
Stylesheet for the 3rd link:
a.link_style3 {
font-size: 0.7em;
display: block;
padding: 3px;
width: 200px;
color: #CC3399;
}
#middle a.link_style3:visited {
}
#middle a.link_style3:hover {
color: #00ACF4;
width: 420px;
border: 4px outset #f3c;
}
#middle a.link_style3:active {
color: #c30;
font-size: 2em;
width: 200px;
}
Styling Table
Click here to take a look at the original design of this table. Take a look at the following table:
| Configurations | Dual 1.8GHz | Dual 2GHz | Dual 2.5GHz |
|---|---|---|---|
| Model | M9454LL/A | M9455LL/A | M9457LL/A |
| G5 Processor | Dual 1.8GHz PowerPC G5 | Dual 2GHz PowerPC G5 | Dual 2.5GHz PowerPC G5 |
| Frontside bus | 900MHz per processor | 1GHz per processor | 1.25GHz per processor |
| Level2 Cache | 512K per processor | 512K per processor | 512K per processor |
Now let's take a look at the HTML first:
<table id="mytable">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th class="nobg">Configurations</th>
<th>Dual 1.8GHz</th>
<th>Dual 2GHz</th>
<th>Dual 2.5GHz</th>
</tr>
<tr>
<th class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>
<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th class="spec">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<th class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>
</table>
Now let's take a look at the CSS stylesheet used for this table:
#mytable {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
width: 600px;
border-collapse:collapse;
}
#mytable caption {
padding: 0 0 5px 0;
width: 600px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
#mytable th {
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 6px 6px 12px;
background: #CAE8EA;
}
#mytable th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
#mytable td.alt {
background: #F5FAFA;
color: #797268;
}
#mytable th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
}
#mytable th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
color: #797268;
}
The actual code is much longer, I tried to get rid of the images and improved the stylesheet little bit. But we can do even better! We can use much simpler code to implment the similar effect:
| Configurations | Dual 1.8GHz | Dual 2GHz | Dual 2.5GHz |
|---|---|---|---|
| Model | M9454LL/A | M9455LL/A | M9457LL/A |
| G5 Processor | Dual 1.8GHz PowerPC G5 | Dual 2GHz PowerPC G5 | Dual 2.5GHz PowerPC G5 |
| Frontside bus | 900MHz per processor | 1GHz per processor | 1.25GHz per processor |
| Level2 Cache | 512K per processor | 512K per processor | 512K per processor |
The improved HTML for the table:
<table id="improved_table">
<caption>Table 1: Power Mac G5 tech specs </caption>
<thead>
<tr>
<th class="nobgd">Configurations</th>
<th>Dual 1.8GHz</th>
<th>Dual 2GHz</th>
<th>Dual 2.5GHz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Model</td>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<td>G5 Processor</td>
<td>Dual 1.8GHz PowerPC G5</td>
<td>Dual 2GHz PowerPC G5</td>
<td>Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<td>Frontside bus</td>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<td>Level2 Cache</td>
<td>512K per processor</td>
<td>512K per processor</td>
<td>512K per processor</td>
</tr>
<tbody>
</table>
The improved stylesheet for the table:
#improved_table {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
width: 600px;
border-collapse:collapse;
}
#improved_table caption {
padding: 0 0 5px 0;
text-align: right;
font-style: italic;
}
#improved_table th {
color: #4f6b72;
border: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 6px 6px 12px;
background: #CAE8EA;
}
#improved_table tr, #improved_table tr+tr+tr{
background: #FFF;
color: #4f6b72;
}
#improved_table tr+tr, #improved_table tr+tr+tr+tr {
background: #F5FAFA;
color: #797268;
}
#improved_table td {
border: 1px solid #C1DAD7;
padding: 6px 6px 6px 12px;
}
#improved_table tr th.nobgd {
background: #CCFFFF;
border: 0;
}
Yet, this might not work in some older browsers.
nth-child Method
The coloring odd and even numbered rows can be easily realized using the nth-child pseudo-class as following:
tr:nth-child(even) {background: COLOR VALUE1}
tr:nth-child(odd) {background: COLOR VALUE 2}
Yet the nth-child pseudo-class is supported by very few browsers. So, for now we don't recommend using nth-child method.
Favicon
A favicon (short for 'favorites icon'), also known as a website icon, a page icon or an urlicon, is an icon associated with a particular website or webpage.
Any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the ICO format, other browsers now also support the animated GIF and PNG image formats.
Use following syntax to link to your favicon:
<link rel="shortcut icon" href="URL OF THE ICON FILE" type="image/vnd.microsoft.icon"> <link rel="icon" href="URL OF THE ICON FILE" type="image/vnd.microsoft.icon">
The above syntax is for the case the format of the icon file you're using is .ico (ICO type). If you're using GIF image as favicon, set the type to image/gif; and if you're using PNG file, set the type to image/png.