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 ;

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 Cascading Style Sheets

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://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 center text with CSS styling

div.text { text-align: center; }

How to center an entire block with CSS styling

div.text { margin-left: auto; margin-right: auto; }

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.

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>

Markerless and "no indent" Lists

from CSS Drive article "Markerless and "no indent" Lists"

from CSS Drive article "Markerless and "no indent" Lists". 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://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>

<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.