Cascading Style Sheets  
  • Separates form from structure of a web page 
  • HTML was never suppose to control the form or appearance of a web page.
  • Saves time
  • Styles are easy to change
  • Computers are better at consistently applying the style
  • More control over text using styles
  • Can make a common style sheet for an entire website


  • Some browsers do not support them completely.
  • They are continually changing (W3C)
  • Different syntax from HTML


What are
Cascading Style Sheets?
CSS contain
  • formatting
  • layout


Basic Information
  • Style can be contained locally, internally, externally
  • Multiple styles can be applied to the same thing ("cascading")
  • Some styles are inherited

Where do
styles go?
Inline <p style="font-size: 10pt;"></p>
Embedded <head>
  <style type="text/css">
    //Rules go here
External <head>
  <link rel="stylesheet" type="text/css"



selector  { style definition}


more detail:

Selectors: list of one or more HTML tags (p, h1, table, etc) or a class (period followed by a name) separated by commas

Style definition - list of  property:value

  • multiple values separated with commas
  • property:value pairs separated with semi-colons 


Properties: descriptive aspect of the selector
Values: specific property instructions

HTML Selectors

h1 {font-size: 14pt; font-weight: bold; font-family: arial, sans-serif;

Automatically changes all instances of that tag:



Class Selectors

.reallygreen {font: 14pt/14pt arial; color:green;}

Can apply to multiple HTML tags

 <p class="reallygreen">Hello</p>


ID Selectors

#eup {font:26pt/26pt helvetica; color:red;}

Unique Identifier: used only once on a page

<span id="eup">Hello</span>


Property Controls
Fonts Letters, size, boldface, italic, double or single spacing
Text Kerning, leading, alignment, case, indents
Lists Bullets, indentations
Colors Borders, text, bullets, rules, backgrounds
Background Page or single element
Margins Margins, padding, borders, width, height


Property Example
Fonts font-family, font-style, font-weight
Text text-decoration, text-indent, line-height
Lists list-style-type, list-style-image
Colors  color
Background background-color
Margins  margin-top, margin-right, etc


Measuring: Pixels, Percentages, Ems, Points


Grouping HTML tags

H1, H2, H3 {color:red;}

Usage: two or more selectors with the same definition

Advantages: Saves time and repetition

Options: Can also use class and/or ID selectors

Nested HTML Tags

P B {background:pink;}

<p>paragraph of text</p>

<b>Bold, but not in a paragraph</b>

<p>Paragraph with <b>some bold</b> text.</b> </p>

(Can be very powerful when used with the body tag.)