CSS Background

1
CSS Background
2
The Big Picture

• Browsers follow an object model
• First it creates a DOM (document object model)
• Interprets the HTML and creates all page elements
  (sub objects)
• Uses CSS to apply properties to each sub-object
  in the DOM (where the CSS designates a property
  to apply)
• CSS stylesheets were first called property
  sheets

3
CSS

• CSS Cascading Styles Sheets
• A way to style HTML.
• Whereas the HTML is the content, the style sheet
  is the presentation of that document
• Everything was once organized with tables

4
Inspiration

• Zen Garden
• http//www.csszengarden.com/
• Note Browser differences

5
Why CSS

• Clean up the mess
• Most (older) sites use tables and font tags
• None of which conveys semantic meaning
• ltfont size3 face helvetica color
  redgtPageTitlelt/fontgt
• What good is a font tag to a speech-synthesis
  browser?

6
Why CSS

• Search engines
• Increase accessibility
• Easier to maintain
• Easier to make site wide changes
• Can be used site wide

7
HTML vs. CSS

• lth2gtltfont colorpurplegtThis is
  purplelt/fontgtlth2gt
• This has to be applied EACH time
• VS.
• h2
• colorpurple
• This is universal to all selectors named h2

8
Cascadingwhat does that mean?

• Provisions for conflicting rules
• Priority
• Browser default
• External style sheet
• Internal style sheet (inside the ltheadgt tag)
• Inline style (inside an HTML element)
• So - an inline style
• (inside an HTML element) has the highest priority
  
• which means that it will override a style
  declared inside the ltheadgt tag, in an external
  style sheet, or in a browser (a default value).

9
Cascadingwhat does that mean?

• Provisions for conflicting rules (external)
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltlink href"../stylesheets/headerlinkstyles_subpa
  ges.css" rel"stylesheet" type"text/css" /gt
• ltlink href"../stylesheets/portfoliobase.css"
  rel"stylesheet" type"text/css" /gt
• ltlink href"../stylesheets/portfoliodescription.c
  ss" rel"stylesheet" type"text/css" /gt
• ltbodygt
• ---- this is where your webpage goes
• lt/bodygt
• lt/htmlgt

10
Why CSS.more reasons

• CSS stylistic language
• HTML structural language
• W3C body that debates web standards
• Is removing stylistic elements from HTML
• XHTML (current accepted standard)
• Some older stylistic HTML will be rendered
  obsolete and not supported
• ltfontgt, ltugt, ltstrikegt, ltcentergt
• HTML might eventually be replaced by XML
• More powerful, more flexible easily localized
• Does not declare styles

11
XHTML is a W3C Recommendation

• XHTML 1.0 became a W3C Recommendation January 26,
  2000.

12
CSS and XHTML

• Web 2.0
• Web 2.0 doesn't have a hard boundary, but
  rather, a gravitational core
• http//www.oreillynet.com/pub/a/oreilly/tim/news/2
  005/09/30/what-is-web-20.html
• CSS and XHTML is the 2.0 standard

13
XHTML
14
XHTML

• XHTML
• EXtensible HyperText Markup Language
• Aimed to replace HTML
• Almost identical to HTML 4.01
• Stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• Therefore follows the rules of XML

15
Why XHTML?

• We have reached a point where many pages on the
  WWW contain "bad" HTML.
• The following HTML code will work fine if you
  view it in a browser, even if it does not follow
  XML rules
• lthtmlgt
• ltheadgt
• lttitlegtThis is bad HTMLlt/titlegt
• ltbodygt
• lth1gtBad HTML
• lt/bodygt

16
XML

• XML markup language where everything has to be
  marked up correctly
• Results in "well-formed" documents.
• XML was designed to describe data and HTML has
  evolved a tool to display data. 
• Different browser technologies
• Internet on computers
• Internet on mobile phones and hand helds.
• Do not have the resources or power to interpret a
  "bad" markup language.
• HTML XML (and their strengths) markup
  language that is useful now
• XHTML pages can be read by all XML enabled
  devices
• AND while waiting for the rest of the world to
  upgrade to XML supported browsers XHTML gives
  you the opportunity to write "well-formed"
  documents now, that work in all browsers and that
  are backward browser compatible !!!
• and forward compatible ?

17
XHTML

• Follows the rules of XML
• elements must be properly nested
• elements must always be closed
• elements must be in lowercase
• documents must have one root element

18
XHTML elements must be properly nested

• Wrong
• ltulgt
• ltligtCoffeelt/ligt
• ltligtTea
• ltulgt
• ltligtBlack tealt/ligt
• ltligtGreen tealt/ligt
• lt/ulgt
• ltligtMilklt/ligt
• lt/ulgt
• Correct
• ltulgt
• ltligtCoffeelt/ligt
• ltligtTea
• ltulgt
• ltligtBlack tealt/ligt
• ltligtGreen tealt/ligt
• lt/ulgt

19
XHTML elements must always be closed

• Wrong
• ltpgtThis is a paragraph
• ltpgtThis is another paragraph
• Correct
• ltpgtThis is a paragraphlt/pgt
• ltpgtThis is another paragraphlt/pgt

20
XHTML elements must be in lowercase

• Wrong
• ltBODYgt
• ltPgtThis is a paragraphlt/Pgt
• lt/BODYgt
• Correct
• ltbodygt
• ltpgtThis is a paragraphlt/pgt
• lt/bodygt

21
XHTML documents must have one root element

• All XHTML elements must be nested within the
  lthtmlgt root element.
• All other elements can have sub (children)
  elements.
• Sub elements must be in pairs and correctly
  nested within their parent element.
• The basic document structure is
• lthtmlgt
• ltheadgt ... lt/headgt
• ltbodygt ... lt/bodygt
• lt/htmlgt

22
CSS Overview
23
Browsers (Stats)

• All major browsers support Cascading Style Sheets
• Web Statistics and Trends Sept 2007
• http//www.w3schools.com/browsers/browsers_stats.a
  sp
• Also see http//www.upsdell.com/BrowserNews/stat.
  htm

24
CSS

• The CSS syntax is made up of three parts
• Selector
• Three types
• ID (nameOfYourChoice or HTML)
• Class (. nameOfYourChoice or HTML)
• HTML(ltpgt, ltagt, ltbodygtetc)
• Property
• Value

25
CSS

• 'properties' are inside curly brackets (called
  braces)
• take the form of words such as color, font-weight
  or background-color.
• A value is given to the property following a
  colon and semi-colons separate the properties.
• This is a selector ? centerPanel
• This is a property ? positionrelative
  lt-Value followed by
• backgrounddff3fd
• margin-leftauto
• margin-rightauto
• width1000px
• height100
• z-index1
• Curly Bracket (Brace) ?

26
External vs. Internal Stylesheets

• Can be part of the page itself OR
• Can be brought in as a link
• I always start with them internal and then
  usually externalize

27
Inserting Style Sheets

• External
• ltheadgt
• ltlink rel"stylesheet" type"text/css
• href"mystyle.css" /gt
• lt/headgt

28
Inserting Style Sheets

• Internal
• ltheadgt
• ltstyle type"text/css"gt
• hr
• color sienna
• p
• margin-left 20px
• body
• background-image url("images/back40.gif")
• lt/stylegt
• lt/headgt

29
Selectors rule of thumb

• .class selectors for general use
• ID selectors for specific use
• You can group selectors
• Separate each selector with a comma.
• h1,h2,h3,h4,h5,h6
• color green
• Much more to know herebuy a good book

30
Class Selectors

• In the Style sheet
• p.right
• text-align right
• p.center
• text-align center
• In the HTML
• ltp class"right"gt
• This paragraph will be right-aligned.
• lt/pgt
• ltp class"center"gt
• This paragraph will be center-aligned.
• lt/pgt

31
Selectors

• Do NOT start a class or ID name with a number!
• It will not work in Mozilla/Firefox.

32
Pseudo Classes

• link is for an unvisited link.
• alink
• color black font-size 0.8em
• font-family Verdana
• visited is for a link to a page that has already
  been visited.
• avlink
• color black font-size 0.8em
• font-family Verdana
• active is for a link when it is gains focus (for
  example, when it is clicked on).
• aactive
• color black font-size 0.8em
• font-family Verdana
• hover is for a link when the cursor is held over
  it.

33
Adding Comments

• / This is a comment /
• p
• text-align center
• / This is another comment /
• color black
• font-family arial

34
Fonts and CSS
35
Font-family

• The font you specify must be on the user's
  computer
• little point in using obscure fonts.
• Safe' fonts are few
• Common arial, verdana and times new roman - but
  you can specify more than one font, separated by
  commas.
• If the user does not have the first font you
  specify, the browser will go through the list
  until it finds one it does have.
• This is useful because different computers
  sometimes have different fonts installed.
• font-family arial, helvetica, for example, is
  used so that similar fonts are used on PC (which
  traditionally has arial, but not helvetica) and
  Apple Mac (which, traditionally, does not have
  arial and so helvetica, which it does normally
  have, will be used).
• Note if the name of a font is more than one
  word, it should be put in quotation marks
• font-family "Times New Roman".

36
Font Family

• centerPanel
• positionrelative
• font-familyArial, Helvetica, sans-serif
• backgrounddff3fd
• margin-leftauto
• margin-rightauto
• width1000px
• height100

37
Font Size

• Be careful with this.
• Avoid Pixels inconsistent display (esp. on
  Macs)
• p
• font-familyArial, Helvetica, sans-serif
• font-size12px
• pts and picas okaybut really designed for print
• p
• font-familyArial, Helvetica, sans-serif
• font-size12pt
• ems are reccomended
• Relative font measurement wher one em the
  hieght of M in the default user size

38
ems

• 100 users default
• p
• font-familyArial, Helvetica, sans-serif
• font-size1em
• 90
• p
• font-familyArial, Helvetica, sans-serif
• font-size0.9em
• 110
• p
• font-familyArial, Helvetica, sans-serif
• font-size1.1em

39
Font Weight

• Bold or not
• In practice this usually only works as
  font-weight bold or font-weight normal.
• In theory it can also be bolder, lighter, 100,
  200, 300, 400, 500, 600, 700, 800 or 900,
• Many browsers will not support (safest to stick
  with bold and normal
• p
• font-familyArial, Helvetica, sans-serif
• font-size0.8em
• font-weight bold

40
Font Style

• This states whether the text is italic or not.
• It can be font-style italic or font-style
  normal.
• p
• font-familyArial, Helvetica, sans-serif
• font-size1em
• font-weight bold
• font-styleitalic

41
Font Decoration

• This states whether the text is underlined or
  not.
• text-decoration overline, which places a line
  above the text.
• p
• font-familyArial, Helvetica, sans-serif
• font-size1em
• font-weightbold
• font-styleitalic
• text-decorationoverline
• text-decoration line-through
• text-decoration underline should only be used
  for links because users generally expect
  underlined text to be links.
• This property is usually used to decorate links,
  such as specifying no underline with
  text-decoration none.

42
Sample

• body     font-family arial, helvetica,
  sans-serif     font-size 0.8em
• h1     font-size 2em
• h2     font-size 1.5em
• a     text-decoration none
• strong     font-style italic
      text-transform uppercase

43
Text Spacing

• The letter-spacing and word-spacing properties
  are for spacing between letters or words. The
  value can be a length or normal.
• The line-height property sets the height of the
  lines in an element, such as a paragraph, without
  adjusting the size of the font.
• number (which specifies a multiple of the font
  size, so '2' will be two times the font size, for
  example), a length, a percentage or normal.
• The text-align property will align the text
  inside an element to left, right, center or
  justify.
• p     letter-spacing 0.5em
      word-spacing 2em     line-height 1.5
      text-align center

44
Spans and Divs(Tying this all together)
45
ltspangt and ltdivgt

• "dummy" tags that don't do anything in
  themselves.
• Excellent for carrying CSS style

46
ltSpangt

• ltSPANgt is an "inline-tag" in HTML, meaning that
  no line breaks are inserted before or after the
  use of it.
• Use sparingly
• Style
• .hilite
• background-color FFFFCC
• HTML
• ltpgt These ltspan classhilitegtstuffed
  pepperslt/spangt are lovely.ltpgt

47
ltdivgt

• Dreamweaver calls them layers
• z-index1
• Think of them as a container
• Your page will now be composed of divs which will
  be described by styles
• Often called a box model

48
Key Properties to know
49
Positioning

• Describe the placement of the divs
• static
• absolute
• relative
• fixed
• inherit

50
Absolute Positioning

• Removed from the document flow
• Dreamweaver default
• Calculated from the upper left corner of the page
  
• Unless the div is defined inside another div, in
  which case it will be calculated from the upper
  left corner of the parent layer.
• Assumes a fixed design
• Not accessible
• Good Servant.bad master

51
Relative

• The position will be calculated relative to the
  element that comes before it
• Defaults to under the element before
• Use a float property to place side by side
• Remains in the flow of the document
• Good for accessibility
• Good masterfine servant

52
Margin and Padding

• A margin is the space outside of the element
• Padding is the space inside the element.

53
Property Examples

• All from http//www.w3schools.com/

54
Backgrounds

• Set the background colorThis example
  demonstrates how to set the background color for
  an element.
• Set an image as the backgroundThis example
  demonstrates how to set an image as the
  background.
• How to repeat a background image only
  verticallyThis example demonstrates how to
  repeat a background image only vertically.
• How to repeat a background image only
  horizontallyThis example demonstrates how to
  repeat a background image only horizontally.
• How to place the background imageThis example
  demonstrates how to place the image on the page.
• How to set a fixed background imageThis example
  demonstrates how to set a fixed background image.
  
• All from http//www.w3schools.com/

55
Borders

• Set the style of the four bordersThis example
  demonstrates how to set the style of the four
  borders.
• Set different borders on each sideThis example
  demonstrates how to set different borders on each
  side of the element.
• Set the color of the four bordersThis example
  demonstrates how to set the color of the four
  borders. It can have from one to four colors.
• Set the width of the bottom borderThis example
  demonstrates how to set the width of the bottom
  border.
• All the bottom border properties in one
  declarationThis example demonstrates a shorthand
  property for setting all of the properties for
  the bottom border in one declaration.
• All the left border properties in one
  declarationThis example demonstrates a shorthand
  property for setting all of the properties for
  the left border in one declaration.
• All the right border properties in one
  declarationThis example demonstrates a shorthand
  property for setting all of the properties for
  the right border in one declaration.
• All the width of the border properties in one
  declarationThis example demonstrates a shorthand
  property for setting the width of the four
  borders in one declaration, can have from one to
  four values.
• All the border properties in one declarationThis
  example demonstrates a shorthand property for
  setting all of the properties for the four
  borders in one declaration, can have from one to
  three values.
• All from http//www.w3schools.com/

56
Lists

• The different list-item markers in unordered
  listsThis example demonstrates the different
  list-item markers in CSS.
• The different list-item markers in ordered
  listsThis example demonstrates the different
  list-item markers in CSS.
• Set an image as the list-item markerThis example
  demonstrates how to set an image as the list-item
  marker.
• Place the list-item markerThis example
  demonstrates where to place the list-item marker.
• All list properties in one declarationThis
  example demonstrates a shorthand property for
  setting all of the properties for a list in one
  declaration.
• All from http//www.w3schools.com/

57
Text Margins

• Set the left margin of a textThis example
  demonstrates how to set the left margin of a
  text.
• Set the right margin of a textThis example
  demonstrates how to set the right margin of a
  text.
• Set the top margin of a textThis example
  demonstrates how to set the top margin of a text.
• Set the bottom margin of a textThis example
  demonstrates how to set the bottom margin of a
  text.
• All the margin properties in one declarationThis
  example demonstrates how to set a shorthand
  property for setting all of the margin properties
  in one declaration.
• All from http//www.w3schools.com/