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?