Introduction to CSS

1
Introduction to CSS

• September 20, 2005

2
6.1  Introduction

• Cascading Style Sheets (CSS)
• Separation of structure from presentation
• CSS guide and tutorial
• http//www.westciv.com/style_master/academy/css_tu
  torial/index.html
• CSS demos
• http//www.w3schools.com/css/css_examples.asp

3
How to specify CSS styles

• Inline Styles
• Declare an individual elements format
• ltp stylecolor redfont-size largergt
• CSS property Followed by a colon and a value
• Embedded Style Sheets
• Embed an entire CSS document in an XHTML
  documents head section
• ltstyle typetext/cssgt p color redfont-size
  larger lt/stylegt
• Linking External Style Sheets
• External style sheets
• ltlink relstylesheet typetext/css
  hrefformatting.css /gt
• Can provide uniform look and feel to entire site
• _at_import rule
• Import one external style sheet into another
  external style sheet
• _at_import "http//www.westciv.com/styles/style1"
  or
• _at_import url(http//www.westciv.com/styles/style1)
  

4
CSS syntax

• http//www.w3schools.com/css/css_syntax.asp
• Selectors
• selector property value
• Grouping
• One statement to set many selectors
• select1, select2, select3 property value
• Class selectors
• Same settings for all elements with attribute
  classclassname
• selector.classname property value
• ID selectors
• Specific settings for unique (or few) elements
  with attribute ididentifier
• selectoridentifier property value
• / CSS comments /

5
Cascading and inheritance

• Cascading
• One stylesheet after another can be specified
• Inheritance
• Descendant inherits properties from ancestors
• Conflict resolution The style rule with the
  greatest specificity takes precedence
• id rules take precedence over class
• class rules take precedence over element
• When rules for ids, classes, or elements have the
  same specificity, then the last rule encountered
  takes precedence
• Custom user-defined attributes have highest
  priority
• Inline styles come next
• Then embedded styles
• Finally, external style sheets

6
6.6  W3C CSS Validation Service

• Validates external CSS documents
• Ensures that style sheets are syntactically
  correct

7
6.6  W3C CSS Validation Service
Fig. 6.6 Validating a CSS document. (Courtesy of
World Wide Web Consortium (W3C).)
8
6.6  W3C CSS Validation Service
Fig. 6.7 CSS validation results. (Courtesy of
World Wide Web Consortium (W3C).)
9
CSS Properties

• http//www.w3schools.com/css/css_examples.asp
• http//www.westciv.com/style_master/academy/css_tu
  torial/properties/index.html

10
Text style properties

• color red / Colour of text note American
  spelling) /
• Font properties
• font-weight bold/normal
• font-family / Typeface of font, e.g. Arial /
• font-size / Colour of text note American
  spelling) /
• font-variant italic/normal

11
Background

• These properties are for all backgroundsthat is,
  for any element, not just the page
• background-color / Background color /
• background-image url(image.png)
• background-repeat repeat/repeat-x/repeat-y/no-rep
  eat / Full tile/tile horizontal/tile
  vertical/no tiling /

12
Spacing and borders
Fig. 6.13 Box model for block-level elements.
13
Spacing and borders

• Margins
• margin / specify width /
• Borders
• border-width thin/medium/thick/pixels
• border-style / Various styles /
• border-color
• Padding
• padding / specify width /

14
ltdivgt and ltspangt

• Block-level elements
• Contain other elements
• Eg. lthtmlgt, ltbodygt, ltpgt, lttablegt, etc.
• ltdivgt is generic
• List elements
• Special block-level elements
• ltolgt, ltulgt, ltligt
• In-line elements
• Side-by-side with other elements
• Eg. ltstronggt, ltimg/gt, ltagt, etc.
• ltspangt is generic

15
Positioning

• position property
• position static
• Place elements sequentially as they appear in the
  document
• Default for HTML
• position relative
• Place relative to where they ought to be
• position absolute
• Specify exactly where on the page the element
  should be
• Element will scroll
• position fixed
• Specify exactly where on the page the element
  should be
• Element will not scroll
• Does not work in Internet Explorer
• z-index property
• How high up should the positioned element be
  laid
• Higher z-index means higher on top

16
6.12  Web Resources

• http//www.w3schools.com/css/css_examples.asp
• http//www.westciv.com/style_master/academy/css_tu
  torial/properties/index.html
• www.w3.org/TR/css3-roadmap
• www.ddj.com/webreview/style
• tech.irt.org/articles/css.htm