CSS Tips and Tricks
With CSS1-2 stylesheets, font-family attributes that contain spaces are best delimited using single quotes.
Example:
font-family: 'trebuchet ms', verdana, helvetica, sans-serif ;
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
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>
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>
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=""> </a><span class="invisible">|</span><a href=""></a>
where your CSS contains the following class:
example:
.invisible { visibility: hidden ; }
Your CSS attributes hide the separating character from view.
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">
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
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.
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