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

 

disadvantages
  • 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
Example:

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

 

syntax

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

selectors
HTML Selectors

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

Automatically changes all instances of that tag:

<h1>Hello</h1>

 

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
categories
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
examples
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
background-image
background-repeat
Margins  margin-top, margin-right, etc

 

Measuring: Pixels, Percentages, Ems, Points

 

Grouping
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

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