Cascading Style Sheets

1
Cascading Style Sheets

• Introduction
• WWW 131

2
Cascading Style Sheets

• The World Wide Web Consortium (W3C) became
  concerned after HTML version 3.2 that HTML tags
  were becoming cluttered with too much formatting
  information
• ltfont size 4 color red family serifgt
• So, the W3C planned Cascading Style Sheets as a
  system that would
• separate HTML content from presentation
  (formatting)
• allow designers more control over the look of Web
  pages
• keep HTML universal

3
Cascading Style Sheets

• Cascading Style Sheets, also known as CSS, or
  simply styles, assign several properties at once
  to all of the elements/object/blocks on the page
  marked with a particular tag.

4
Style Sheet Advantages

• Timesaving
• Set style once and apply it wherever desired
• Streamlines editing
• Change the style definition and every applied
  instance will change automatically
• Consistency of design
• The computer applies styles consistently
• More formatting control than HTML tags
• Set such things as line spacing and leading

5
Style Sheet Disadvantages

• Browsers do not support every attribute of style
  sheets accurately
• More difficult to learn than regular HTML
  tags--but worth it!

6
Stylea definition

• a rule defining the appearance of an element on a
  web page
• Example
• h1
• font-size 28px
• color 660000

7
Style sheeta definition

• a series of rules defining appearance of
• a web site
• a web page
• part of a web page
• Example
• ltstyle type"text/css"gt
• h1 font-size 2.4em color 660000
• h2 font-size 2em color 660000
• p font-size 1em color 000000
• lt/stylegt

8
Applying Style Sheets

• There are three types of CSS style rules
• External Style Sheets (linked)
• Embedded (Internal)
• Inline Styles (Local)

9
Style Rule Setup

• h2
• font-weight bold
• color blue

DECLARATION
Left curly bracket
SELECTOR
Property
Colon
Value
Semi-colon
2ndDeclaration
2nd property value pair
Right curly bracket
10
External Style Sheets

• These are used to create styles for all or many
  pages in a website
• To write external style sheets is a four step
  process
• Create a new text document (in Notepad)
• Type style sheet information there
• Save the document with a .css extension (This is
  the external style sheet document)
• Link this exxternal style sheet to the web pages
• Note the external style sheet may contain only
  CSS rules, and no HTML!

11
External Style Sheets

• Example of CSS rules in Notepad document
• body
• font-family "Times New Roman", Times, serif
• font-size 12px
• color 000000
• background-color ffffdd
• background-repeat repeat-x
• h1
• font-family "Times New Roman", Times, serif
• font-size 24px
• color 000099

12
External Style Sheets

• In the ltheadgt section of each HTML page you want
  the style sheet applied, type
• ltlink rel"stylesheet
• type"text/css"
• href"examples.css /gt
• The values for the rel and the type attributes
  are always the same! The href attribute must
  point to the filename (and filepath, if
  necessary) of the .css file.

13
Embedded Style Sheets

• These are used to create styles for a single page
  in a website
• To write embedded style sheets
• Within the head section of the HTML document,
  type a ltstylegt lt/stylegt section.
• Within this section, type the CSS style rules you
  wish
• Each style rule must consist of
• A selector (HTML tag or class) which identifies
  the portions to be styled
• An open curly brace
• The style declaration(s) property value pair(s)
• A closing curly brace
• As with external style sheets, the style section
  may contain only CSS rules, and no HTML!

14
Embedded Style Sheets

• Define internal styles for an entire page
• The opening style tag must be written as follows
  ltstyle type"text/css"gt
• Type the selector whose properties you want to
  define h1, p, .end, etc.
• Type open curly bracket
• Type the declarations (property value pairs)
• Separate each set with a semicolon !
• Type a closing curly bracket
• Repeat for each tag you want to define
• Type the closing tag lt/stylegt

15
Embedded Style Sheet Example

• lthtmlgt
• ltheadgt
• lttitlegtSamplelt/titlegt
• ltstyle type"text/css"gt
• lt!--
• h1, h2
• text-align center
• color red
• p
• text-align justify
• text-indent 8px
• //--gt
• lt/stylegt
• lt/headgt

16
Inline Styles

• These are used to apply styles to individual
  elements of a single web page
• Usually, they override a style rule set in either
  the external or embedded style rules.

17
Inline Styles

• To create an inline style rule
• Within the HTML tag that you want to format, type
  the attribute style style "
• Then type your style declaration(s) for that HTML
  element in property value pair(s)
• To create additional style definitions, type a
  semicolon and another property value combination
• Type the final quotation mark "

18
Inline Styles

• Sample
• ltp style"font-styleitalic font-weightbold"gt

19
Common Problems with CSS

• The term style is
• a tag for embedded style sheets,
• but an attribute for inline styles.
• We do not use an equal sign in CSS. Instead, a
  property is set to a value with a colon
  font-weight bold.
• CSS allows no typographical errors in the names
  of properties or values!
• Dont forget to put a semicolon after every
  property value pair!

20
Remember . . .

• Stylesheets are a powerful feature that
• Save time
• Streamline editing
• Provide consistency in formatting
• Give more formatting control

21
CSS Classes

• We can apply specific styles to the parts of a
  web page which we want without being limited by
  using HTML tags as selectors.
• We do this by dividing HTML elements into
  categories or classes
• ltstylegt
• .caps text-transform capitalize
• lt/stylegt
• ltp class"caps"gtThis paragraph will be
  capitalized automatically.lt/pgt
• ltpgtThis is just a regular paragraph.lt/pgt

22
HTML Tags used with CSS

• ltdivgt
• ltspangt

These tags can be used to create a new element or
isolate a part of an element.
23
The ltdivgt tag

• We use the ltdivgt tag to enclose some part of the
  page (usually more than one paragraph) which is
  not conveniently within any HTML tag selectors
• We can then set the style to all the page content
  between the opening and closing ltdivgt tags.

24
The ltdivgt tag

• The ltdivgt tag may be used as the selector for all
  three types of CSS rules
• External
• Embedded
• Inline

25
The ltdivgt tag

• ltdiv style"font-color green text-decoration
  underline"gt
• lth1gtGreen Headinglt/h1gt
• lth2gtGreen Subheadinglt/h2gt
• ltpgtGreen paragraph. All these are
• before the end div tag.lt/pgt
• lt/divgt
• Note ltdivgt puts line break before and after
  enclosed element

26
The ltspangt tag

• We use the ltspangt tag to select a small portion
  of a page, usually from a single letter to a few
  lines within a paragraph.
• We can then apply specific style rules to those
  parts of the page within the ltspangt tags.
• Note The ltspangt tag does not create line breaks

27
The ltspangt tag

• The ltspangt tag may also be used as the selector
  for all three types of CSS rules
• External
• Embedded
• Inline

28
The ltspangt tag

• .cap
• font-size 200
• font-weight bold
• color yellow
• ltpgtltspan class"cap"gtLlt/spangtorem ipsum dolor sit
  amet, consectetuer adipiscing elit. Donec aliquam
  tortor.lt/pgt

29
Style Sheets Summary

• Three Types
• External Style Sheets (Linked)
• Embedded Style Sheets (Internal)
• Inline Styles (Local)

30
Cascadingthe concept

• Rules styling the same element accumulate

31
Precedence Rule

• This rule puts the cascading in cascading
  style sheets
• Inline
• takes precedence over
• Embedded
• takes precedence over
• External

32
Font styles
You are expected to learn the CSS properties
appearing in red.
33
Font styles

• h1
• font-style italic
• font-variant small-caps
• font-weight 900
• font-size 24px
• font-family Times, "Times New Roman",
  serif

34
Font Color (?)

• The most common error in using CSS is forgetting
  the name of the property which sets font color.
• Unlike the font properties on the preceding
  page, this property does not start with font-!
• The correct name of this property is color
• ltp style color redgtThis text is redlt/pgt
• Font-color will not work!

35
Background styles
You are expected to learn the CSS properties
appearing in red.
36
Background styles

• p
• background-color silver
• background-image
• url(images/logo.gif)
• background-repeat no-repeat
• background-attachment fixed
• background-position center

37
Text styles
38
Text styles
39
List styles