Cascading Style Sheet Basics - PowerPoint PPT Presentation

Loading...

PPT – Cascading Style Sheet Basics PowerPoint presentation | free to download - id: 7930c9-MzkwN



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Cascading Style Sheet Basics

Description:

Calibri Arial Office Theme Cascading Style Sheet Basics Looking at the HTML Simple Style inside an HTML tag Navigation Bar Styling Move your style up to the header ... – PowerPoint PPT presentation

Number of Views:17
Avg rating:3.0/5.0
Slides: 9
Provided by: adel169
Learn more at: http://home.adelphi.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com