Cascading Style Sheets

1
Cascading Style Sheets

• COSC 415
• Web Site Essentials
• P. Somerset Spring 2008

2
Some vocabulary

• Cascading
• Different style sheets are thought of coming in a
  series
• A single document may have several style sheets
• Browser (3)
• Designer (1)
• User (2)

3
Two Types of Style Sheets

• Internal
• These are set up within the ltheadgtlt/headgt
  portion of a web page
• External
• These are separate text files posted to your Web
  site and are linked to the pages on your site
  with a URL

4
Some more vocabulary

• Anatomy of a Rule
• Selector
• h1 is a selector, p is another selector
• Declaration
• Property
• color is a property, background is another
• Value
• red is a value and e62b86 is another

5
Syntax of a Rule

• H1 color green

Selector Property Value
6
A Sample Rule

• The selector
• A curly bracket
• The property
• A colon
• A value
• A semi-colon (for multiple declarations)
• A closing curly bracket

h1

color

red


7
Using multiple declarations
body background-color silver
font-color green
8
An Internal Style Sheet

• Add some extra code within the ltheadgtlt/headgt
  portion of the page.
• It will only affect that one page.
• ltstyle typetext/cssgt
• lt!- -
• background-color silver
• -- gt
• lt/stylegt

9
Create an External Style Sheet

• Use Notepad
• Save the file with a .css extension.
• Make sure it is posted to your Website.
• During testing, make sure it is on the same disk
  as your .html file.

10
Design Your Own Styles

• Declare a rule for subsets of text.
• Saved as myStyles.css
• titles
• font-family verdana,arial,helvetica
• font-size11pt
• color blue
• font-weight bold

11
Attaching the Style Sheet to a Page
Link an external style sheet with the following
code in the ltheadgtlt/headgt section of your web
page ltlink relstylesheet typetext/css
hrefbase.css /gt
Note The word base is replaced with the file
name of your style sheet.
12
Employing A Simple External CSS
lthtmlgt ltheadgt lttitlegtSample External Style
Sheetlt/titlegt ltlink rel"stylesheet"
type"text/css" hrefmyStyles.css"
/gt lt/headgt ltbodygt ltspan idtitlesgtHello out
there!lt/spangt lt/bodygt lt/htmlgt
13
Web Resources for Properties
http//www.w3schools.com http//www.cookwood.com B
areBones Guide to HTML
14
Some Common Properties

• font-size
• p font-size 20px
• h1 (or h2 or h3 etc.)
• h1color red h2color blue
• h1 (and h2 and h3 etc.)
• h1, h2, h3 font-style italic
• background-color
• background-color slateblue
• border-color
• border-color yellow

15
Pros and Cons

• Cons
• Seemingly extra work
• Pros
• Consistent styles throughout site
• Extremely flexible
• Ports to other sites readily
• Use for UB Site