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 
  • More property:value information

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