Style Sheet Code

Linking to External Style Sheet

CSS are linked in the HEAD section.

<LINK rel=stylesheet type="text/css" 
href="http://personal.denison.edu/denison.css" title="Denison Styles">

Changing the Default Settings on a Page

Defaults for the page are changed within the STYLE tags in the HEAD section (use the comment tags for browsers without style sheet capability)

<STYLE type="text/css">
<!--
BODY {background-image: none;
      background-color: white;
      color: red }

H1 {color: blue}
 -->
</style>

Examples

No underline for links:

A {text-decoration: none}

Links can change on mouseover (color, thickness, font size, etc.)

A:hover {color: red}

A:hover {color: lime; border-width: thick}

A:hover {color: yellow;
         font-family: Shotgun BT, Comic Sans MS, Helvetica, Arial, default }

Redefine Headers

H1 { color: red;
     font-size: 72pt;
     font-family: Arial, Helvetica, sans-serif; }

H1 {font-family: Comic Sans MS, Arial;
    font-style: italic }

H1 {font-family: DiskusDmed, Shotgun BT, Tiffany Hv BT, Thunderbird BT, default;
    border-width: thick}

Paragraph format

P {color: yellow;
   font-style: italic;
   font-family: Helvetica, Comic Sans MS}

Different "bullets" for Lists

LI {LIST-STYLE: url(..\images\bullet.jpg)}

Creating a Style Class

Define the class in the STYLE section then refer to it later on in the page.

Examples

<STYLE>
<!--
.big {font-size: 20pt}
.centered {text-align: center}
-->
</style>

<BODY>
<P CLASS=big>
<P CLASS=centered>
</body>

Collection of styles i've used

BODY { background-image:none; background-color:white } 

a:hover {color: white}

.logotop {text-align: center;
          font-size: 12pt;
          background-color: red;
          color: white;
          margin-top: 36pt;
          margin-bottom: 0pt}

.logobody {text-align: center;
           font-size: 60pt;
           background-color: black;
           color: red;
           margin-top: 0pt;
           margin-bottom: 18pt}

.reverse {text-align: center;
          letter-spacing: 1.25em;
          background-color: black;
          color: white}

.big {text-align: right;
      font-size: 30pt;
      font-style: italic;
      margin-top: -48pt;
      color: blue}

.footer {text-align: center; font-size: 10pt; color: navy}

.menu {text-align: center; font-size: 8pt}

h3 {color: green;
    font-size: 12pt;
    font-family: Times New Roman, Times, sans-serif; }

p {font-size: 8 pt; font-family: Times New Roman, Times, sans-serif; }

.tablehead {font-size: 12pt;
            font-weight: bold;
            color: red;
            background: white;
            font-family: Times New Roman, Times, sans-serif}


<STYLE type="text/css">
<!--
A:active, A:link  {color: AQUA}
A:visited  {color: TEAL}

P {color: white; font-size: 12pt; font-weight: bold}
-->
</style>

Denison's Styles

BODY 	{background-image: url(http://www.denison.edu/images/cccc99.jpg)}

.nav 
    {font-size: small; 
    background-color: #CCCC99}

A:active, A:link
 	{font-weight: bold;
	text-decoration: none;
	color: #0033CC;}

A:visited
 	{font-weight: bold;
	text-decoration: none;
	color: #666633;}
	
H1, H2 
	{font-family: Georgia, Times-Roman, serif; 
	color: #0033CC}

H3, H4, TH, DT
	{font-family: Georgia, Times-Roman, serif; 
	color: #003300}


P, UL, TD, LI, DL, DD, OL, BLOCKQUOTE
	{font-family: Verdana, Arial, Helvetica, sans-serif; 
	color: #003300}

.sidemargins 
	{margin-right: 10%;
	margin-left: 10%}

.centered
	{text-align: center	}
	
.smalltext
	{font-size: small}

.redtext 
	{color: #cc0000;
    	font-weight: bold;
	font-size: small}

.footer 
	{text-align: center}