Jessett.com home  

css

getting started
css style properties
browser support
css classes
borders
link styles
images as bullet points
first letter/line pseudo element
custom scroll bars
css and dreamweaver

home > css

cascading style sheets

A css (cascading style sheet) file controls the color, size, style, font, borders, padding etc of HTML elements. It can be:

  • applied to a html tag (inline style sheets)
  • embedded in the <head> of a document or
  • an external file.

An external css style sheet can be over-ridden by an embedded style sheet, this can be over-ridden by an inline style sheet.

applied to a html tag (inline styles)

To apply style attributes to a html tag as an inline style you simply change from using:

<p><font face="Verdana, Arial, Helvetica, sans-serif" size="12pt">text</font></p>

to

<p style font-family: verdana, arial, helvetica, sans-serif; size: 12pt;>text</p>

embedded in the <head> tag

To use embedded style sheets you simply add the style sheet attributes to the style in the <head> tag like this:

<head>
<style type="text/css">
<!--
p {
font-family: verdana, arial , helvetica, sans-serif;
size: 12pt;
}
-->
</style>
</head>

Embedded style sheets are useful if you want to include specific attributes to that particular page in addition to, or instead of, a linked style sheet.

external style sheets

An external style sheet is simply a text file, saved as filename.css - see the example below. These are most often used as they seperate content from style and mean that only one file has to be edited to change the style of a whole web site. This means that the appearance of a web site can be changed without any change to the actual content. You do not need to include the type="text/css" or the <!-- --> comment tags.

This is linked to in every page that requires those style elements to be attributed to certain html tags.

Add the following html between your <head> tags:

<head>
<link rel="stylesheet" type="text/css" href="/styles/main.css">

</head>

The "/styles/main.css" part is the style sheet file and location from the root of your site.

style sheets

  • Give us the ability to create much more sophisticated design with regard typography and element positioning
  • Increase accessiblity, so that sites are viewable to as many users as possible, regardless of platform, browser, computer or any disability they might have
  • Usually located in a separate file, containing the formatting for most html elements
    • Cleans up the html of every page
      • Speeds up download time
      • Makes page editing/updating an easier task

The following is an example of a simple stylesheet:

UL {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
}
Bullet points
TD {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
}
Table cells
P {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
}
Paragraph
OL {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
}
Numbered lists
H6 {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
text-align : left;
}
Heading 6 (smallest)
H5 {
font-size : 11pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
}
Heading 5
H4 {
font-size : 12pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
}
Heading 4
H3 {
font-size : 14pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
}
Heading 3
H2.subtitle {
font-style : italic;
font-size : 15pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
margin-left : 0;
border-bottom : 1 solid #FFCCCC;
border-left : 1 solid #FFCCCC;
}
Class of Heading 2
H2 {
font-size : 16pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
}
Heading 2
H1 {
font-size : 18pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
margin-top : 0.75em;
margin-left : 0;
padding-left : 0;
}
Heading 1 (biggest)

.right {
text-align : right;
}

class attribute to align text to the right