HTML: Cascading Style Sheets

1
HTML Cascading Style Sheets

• 2007-03-19

2
HTML 4

• HTML returns to its roots as a structural
  language
• CSS1 is for style and positioning attributes of
  content
• CSS1 separates style rules from the structured
  content to which they apply

3
XHTML

• XHTML
• Extensible HTML
• CSS HTML XML
• XML
• Extends the capabilities of HTML
• SVG
• Scalable vector graphics

4
Converting HTML to XHTML

• No overlapping tags
• Close all containers
• Use a space and slash in empty tags
• Tags and attributes must be lower case
• Place attribute values in quotes
• Use id and name together (except radio buttons
• Dont use HTML comments in script or style
  containers

5
Validate Your HTML

• For best results the HTML code must be accurate
• HTML TIDY
• www.w3c.org
• Validation service
• Validator.23.org/file-upload.html

6
Style Rules

• Create your own rules about formatting
• Allows you to
• Change fonts
• Change colors
• Change placement of elements

7
Inline Style Changes

• Done in the actual html file
• Bad tags
• Old HTML
• Hard to enforce uniformly

8
Creating Your Own Style Rules

• Without CSS, the Web browser uses its own
  internal style sheet
• To use CSS you must construct a set rules to
  indicate how to display each HTML element
• A CSS rule consists of a selector and a
  declaration
• Style definitions go in the head-section

9
Style Rule Examples

• h1, h2, h3
• font-family arial, sans-serif
• color blue
• text-align center
• p font-family times new roman, serif
• color red
• text-align left

10
ID Selectors

• Sometimes it makes sense to create a style rule
  that applies only to a specific division within
  the document
• Head
• mycolor (colorsilver)
• Body

11
Pseudo-Classes

• not a structure in HTML
• To overwrite defaults use style rules
• alink colorblue / unvisited links /
• avisited colorblack
• aactivie colorgreen
• ahover colorred

12
Pseudo-Elements

• Drop Cap
• Popular typographical effect
• Style Sheet
• p.dropcapfirst-letter font-size 300
  floatleft colorred
• Body

13
Placing Style Sheets

• Inline style sheet
• some text
• Use only in rare circumstances
• Internal style sheet
• Header section
• External style sheet
• Separate file
• Browser defaults

14
Precedence of Style

• Cascading Style Sheets
• Local
• Inline
• Internal
• External
• Browser

15
Style Sheet uses

• Internal style sheet
• Single page of content
• External style sheet
• Better manage large sites with many pages
• Create separate file with CSS rules
• Add link to CSS in header of document
• hrefmystylesheet.css

16
Importing a Style Sheet

• Can be used to put one external CSS file in
  another.
• _at_import url(default.css)
• _at_import url(headers.css)

17
Example External CSS

• body backgoundwhite colorblack
• alink colorblue
• avisited colorblack
• aactive colorgreen
• ahover colorred
• h1,h2, h3 font-familyarial, sans-serif
• b colormaroon

18
CSS2

• CSS2 expands on CSS1
• Adds support for non-pc devices
• PDA, cell-phone, etc
• On personal computers it adds content positioning
• You can position each element precisely on the
  screen
• Reduces the need to produce graphics simply to
  display highly stylized tex

19
Div/span tags

• Div creates distinct zones in the document
• Can apply style definition to a block of content
• Span further subdivides the Div zones
• Often used to replace of graphics/images
• Can be used in place of frames

20
Dynamic HTML

• CSS 2 makes content positioning more efficient
• You can position each element precisely on the
  screen
• Position property
• Z-dimension
• (See example at end of handout)

21
Element Controls

• Refers to the various parts of an HTML document
• All HTML elements have four sides
• Top, bottom, left and right

22
Element Control Properties

• Width and Height
• Lengths of each side element
• Margin
• Space between the border and other elements
• Border
• Line around the element
• Padding
• Space between border and the content
• Content Background
• Center of the box

23
Visibility Property

• To hide any elemet
• Style Sheet
• .hidden visibility hidden
• Document
• have you heard the rumor about Wonder Woman
  dating invisible
  man?

24
Overflow Property

• Specify the width and height of the bounding box
  surrounding any block-level element
• Visible ? show all the content
• Hidden ? clip the text outside the box
• Scroll ? create a scroll box
• Auto ? create a scroll box if needed

25
Overflow Example

• div.withboundaries
• width 200px height 3em
• border thin solid red
• overflow visible
• --------------------------------------------------
  -----------
• A list of Items
  
• Item 1
  
• Item 2
  
• Item 3
  

26
Setting an Elements Border

• Border-style
• Dotted,dashed,solid,double,groove, ridge
• Border-color
• Color, transparent
• On a side
• Border-top 3px dashed 99000
• Border-left 3pt solid 99000

27
HTML 4.0 CSS Javascript Dynamic HTML

• HTML is a markup language used to describe the
  structure of web pages
• CSS is for style
• Javascript add flexibility and interactivity