Chapter 6 Cascading Style Sheets CSS

1
Chapter 6 - Cascading Style Sheets (CSS)
Outline 6.1 Introduction 6.2 Inline
Styles 6.3 Embedded Style Sheets 6.4
Conflicting Styles 6.5 Linking External Style
Sheets 6.6 W3C CSS Validation Service 6.7
Positioning Elements 6.8 Backgrounds 6.9
Element Dimensions 6.10 Text Flow and the Box
Model
2
Objectives

• In this lesson, you will learn
• To control the appearance of a Web site by
  creating style sheets.
• To use a style sheet to give all the pages of a
  Web site the same look and feel.
• To use the class attribute to apply styles.
• To specify the precise font, size, color and
  other properties of displayed text.
• To specify element backgrounds and colors.
• To understand the box model and how to control
  the margins, borders and padding.
• To use style sheets to separate presentation from
  content.

3
6.1  Introduction

• Cascading Style Sheets (CSS)
• Separation of structure from presentation

4
6.2  Inline Styles

• Declare an individual elements format
• Attribute style
• CSS property
• Followed by a colon and a value
• lttag style"propertyvalue propertyvalue
  ..."gt
• tag can be
• p, div, span, a, table, tr, td, etc.
• property can be
• background-color value can be colorname or
  hexvalue
• font-family value can be sans-serif, cursive,
  fantasy, etc
• font-size value can be number in pixels or
  percentage n

5
inline.html(1 of 2)
6
inline.html(2 of 2)
7
(No Transcript)
8
6.3  Embedded Style Sheets

• Embed an entire CSS document in an XHTML
  documents head section
• ltstyle type"text/css"gt  selector
  propertyvalue propertyvalue ...  ...
  lt/stylegt
• selector is the tag name to which style
  declarations (properties and values) are assigned

9
(No Transcript)
10
declared.html(1 of 3)
11
declared.html(2 of 3)
12
declared.html(3 of 3)
13
6.4  Conflicting Styles

• Inheritance
• Descendants properties have greater specificity
  than ancestors properties

14
CSS Syntax

• From (go to the link and read in details)
• http//www.w3schools.com/css/css_syntax.asp
• General syntax discussed earlier
• selector property value
• The selector is normally the HTML element/tag you
  wish to define
• The property is the attribute you wish to change

15
Grouping

• You can group selectors.
• Separate each selector with a comma.
• In the example below we have grouped all the
  header elements. All header elements will be
  displayed in green text color
• h1,h2,h3,h4,h5,h6
• color green

16
The Class Selector

• With the class selector you can define different
  styles for the same type of HTML element.
• p.right text-align right
• p.center text-align center
• You have to use the class attribute in your HTML
  document
• ltp class"right"gt
• This paragraph will be right-aligned.
• lt/pgt
• ltp class"center"gt
• This paragraph will be center-aligned.
• lt/pgt

17
The Class Selector

• You can also omit the tag name in the selector to
  define a style that will be used by all HTML
  elements that have a certain class .
• .center text-align center
• In the code below both the h1 element and the p
  element will follow the rules in the ".center"
  selector  
• lth1 class"center"gt
• This heading will be center-aligned
• lt/h1gt
• ltp class"center"gt
• This paragraph will also be center-aligned.
• lt/pgt

18
Anchor Pseudo-classes

• A link that is active, visited, unvisited, or
  when you mouse over a link can all be displayed
  in different ways in a CSS-supporting browser
• alink color FF0000 / unvisited link /
  avisited color 00FF00 / visited link /
  ahover color FF00FF / mouse over link /
  aactive color 0000FF / selected link /
• Note ahover MUST come after alink and
  avisited in the CSS definition in order to be
  effective!!
• Note aactive MUST come after ahover in the CSS
  definition in order to be effective!!

19
CSS Pseudo-elements

• Make the first letter special
• Make the first line special
• css_firstline_letter.html

20
The id Selector

• You can also define styles for HTML elements with
  the id selector. The id selector is defined as a
  .
• The style rule below will match the element that
  has an id attribute with a value of "green"
• green color green
• The style rule below will match the p element
  that has an id with a value of "para1"
• ppara1
• text-align center
• color red

21
CSS Classification

• The CSS classification properties allow you to
  specify how and where to display an element.
• CSS classification properties
• clear
• Sets the sides of an element where other floating
  elements are not allowed
• cursor
• Specifies the type of cursor to be displayed
• display
• Sets how/if an element is displayed
• float
• Sets where an image or a text will appear in
  another element
• position
• Places an element in a static, relative, absolute
  or fixed position
• visibility
• Sets if an element should be visible or invisible

22
CSS Classification Examples

• cursor
• class_cursor.html
• display
• css_display.html
• visibility
• visibility_collapse.html

23
(No Transcript)
24
advance.html(1 of 3)
25
advance.html(2 of 3)
26
advance.html(3 of 3)
27
6.5  Linking External Style Sheets

• External style sheets
• Can provide uniform look and feel to entire site

28
styles.css(1 of 1)
29
external.html(1 of 2)
30
external.html(2 of 2)
31
6.6  W3C CSS Validation Service

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

32
6.6  W3C CSS Validation Service
Fig. 6.6 Validating a CSS document. (Courtesy of
World Wide Web Consortium (W3C).)
33
6.6  W3C CSS Validation Service
Fig. 6.7 CSS validation results. (Courtesy of
World Wide Web Consortium (W3C).)
34
6.7  Positioning Elements

• Absolute positioning
• z-index attribute
• Layer overlapping elements properly
• Relative positioning
• Elements are positioned relative to other elements

35
(No Transcript)
36
positioning.html(1 of 1)
37
(No Transcript)
38
positioning2.html(1 of 2)
39
positioning2.html2 of 2
40
(No Transcript)
41
6.8  Backgrounds

• background-image
• Specifies the image URL
• background-position
• Places the image on the page
• background-repeat
• Controls the tiling of the background image
• background-attachment
• fixed
• scroll
• font-weight
• Specify the boldness of text

42
(No Transcript)
43
background.html(1 of 2)
44
background.html(2 of 2)
45
(No Transcript)
46
6.9  Element Dimensions

• CSS rules can specify the actual dimensions of
  each page element

47
width.html(1 of 2)
48
width.html(2 of 2)
49
6.10  Text Flow and the Box Model

• Floating
• Move an element to one side of the screen
• Box model
• Margins
• margin-top, margin-right, margin-left,
  margin-bottom
• Padding
• padding-top, padding-right, padding-left, and
  padding-bottom
• Border
• border-width
• thin, medium, thick
• border-color
• Sets the color
• border-style
• none, hidden, dotted, dashed, solid, double,
  groove, ridge, inset and outset

50
(No Transcript)
51
(No Transcript)
52
floating.html(1 of 3)
53
floating.html(2 of 3)
54
floating.html(3 of 3)
55
6.10  Text Flow and the Box Model
Fig. 6.13 Box model for block-level elements.
56
borders.html(1 of 2)
57
borders.html(2 of 2)
58
(No Transcript)
59
borders2.html(1 of 2)
60
borders2.html(2 of 2)
61
(No Transcript)
62
(No Transcript)
63
(No Transcript)