CSS comes after HTML - PowerPoint PPT Presentation

About This Presentation
Title:

CSS comes after HTML

Description:

CSS comes after HTML – PowerPoint PPT presentation

Number of Views:173
Avg rating:3.0/5.0
Slides: 70
Provided by: davidj51
Category:
Tags: css | html | comes | ec

less

Transcript and Presenter's Notes

Title: CSS comes after HTML


1
CSS comes after HTML
  • By David J. Young

2
Agenda
  • Web pages created with CSS
  • CSS 101
  • CSS Concepts
  • CSS Shortcuts
  • CSS based page design
  • Tools
  • Demo

3
CSS Example 1
4
CSS Example 2
5
CSS Example 3
6
CSS Example 4
7
CSS Example 6
8
CSS Example 7
9
CSS Example 7
10
CSS Example 8
11
CSS Example 9
12
CSS Samples
  • Q What is different about all of the samples?
  • A Each presentation (look feel) is completely
    different
  • Q What is the same in all the samples?
  • A The content.
  • That is, the (X)HTML is identical.

13
Example 10
14
HTML for all Examples
15
What is CSS?
  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles are normally stored in Style Sheets
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save you a lot of work
  • External Style Sheets are stored in CSS files
  • Multiple style definitions will cascade into one

16
Why CSS?
  • Separates content from presentation
  • Semantic HTML for authoring web pages

Semantic HTML
Non-Semantic HTML
  • ltdiv class"title"gt
  • This is my headline
  • lt/divgt
  • ltbr /gt
  • ltbr /gt
  • ltdiv class"sub-header"gt
  • this is a sub header
  • lt/divgt
  • ltbr /gt
  • ltdiv class"content"gt
  • this is a paragraph of content, it contains some
    ltbgtboldlt/bgt text and some ltspan
    class"blue"gtcoloredlt/spangt text.
  • this is a second paragraph
  • lt/divgt
  • lth1gtThis is my headlinelt/h1gt
  • lth2gtthis is a sub headerlt/h2gt
  • ltpgt
  • this is a paragraph of content, it contains some
    ltstronggtbold lt/stronggt text and some ltspan
    class"highlight"gt coloredlt/spangt text.
  • lt/pgt
  • ltpgt this is a second paragraph lt/pgt

17
CSS Concepts
  • Before you can understand CSS, you need to first
    understand a few key concepts
  • Variations
  • Media Types
  • Importance
  • Inheritance
  • Origin
  • Rules
  • Ruleset
  • Properties
  • Selectors
  • Specificity

18
Variations
  • CSS 1
  • The first CSS specification to become an official
    W3C Recommendation is CSS level 1, published in
    December 1996. Among its capabilities are support
    for
  • Font properties such as typeface and emphasis
  • Color of text, backgrounds, and other elements
  • Text attributes such as spacing between words,
    letters, and lines of text
  • Alignment of text, images, tables and other
    elements
  • Margin, border, padding, and positioning for most
    elements
  • Unique identification and generic classification
    of groups of attributes
  • CSS 2
  • CSS level 2 was developed by the W3C and
    published as a Recommendation in May 1998. A
    superset of CSS1, CSS2 includes a number of new
    capabilities like absolute, relative, and fixed
    positioning of elements, the concept of media
    types, support for aural style sheets and
    bidirectional text, and new font properties such
    as shadows.
  • CSS 2.1
  • CSS level 2 revision 1 or CSS 2.1 fixes errors in
    CSS2, removes poorly-supported features and adds
    already-implemented browser extensions to the
    specification. While it was a Candidate
    Recommendation for several months, on June 15,
    2005 it was reverted to a working draft for
    further review. It was returned to Candidate
    Recommendation status on 19 July 2007.
  • CSS 3
  • CSS level 3 is currently under development. The
    W3C maintains a CSS3 progress report. CSS3 is
    modularized and will consist of several separate
    Recommendations. The W3C CSS3 Roadmap provides a
    summary and introduction.

19
Browser Support for CSS
  • http//www.quirksmode.org

20
Media Types
  • All Used for all media type devices
  • Aural Used for speech and sound synthesizers
  • Braille Used for braille tactile feedback devices
  • Embossed Used for paged braille Printers
  • Handheld Used for small or handheld devices
  • Print Used for printers
  • Projection Used for projected presentations, like
    slides
  • Screen Used for computer screens
  • TTY Used for media using a fixed-pitch
    character grid, like teletypes and terminals
  • TV Used for television-type devices

21
Importance
  • There a two levels of importance
  • Normal
  • Important (made using !important declaration)
  • Both Authors and Readers can make !important
    declarations
  • In CSS1, author !important declarations overruled
    reader declarations
  • In CSS2, reader !important declarations overrule
    author declarations

22
Inheritance
  • Virtually all selectors which are nested within
    other selectors will inherit the property values
    assigned to the outer selector unless otherwise
    modified. For example, a color defined for the
    BODY will also be applied to text in a paragraph.
  • There are some cases where the inner selector
    does not inherit the surrounding selector's
    values, but these should stand out logically. For
    example, the margin-top property is not
    inherited intuitively, a paragraph would not
    have the same top margin as the document body.

23
Importance
  • Generally speaking styles will "cascade" into a
    new "virtual" style sheet by using the following
    order, where the last item carries the highest
    importance

24
Origin
  • Origin is where styles originate
  • User Agent Style Sheets
  • Browser Defaults
  • C\Program Files\Mozilla Firefox\res\html.css
  • User Style Sheets
  • Ignore cheap-effect tags
  • blink text-decoration none !important
  • marquee -moz-binding none !important
  • Visually impaired
  • html font-size 24pt !important
  • Author Style Sheets
  • External style sheet
  • Internal style sheet (inside the ltheadgt tag)
  • Inline style (inside an HTML element)

25
Rules
  • A style sheet consists of a list of rules. Each
    rule or rule-set consists of one or more
    selectors and a declaration block. A
    declaration-block consists of a list of
    semicolon-separated declarations in braces. Each
    declaration itself consists of a property, a
    colon (), a value, then a semi-colon ().

26
Properties
Text and Fonts font font-family font-size
font-weight font-style font-variant
line-height letter-spacing word-spacing
text-align text-decoration text-indent
text-transform vertical-align white-space
Colours and Backgrounds color
background-color background background-image
background-repeat background-position
background-attachment
The Box Model - padding, margin, outline and
borders padding, padding-top, padding-right,
padding-bottom, padding-left border,
border-top, border-right, border-bottom,
border-left border-style, border-top-style,
border-right-style, border-bottom-style,
border-left-style border-color,
border-top-color, border-right-color,
border-bottom-color, border-left-color
border-width, border-top-width,
border-right-width, border-bottom-width,
border-left-width outline outline-style
outline-color outline-width margin,
margin-top, margin-right, margin-bottom,
margin-left
Positioning and Display position top right
bottom left clip overflow z-index float
clear display Visibility Lists list-style
list-style-type list-style-image
list-style-position The Box Model
dimensions width height min-width max-width
min-height max-height
Tables table-layout border-collapse
border-spacing empty-cells caption-side
Generated Content content counter-increment
counter-reset quotes Paged Media page-break-be
fore page-break-after page-break-inside
orphans Widows Misc. cursor direction
unicode-bidi
27
Selectors
  • Selectors are used to declare which elements a
    style applies to, a kind of match expression.
    Selectors may apply to all elements of a specific
    type, or only those elements which match a
    certain attribute elements may be matched
    depending on how they are placed relative to each
    other in the markup code, or on how they are
    nested within the document object model (DOM).

28
Selectors
  • Element Selectors element
  • Class Selectors .classname
  • ID Selectors idname
  • Descendant Selectors ul li
  • Child Selectors ul gt li
  • Adjacent Sibling h1 p
  • Attribute Selectors imgsrc"vacation"
  • Daisy Chaining id element.class
  • Group Selectors h1,h2,h3
  • Universal Selectors
  • Psuedo-Classes ahover
  • Psuedo-Elements pfirst-letter

29
HTML relates to CSS
  • Element Selectors
  • ltpgt styled by
  • p color red
  • Class Selectors
  • ltp classcode"gt styled by
  • p.code color cyan font-family courier
  • or .code color F0F font-family courier
  • ID Selectors
  • ltp id"sig"gt styled by
  • psig color cyan
  • or sig color F0F

30
ID vs Class
  • A unique ID can only be used only once on a
    HTML page
  • IDs are usually associated with layout regions
    or areas
  • A class can be used any number of times

31
Selector Specificity
  • A selector's specificity is calculated as
    follows
  • count 1 if the declaration is from a 'style'
    attribute rather than a rule with a selector, 0
    otherwise ( a)
  • (In HTML, values of an element's "style"
    attribute are style sheet rules. These rules have
    no selectors, so a1, b0, c0, and d0.)
  • count the number of ID attributes in the selector
    ( b)
  • count the number of other attributes and
    pseudo-classes in the selector ( c)
  • count the number of element names and
    pseudo-elements in the selector ( d)
  • The specificity is based only on the form of the
    selector. In particular, a selector of the form
    "idp33" is counted as an attribute selector
    (a0, b0, c1, d0), even if the id attribute is
    defined as an "ID" in the source document's DTD.
  • Concatenating the four numbers a-b-c-d (in a
    number system with a large base) gives the
    specificity.
  • Some examples
  • / a0 b0 c0 d0 -gt
    specificity 0,0,0,0 /
  • li / a0 b0 c0 d1 -gt
    specificity 0,0,0,1 /
  • lifirst-line / a0 b0 c0 d2 -gt
    specificity 0,0,0,2 /
  • ul li / a0 b0 c0 d2 -gt
    specificity 0,0,0,2 /
  • ul olli / a0 b0 c0 d3 -gt
    specificity 0,0,0,3 /
  • h1 relup / a0 b0 c1 d1 -gt
    specificity 0,0,1,1 /
  • ul ol li.red / a0 b0 c1 d3 -gt
    specificity 0,0,1,3 /
  • li.red.level / a0 b0 c2 d1 -gt
    specificity 0,0,2,1 /

32
Practical Specificity
  • HTML Elements ltpgt, ltdivgt, lth1gt
  • CSS Classes .center, .hilight
  • CSS ID content, navbar
  • Inline Styles style"text-align center"

33
Cascade Order
  • Find all declarations that apply to the element
    and property for the target media type.
  • Sort according to importance (normal or
    important) and origin (author, user, or user
    agent). In ascending order of precedence
  • user agent declarations
  • user normal declarations
  • author normal declarations
  • author important declarations
  • user important declarations
  • Sort rules with the same importance and origin by
    specificity of selector more specific selectors
    will override more general ones. Pseudo-elements
    and pseudo-classes are counted as normal elements
    and classes, respectively.
  • Finally, sort by order specified if two
    declarations have the same weight, origin and
    specificity, the latter specified wins.
    Declarations in imported style sheets are
    considered to be before any declarations in the
    style sheet itself.

34
Cascade Conflicts
  • Find all declarations that match a particular
    element
  • Sort declarations by weight and origin
  • Sort selectors by specificity
  • Sort by order specified

35
What color is P element text?
  • Example
  • ltHEADgt
  • ltSTYLE type"text/css"gt
  • p.std color magenta
  • x97z color red
  • p color green
  • body color yellow background-color 000
  • lt/STYLEgt
  • lt/HEADgt
  • ltBODYgt
  • ltP ID"x97z" class"std" style"color
    cyan"gtTextlt/Pgt
  • ltPgtOther Paragraphlt/Pgt
  • lt/BODYgt
  • body color yellow / a0 b0 c0 d1 -gt
    specificity 0,0,0,1 /
  • p color green / a0 b0 c0 d1 -gt
    specificity 0,0,0,1 /
  • p.std color magenta / a0 b0 c1 d1 -gt
    specificity 0,0,1,1 /
  • x97z color red / a0 b1 c0 d0 -gt
    specificity 0,1,0,0 /
  • style"color cyan" / a1 b0 c0 d0 -gt
    specificity 1,0,0,0 /

36
Inserting Style Sheets
  • External Style Sheet
  • Link
  • ltlink rel"stylesheet" type"text/css"
    href"navbar.css" /gt
  • Import
  • ltstyle type"text/css" media"screen"gt_at_import
    url("/css/my.css") lt/stylegt
  • ltstyle type"text/css"gt_at_import url("import.css")
    tv,print lt/stylegt
  • Internal Style Sheet
  • ltstyle type"text/css"gt
  • body margin0width100height100
  • body,td,input,textarea,selectfont-familyarial,sa
    ns-serif
  • input,textarea,selectfont-size100
  • loadingpositionabsolutewidth100height100
    background-colorfff
  • .cmsgmargin1em
  • .msgfont-weightbold
  • lt/style
  • Inline Styles
  • ltp style"colorsiennamargin-left20px"gtThis is
    a paragraph.lt/pgt

37
HTML Webpage
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-trans
    itional.dtd"gt
  • lthtml xmlns"http//www.w3.org/1999/xhtml"gt
  • ltheadgt
  • lttitlegt CSS comes after HTML lt/titlegt
  • ltmeta name"description" contentCSS For
    programmers." /gt
  • ltmeta name"keywords" contentCSS, HTML,
    Tutorial" /gt
  • ltstyle type"text/css" media"screen"gt
  • _at_import url("http//some.domain.com/css/base.css"
    )
  • _at_import url("http//some.domain.com/css/Blog.css"
    )
  • lt/stylegt
  • ltlink rel"stylesheet" type"text/css"
    href"http//some.domain.com/css/print.css"
    media"print" /gt
  • ltstyle type"text/cssgt
  • body margin 0 padding 0 background-color
  • lt/stylegt
  • /headgt
  • ltbody id"EyeBrow"gt
  • ltdiv id"content" style"text-alignleft"gt

External Style Sheets
Internal Style Sheet
Inline Style
38
External CSS Files
menu
HTML1
ltlinkgt _at_import
layout
ltlinkgt _at_import
navbar
_at_import
ltlinkgt _at_import
HTML2
39
CSS Sample
  • / basic elements /
  • html
  • margin 0
  • padding 0
  • body
  • font 75 georgia, sans-serif
  • line-height 1.88889
  • color 555753
  • background fff url(blossoms.jpg) no-repeat
    bottom right
  • margin 0
  • padding 0
  • h3
  • font italic normal 1.4em georgia, sans-serif
  • letter-spacing 1px
  • margin-bottom 0
  • color 7D775C
  • / specific divs /
  • container
  • background url(zen-bg.jpg) no-repeat top left
  • padding 0 175px 0 110px
  • margin 0
  • position relative
  • intro
  • min-width 470px
  • / using an image to replace text in an h1. This
    trick courtesy Douglas Bowman, http//www.stopdesi
    gn.com/articles/css/replace-text/ /
  • pageHeader h1
  • background transparent url(h1.gif) no-repeat
    top left
  • margin-top 10px
  • width 219px
  • height 87px
  • float left

40
Shorthands
  • full
  • border-width 1px
  • border-style dotted
  • border-color ff0000
  • or
  • shorthand border 1px dotted f00

41
CSS Shorthand
  • Border -width -style -color
  • Margin -top -right -bottom -left
  • Padding -top -right -bottom -left
  • Font -style -variant -weight -size -height
    -family
  • List-Style -type -position -image
  • Background -color -image -repeat
    -attachment -position

42
Shorthand Declarations
  • margin-top 25px
  • margin-right 0
  • margin-bottom 5px
  • margin-left 0
  • margin 25px 0 5px 0
  • margin 10px
  • margin 10px 10px 10px 10px
  • margin 10px auto
  • margin 10px auto 10px auto
  • margin 10px auto 15px
  • margin 10px auto 15px auto

25px
0
0
5px
43
Colors
  • color_name A color name (e.g. red)
  • rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))
  • rgb(x, x, x) An RGB percentage value (e.g.
    rgb(100,0,0))
  • rrggbb A HEX number (e.g. ff0000)
  • The W3C HTML and CSS standards have listed only
    16 valid color names
  • aqua, black, blue, fuchsia, gray, green, lime,
    maroon, navy, olive, purple, red, silver, teal,
    white, and yellow
  • However, see http//w3schools.com/css/css_colorna
    mes.asp for a list of 140 color names supported
    by all major browsers.

44
Length Units
  • Absolute
  • in inch
  • cm centimeter
  • mm millimeter
  • pt point (1 pt is the same as 1/72 inch)
  • pc pica (1 pc is the same as 12 points)
  • Relative
  • em 1em is equal to the current M size. 2em
    means 2 times the size of the current M . E.g.,
    if an element is displayed with a M of 12 pt,
    then '2em' is 24 pt. The 'em' is a very useful
    unit in CSS, since it can adapt automatically to
    the M that the reader uses
  • ex one ex is the x-height of a x (x-height is
    usually about half the M-size)
  • px pixels (a dot on the computer screen)
  • percentage

45
HTML Tags
  • Deprecated
  • ltbasefontgt
  • ltcentergt
  • ltfontgt
  • ltstrikegt
  • ltsgt
  • ltugt
  • Discouraged
  • ltbgt
  • ltigt
  • ltbiggt
  • ltsmallgt
  • ltttgt

46
Comments
  • CSS uses C Style comment Syntax
  • / Comment here /p margin 1em / Comment
    here /padding 2em / color white
    /background-color blue/multi-linecommen
    t here/
  • Comments cannot be nested

47
Centering
  • ltcentergt is deprecated
  • Suggested to use CSS instead
  • text-align center only centers text
  • Centering HTML elements with CSS is easy, but not
    initially obvious
  • Set margin-left and margin-right to auto
  • Define an element width
  • div margin 0 auto 0 auto width800px

48
Display of HTML elements
  • Block
  • Takes up the full width available, with a new
    line before and after (displayblock)
  • Inline
  • Takes up only as much width as it needs, and does
    not force new lines (displayinline)
  • Not displayed
  • Some tags, like ltmeta /gt and ltstylegt are not
    visible (displaynone)

49
display vs visibility
  • selector display none
  • selector visibility hidden
  • accomplish the same thing The element is
    removed from view.
  • But fundamentally they work completely different.
    Displaynone removes the element from the normal
    document flow. The effect is surrounding elements
    will be adjusted as they reflow in the document.
  • visibilityhidden hides the element, but it
    remains in the document flow. This may leave
    what appears to be an unexplainable blank hole
    your document.

50
Block vs Inline
ltdivgt
lth1gt
ltpgt
lttablegt
ltacronymgtCSSlt/acronymgt stands for Cascading Style
Sheet. A CSS style sheet ltstronggtcanlt/stronggt be
used to create powerful web pages. Click lta
hrefhttp//www.sample.com/url.htmlgt here lt/agt
for a sample of a CSS based web page.
51
HTML Elements
  • Block
  • ltdivgt
  • Your general-purpose box
  • lth1gt ... lth6gt
  • All headings
  • ltpgt
  • Paragraph
  • ltulgt, ltolgt, ltdlgt
  • Lists (unordered, ordered and definition)
  • ltligt, ltdtgt, ltddgt
  • List items, definition list terms, and definition
    list definitions
  • lttablegt
  • Tables
  • ltblockquotegt
  • Like an indented paragraph, meant for quoting
    passages of text
  • ltpregt
  • Indicates a block of preformatted code
  • ltformgt
  • Inline
  • ltspangt
  • Your all-purpose inline element
  • ltagt
  • Anchor, used for links (and also to mark specific
    targets on a page for direct linking)
  • ltstronggt
  • Used to make your content strong, displayed as
    bold in most browsers, replaces the narrower ltbgt
    (bold) tag
  • ltemgt
  • Adds emphasis, but less strong than ltstronggt.
    Usually displayed as italic text, and replaces
    the old ltigt (italic) tag
  • ltimg /gt
  • Image
  • ltbrgt
  • The line-break is an odd case, as it's an inline
    element that forces a new line. However, as the
    text carries on on the next line, it's not a
    block-level element.
  • ltinputgt
  • Form input fields like and
  • ltabbrgt
  • Indicates an abbr. (hover to see how it works)
  • ltacronymgt

52
CSS based layout
layout
header
nav
content
sidebar
footer
53
Positioning Schemes
  • Normal Flow
  • Normal flow is the default scheme used for
    positioning. In this scheme, block boxes flow
    vertically starting at the top of their
    containing block with each placed directly below
    the preceding one.
  • position static
  • position relative
  • Float
  • When specified, the box is positioned vertically
    as it would be within the normal flow, its top
    aligned with the top of the current line box. But
    horizontally, it is shifted as far to the right
    or left of its containing block as possible,
    within that block's padding (just like other
    content). Surrounding inline content is then
    allowed to flow around the opposite side.
  • Absolute
  • In absolute positioning, block boxes are removed
    from the normal flow and have no effect on boxes
    in that flow. Like floated elements, absolutely
    positioned elements are always treated as
    block-level elements. As such, they establish a
    new containing block for any descendants, i.e.,
    any elements contained within the absolutely
    positioned element.
  • position absolute
  • position fixed

54
Static Positioning
  • position static
  • positionstatic is the default scheme used in
    normal flow positioning. In this scheme, block
    boxes flow vertically starting at the top of
    their containing block with each placed directly
    below the preceding one. Inline boxes flow
    horizontally from left to right.
  • Take note that vertical margins are collapsed in
    the normal flow. That is, instead of adding the
    bottom margin of a box to the top margin of the
    one immediately below it, only the larger of the
    two values is used

55
Relative Positioning
  • position relative
  • When an element specifies positionrelative
    it is initially positioned following the normal
    flow rules. Surrounding boxes are positioned
    accordingly. Then, the box is moved according to
    its offset properties.

56
Float Positioning
  • float left
  • Floating is achieved by setting the float
    property on an element's style to either left or
    right. Special rules apply to floated elements.
  • When specified, the box is positioned vertically
    as it would be within the normal flow, its top
    aligned with the top of the current line box. But
    horizontally, it is shifted as far to the right
    or left of its containing block as possible,
    within that block's padding (just like other
    content). Surrounding inline content is then
    allowed to flow around the opposite side.

57
Absolute Positioning
  • position absolute
  • When an element specifies positionabsolute
    The position of an absolutely positioned element
    is determined by its offset values top, right,
    bottom and left. These values work in much the
    same way as with relatively positioned elements.
  • But unlike relative positioning, where the
    offsets are measured from the element's position
    in the normal flow, an absolutely positioned
    element is offset from its container block.

58
Fixed Positioning
  • position fixed
  • Fixed positioning is a special case of absolute
    positioning. For fixed elements, the containing
    block is always taken to be the viewport of the
    browser window. A fixed element does not move
    when a web page is scrolled as all other elements
    do.

59
Clear
  • clear left
  • The CSS clear property is used to control flow
    when using the float property. Using CSS clear,
    you can specify whether to keep one or both sides
    of an element "clear" (i.e. no elements can
    appear on the side that is clear).

60
Box Model
61
Box Model Hack
  • p
  • background ff9999
  • border 5px solid ff0000
  • padding 25px
  • width 160px / IE /
  • voice-family "\"\" "
  • voice-family inherit
  • width 100px / FF /
  • htmlgtbody p
  • width 100px

160px
100px
border
content
padding
25px
5px
62
Quirks Mode
  • To maintain compatibility with the greatest
    possible number of web pages, modern web browsers
    are generally developed with multiple rendering
    modes
  • standards mode pages are rendered according to
    the HTML and CSS specifications
  • quirks mode attempts are made to emulate the
    behavior of an older browser to support the large
    body of legacy documents

63
DOCTYPE
  • (Almost) Standards Mode
  • lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN" "http//www.w3.org/TR/html4/loo
    se.dtd"gt
  • Quirks Mode
  • lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN"gt
  • Almost Standards Mode maintains the "traditional"
    vertical sizing of table cells according to the
    CSS2 specification. "Almost standards" mode
    rendering matches "standards" mode in all details
    except for one. The layout of images inside table
    cells is handled the same way "quirks" mode
    operates. This means that sliced-images-in-tables
    layouts are less likely to fall apart in browsers
    when in either "quirks" or "almost standards"
    mode, rather than "standards mode

64
DHTML
  • Some Dynamic HTML effects can be accomplished
    with CSS
  • Rollovers
  • Button pushes

65
Common Mistakes
  • Using an HTML tag because of the way it looks,
    not for its meaning
  • Inserting presentation into your HTML
  • Adding an ID or Class to all HTML elements so
    that it is a selector for CSS
  • Using instead of in declaration
  • Not preserving case ID Class names are
    case-sensitive

66
Best Practices
  • Make sure youre using a good DOCTYPE
  • Order styles in file
  • HTML selectors at top
  • ID selectors together (especially those used for
    layout)
  • Place class and pseudo-class selectors last
  • Add notes
  • Use em or , not px
  • Add border 1px solid red to elements in your
    CSS to help debug layout, positioning or spacing
  • Always terminate your declarations with a
    semicolon ()
  • Do not use the HTML tables for layout

67
Tools
  • Firefox with Firebug
  • 1st Page 2000 in Realtime Preview mode

68
Demo
69
Firebug Demo
  • P element
  • Box Model
  • Styles
  • Look at CSS
  • Viewing colors
  • Viewing images
  • Editing TechRepublic print media

70
References
  • http//www.htmldog.com
  • http//www.csszengarden.com
  • http//www.w3schools.com/css/default.asp
  • http//www.quirksmode.org
  • http//en.wikipedia.org/wiki/Quirks_mode
  • http//www.barelyfitz.com/screencast/html-training
    /css/positioning
  • http//www.autisticcuckoo.net/archive.php?id2004/
    12/07/relatively-absolute

71
Questions?
Write a Comment
User Comments (0)
About PowerShow.com