WebDev - Web Developers

University of Memphis Photo
Web Developer Resources - CSS Tips and Tricks Related Topics:

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

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

Text Only | Print | Got a Question? Ask TOM | Contact Us | Memphis, TN 38152 | 901/678-2000 | Copyright 2013 University of Memphis | Important Notice | Last Updated: 
Information Technology Services | 100 Administration Bldg. | Phone: 901.678.8888 | Email: UMTech@memphis.edu
Last Updated: 3/23/14