Professional Documents
Culture Documents
CSS Tips & Tricks
CSS Tips & Tricks
CSS Tips & Tricks
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;
}
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").
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").
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").
blockquote.code_quote span {
display: block;
background: url(cssimages/curly_close.gif) no-repeat bottom right;
padding: 15px 30px;
}
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.
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.
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.
Click me
Click me
Click me
}
a.link_style1:hover {
background: #333;
}
a.link_style1:active {
color: #0000FF;
}
}
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;
}
}
#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:
Table 1: Power Mac G5 tech specs
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 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:
Table 1: Power Mac G5 tech specs
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
#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 th.nobgd {
background: #CCFFFF;
border: 0;
}
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 (1616 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.
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.