CSS Tips and Tricks
With CSS1-2 style sheets, font-family attributes that contain spaces are best delimited
using single quotes.
Example:
font-family: 'trebuchet ms', verdana, helvetica, sans-serif ;
top of page
How to remove bullets and indentation from bulleted lists:
Example:
<style type="text/css">
ul li {list-style-type:none; padding: 0; margin: 0; }
</style>
- list item 1
- list item 2
- list item 3
top of page
How to add different colors to hyperlinks:
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Example:
<style type="text/css">
a:link {color: #f00}
a:visited {color: #0f0}
a:visited:hover {color:#fff}
a:hover {color: #f0f}
a:active {color: #00f}
</style>
top of page
How to center a web page with CSS:
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Page Title</title>
<style type="text/css">
div#main {
width: 800px ;
margin: auto ;
text-align: left ;
}
body {
font: 100% arial, sans-serif ;
color: #fff ;
background: navy ;
text-align:center;
}
</style>
</head>
<body>
<div id="main">
Page content goes here.
</div>
</body>
</html>
top of page
How to center text with CSS styling:
div.text { text-align: center; }
top of page
How to center an entire block with CSS styling:
div.text { margin-left: auto; margin-right: auto; }
top of page
How to separate adjacent links with more than white space:
To comply with W3C's Web Content Accessibility Guidelines, Priority 3 WAI's checkpoint 10.5.
Add a separating character; in this case, the horizontal bar "|"; between the adjacent
links and incorporate the HTML and CSS below:
Example:
<a href="">my first link</a> <span class="invisible">|</span> <a href="">my second
link</a>
where your CSS contains the following class:
Example:
.invisible { visibility: hidden ; }
Your CSS attributes hide the separating character from view.
top of page
When your pages scroll too much...
Incorporate a generic anchor name at the top and bottom of your pages; names like
"pagetop" and "pagebottom" will work. Later on, when modifying a page and it appears
to be getting too long, simply add an anchor reference to either the top or bottom
bookmarks that you defined previously.
Example:
<a name="pagetop"></a> .
.
.
<a href="#pagetop">top of page</a>
top of page
Removing the default marker that appear to the left of lists is useful when you wish
to use lists purely for semantic reasons or to fully customize visually. The below
CSS removes both the marker and changes the indentation of the list so it's inline
with normal content. The combination of "padding: 0" and "margin-left: 0" ensures
the indentation is consistent across browsers.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Page Title</title>
<style type="text/css">
ul {
list-style-type: none ;
margin-left: 0 ;
padding: 0 ;
}
</style>
</head>
<body>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
Results:
- List item 1
- List item 2
- List item 3
top of page
How to include a footer on a web page's printed output.
Name a class or id and include it in your web page's footer area:
<div class="myfooter">. . .</div>
Then, define that class or id with this CSS code:
.myfooter { display: block; position: fixed; bottom: 0; }
Note: in Internet Explorer, the footer is inserted on the last page. In Firefox, the
footer is displayed on every page.
top of page
How to include hyperlinked URLs with your web page's printed output.
Name a class or id and include it in your web page's body area:
<div class="mainbody">. . .</div>
or
<body class="mainbody">. . .</body>
Then, define that class or id with this CSS code:
.mainbody a:after {
content:" ["attr(href)"]"
color:#666; font-family: arial, Helvetica, sans-serif;
}
.mainbody a[href^="/"]:after {
content: "";
}
Note: This does not work in Internet Explorer. This does work in Firefox and Opera.
|
Facebook 
YouTube 
Twitter