INLS102 Week9: Cascading style sheets Discussion on your designs

1
INLS102 Week9Cascading style sheetsDiscussion
on your designs

• Date 10/25/05
• Instructor Leo Cao

2
Todays Overview

• Learn Cascading Style Sheets
• Web design discussion

3
Cascading Style Sheet (CSS)

• Introduced by the W3C to counter a problem
• Page design was getting in the way of content
  design in webpages
• CSS is an attempt in separating the two
• Style pages can be applied across multiple pages
• CSS allows a great deal of customization by the
  web designer than ever before

4
Cascading Style Sheet basics

• Why is it called cascading?
• 1) Browser default
• 2) External Style Sheet
• 3) Internal Style Sheet (inside the ltheadgt tag)
• 4) Inline Style (inside HTML element)
• 4 gt 3 gt 2 gt 1
• ltstylegt tag inside html elements will overwrite
  the ltstylegt tag in the html headers, and both
  will overwrite the external stylesheet and
  browser defaults
• CSS demo http//www.w3schools.com/css/demo_default
  .htm

5
CSS basics contd

• 4). Inline Style (inside HTML element)
• ltp style"font-family verdana font-size 80
  color green"gtThis is a paragraph lt/pgt
• 3). Internal Style Sheet (inside the ltheadgt tag)
• ltheadgt
• ltstyle type"text/css"gt p font-size 100
  text-align center lt/stylegt
• lt/headgt
• 2). External Style Sheet
• ltheadgt
• ltlink rel"stylesheet" type"text/css
  href"mystyle.css /gt
• lt/headgt
• i.e., in mystyle.css ( p font-size 200 color
  blue )
• 1). Browser default

6
CSS syntax basics

• selector property value
• body color black
• p text-align center color red
• p
• text-align center
• color black
• font-family arial
• p font italic small-caps 900 12px arial
• h1,h2,h3,h4,h5,h6
• color green

7
Reference list for CSS

• Generally speaking (not absolute)
• selector html tag type
• property attribute type
• value value type
• CSS reference tag/list
• http//www.w3schools.com/css/css_reference.asp

8
CSS Customized class

• selector.classname property value
• Use it by ltselector classclassnamegtlt/selectorgt
• If you dont specify a selector, the class can be
  applied to any selector
• Examples
• Tag dependent classes
• p.right text-align right
• ltp class"right"gt This paragraph will be
  right-aligned. lt/pgt
• p.1 text-align center color green
• ltp class1gtthis is a new paragraphlt/pgt
• Tag independent
• .test text-align right color gold
• lth2 classtestgtgold to the rightlt/h2gt
• Only apply customized tags as as internal style
  tags, ltstylegt css syntax lt/stylegt

9
CSS notes

• Can be written in any editor, save as .css
• Use quotes when multiple words are involved,
  or when in doubt, just use it
• Use to separate multiple properties within a
  line
• p font-size 100 text-align center
• Dont leave spaces between alphanumerical values,
  12px, not 12 px.

10
Group CSS exercise

• Create an external style sheet, try out any 2
  selectors
• Save the file as mystyle.css
• Edit an html page, link to mystyle.css in the
  header, save it
• See if it works

11
CSS contd

• Copy and paste the code from mystyle.css inside
  your head tag, enclose in ltstylegt lt/stylegt
• This is the internal style sheet
• Try some inline style codes

12
Intermission
13
What makes a website good?
14
Group exercise

• Give feedback on each others website designs

15
For next week

• Website assignment due
• Optional, if youre interested in building a css
  menu, heres the instructions, http//www.projects
  even.com/tutorials/css/uberlinks/
• Alternatively, you could try copying the code off
  the course page and practice with it