Cascading Style Sheet Basics

1
Cascading Style Sheet Basics

• Pepper

2
Looking at the HTML

• See the ltgt surrounding tags
• See head, body, paragraph, header
• See the ending tagslt/gt
• See the list ltulgt lt/ulgt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML
  4.01//EN"gt
• lthtmlgt
• ltheadgt
• lttitlegtA page with no Styleslt/titlegt
• lt/headgt
• ltbodygt
• lt!-- Main content --gt
• lth1gtA page with no styleslt/h1gt
• ltpgtWelcome to my page with no Styles, only HTML
  coding.
• ltpgtI know the links go nowhere, but I will soon
  put those links into a nice table. They would go
  somewhere if they pointed to pages that existed.
• ltpgtThis page is just a normal page.
• lt!-- Sign and date the page, it's only polite!
  --gt
• ltaddressgtMade ltbrgt
• 6/2007lt/addressgt

3
Simple Style inside an HTML tag

• Inside the ltgt, put a style something
• Change from
• lth1gtA page with no styleslt/h1gt
• TO
• lth1 style"colorbluetext-aligncenter"gtA page
  with no styleslt/h1gt
• Pairs of Property name choice
• List of properties http//www.w3schools.com/cssre
  f/default.asp

4
Navigation Bar Styling

• Goal set the physical location (ems over from
  the left) of the body of the page, and set the
  physical location (ems over from the left) of
  the navigation words.
• To set the list of navigation links to always
  start in the upper left
• ltul style " position absolute
• top 2em
• left 1em
• width 9em"gt
• To pad 11 ems over from the left, set your body
  to
• padding-left 11em
• ltbody style padding-left 11 emgt

5
Move your style up to the header

• Same style can move up to the header as an
  internal style sheet
• For UL, we will want some lists on our page not
  to be in the upper left, so make it a type of UL
  with ul.navbar
• ltheadgt
• ltstyle type"text/css"gt
• body padding-left 11em
• ul.navbar
• list-style-type none
• padding 0
• margin 0
• position absolute
• top 2em
• left 1em
• width 9em
• lt/stylegt
• lt/headgt
• For UL, to get the .navbar class ltul
  class"navbar"gt
• http//home.adelphi.edu/pe16132/csc170/web/step/c
  ss/css3.html

6
Move Out to External Style Sheet

• Inside the ltheadgt lt/headgt
• ltlink rel"stylesheet" href"mystyle.css"gt
• The external stylesheet would contain exactly
  what was in the internal style sheet
• body padding-left 11em
• ul.navbar
• list-style-type none
• padding 0
• margin 0
• position absolute
• top 2em
• left 1em
• width 9em

7
CSS Guides

• Examples of each level of styling
• http//home.adelphi.edu/pe16132/csc170/web/step/c
  sslinks.htm
• Tutorials
• good tutorial
• tutorial 2 - with
• command reference from w3schools
• more on ids
• more on classes
• positioning navigation bars

8
Priority of Style Levels

• HTML pages can have the same style repeated in
  four forms in one page. It has to know which
  takes priority. Here is the order, with the
  highest number being the one that will be used.
• Browser default
• External style sheet
• Internal style sheet (inside the ltheadgt tag)
• Inline style (inside an HTML element) called
  inline