Working with Cascading Style Sheets

1
Tutorial 7

• Working with Cascading Style Sheets

2
Style / Style Sheet

• Style A rule that defines the appearance of an
  element in a document.
• Style Sheet The collection of styles for a web
  page or web site.

3
Cascading Style Sheets

• CSS was developed by the World Wide Web
  Consortium.
• First standard released in 1996.
• Designed to augment HTML, not replace it.

4
Browser Support for CSS

• Internet Explorer CSS introduced in version
  3.0.
• IE probably provides the best support but still
  has bugs
• Netscapes support spotty.
• No browser is fully CSS2-complaint at this point
  in time.

5
Web Sites with Info on CSS
6
Style Types

• Inline Styles Styles are added to each
  individual tag within the HTML file. The style
  affects that particular tag, but does not affect
  other tags in the document.
• Embedded or Global Styles A style is applied to
  the entire HTML file.
• Linked or External Style Sheets Text file
  containing the style declaration. HTML file is
  linked to the separate text file.

7
What style type to choose

• Inline Style If you need to format just a
  single section in your web page.
• Embedded or global style If you need to modify
  all instances of a particular element (say, all
  H1 headers) in a web page.
• Linked style sheet If you need to control the
  style for an entire web site.

8
Inline Styles

• Syntax
• lttag STYLEstyle declarationsgt
• Tag is the name of the tag, ie H1, P, etc.
• Style declarations are the styles you define
  for that particular tag.
• Style declaration must be enclosed in double
  quotes.

9
Style Declarations

• A style declaration consists of attribute names
  that control features followed by a colon and
  then the attributes value.
• Multiple attributes can be used as long as they
  are separated each one by a semicolon
• Attribute1value1 attribute2value2

10
Creating an Embedded Style

• Syntax
• ltSTYLE TYPEstyle sheet languagegt
• style declarations
• lt/STYLEgt
• Style sheet language identifies the type of style
  language used in the document.
• Most common language (and the default) is
  text/css

11
Selectors and Declarations

• Style declarations with the ltSTYLEgt tags must use
  the following syntax
• selector attributevalue1 attribute2value2
• Selector identifies the element and the
  attributes and values within the curly brackets
  indicate the types applied to all occurrences of
  that element.

12
Grouping Selectors

• The same declaration can be applied to a group of
  selectors by including all of the selector names
  separated by commas.
• Syntax
• ltSTYLEgt
• H1, H2, H3 colorgold font-familysans-serif
• lt/STYLEgt

13
External Style Sheet

• Create a blank text document
• Insert style declarations
• Save as .css
• For each HTML file that style will apply, insert
  following in the ltHEADgt section
• ltLINK REFURL RELrelation_type
  TYPElink_typegt
• URL is the URL or file name of the style sheet
• Relation_type equals stylesheet
• Link_type equals text/css

14
Resolving Style Precedence

• Web browsers determine how to apply various
  styles in the event of a conflict in the
  following order
• An inline style has precedence over any embedded
  style and over any external style sheet
• An embedded style has precedence over an external
  style sheet.
• An external style sheet has precedence over the
  internal style rules set by the web browser.
• Any style attributes left undefined by an inline
  style, an embedded style, or an external style
  sheet are left to the web browser.

15
Setting Font and Text Attributes

• CSS works with two types of font faces.
• Specific font is a font such as Arial, Garamond
  or Times New Roman that is actually installed on
  the users computer.
• Generic font is a general description of a font
  type.

16
Five Generic Font Types

• Serif
• Sans-serif
• Monospace

• Cursive
• Fantasy

17
Pros and Cons of Specific and Generic Fonts

• With generic fonts you cannot be sure which
  specific font the web browser will ultimately use
  to display your text.
• It is better to use a Specific font.
• When using a Specific Font, give the Web Browser
  several to choose from and end the list with a
  Generic Font name which will used only in as a
  last resort if none of the Specific Fonts are
  found.

18
Style Declaration Syntax

• BODY font-family Times Roman, Century
  Schoolbook, serif
• Tells browser to display body text in a Times
  Roman font. If this font is not available on the
  users machine, the browser will look for Century
  Schoolbook and if that font is missing, will use
  whatever serif font is available.

19
Managing Font Size

• In CSS, you use the font-size attribute to manage
  font sizes. There are four ways of expressing the
  value of this attribute
• As a unit of length
• Using a keyword description
• As a percentage of the parent element
• Using a keyboard expressing the size relative to
  the parent element

20
Absolute Units

• Absolute units Define the font size based on a
  standard unit of measurement. Size values can be
  whole numbers (0, 1, 2) or fractions (0.5, 1.6,
  3.9).
• You can use the the following units
• mm (millimeter)
• cm (centimeter)
• in (inch) H1 font-size 0.5in
• pt (point) H1 font-size 36pt
• pc (pica) H1 font-size 3pc

21
Relative Units

• One that express the font size relative to the
  size of a standard character.
• There are two standard typesetting characters
• Em unit is equal to the width of the capital
  letter M in the default font used by the
  browser
• Ex unit is equal to the height of a small x in
  the default font.

22
EM and EX Units

• Scalable in that they can be used under any
  monitor size or resolution and retain their
  relative proportions
• Syntax H1 font-size 2em

23
Pixel Unit of Measurement

• Entered with the unit abbreviation px
• Smallest display element on your computer
  monitor.
• Syntax
• H1 font-size 20px

24
Font Size as a Percentage of Parent Tag
25
Letter Spacing

• To control space between individual letters, use
  letter-spacing attribute
• letter-spacing size
• Size can have a value of normal which allows
  browser to determine the letter spacing based on
  the font being used or
• Value can be expressed inches, millimeters,
  centimeters, em units, etc.

26
Line Height

• Used to modify the vertical space between the
  lines of text.
• Line-height specifies the minimum distance
  between the baseline of the adjacent lines.
• Syntax
• Line-heightsize
• Size is either a specific length, a percentage of
  the font size or a number representing the ratio
  of the line height to the font size.

27
Example of Line-Height
28
Word Spacing

• Used to define the space between individual
  words
• Syntax
• word-spacingsize
• Size is the space between individual words.

29
Aligning Text

• Text align attribute is used to align text
  horizontally or vertically.
• Syntax
• text-alignalignment
• Alignment can be left, center, right or justify.
• Setting text to justify stretches the text,
  extending it from the left to the right margin
• Not all browsers interpret justify in the same
  way Some will ignore this value altogether

30
Values of Vertical Alignment Attribute
31
Examples of Vertical Alignment Values
32
Indenting Text

• CSS allows indenting of first line of a
  paragraph.
• Syntax
• text-indentindentation
• Indentation is either the length (in either
  absolute or relative units) of the indentation or
  a percentage of the width of the paragraph.
• Length and percentage values can be negative
  which causes a hanging indent.

33
Special Text Attributes

• CSS provides three attributes for special text
  effects
• text-decoration
• text-transform
• font-variant

34
Values of Text-Decoration Attribute
35
Values of Text-Transform Attribute
36
Values of Font-Variant Attribute
37
Working with Color

• Color Attribute
• body colorteal
• body color008080
• body colorrgb(0, 128, 128)
• body colorrgb(0, 50 50)

38
Working with Background Images

• Background images can be applied to an entire
  page or to any element on a page.
• Four attributes of the background that can be
  controlled are
• The image file used
• How the image is repeated in the background
• Where the image is placed on the background
• Whether the image scrolls with the display window
• Syntax background-imageurl(image)

39
Controlling Tiling of Image

• To control how the image is tiled over the
  background use the following syntax
• Background-repeat repeat_value
• Repeat_value is either repeat, repeat-x, repeat-y
  or none.

40
Values of Background-Repeat Attribute
41
Examples of Background-Repeat Values
42
Background-Position

• Used to place an image in a specific position on
  the background.
• Syntax
• Background-position horizontal_position
  vertical_position
• Horizontal_position and vertical_position can be
  expressed as the horizontal and vertical distance
  from the upper-left corner of the background,
  using either length, percentage or one of the
  following top, center, bottom, right or left.

43
Background-Position Keywords and Percentages
44
Background-attachment

• Specifies whether the image scrolls with the
  element.
• Syntax
• Background-attachment attach
• Attach equals scroll to allow the image to
  scroll along with the background or fixed which
  prevents the images from scrolling.

45
Formatting Block-Level Element Boxes

• A few of the HTML tags that can be treated as
  block-level elements
• The ltH1gt - ltH6gt tags
• The ltPgt tag
• The ltBLOCKQUOTEgt and ltADDRESSgt tags
• The ltUL, ltOLgt and ltDLgt List tags
• The ltBODYgt tag
• The ltHRgt tag
• The ltIMGgt tag

46
Parts of the Block-Level Element Box

• Three elements
• The margin between the box and the parent element
• The border of the box
• The padding, which is the space between the box
  around the block-level element and the border.

47
Features of the Box Around a Block-Level Element
48
Controlling Margins

• Four attributes that control the size of the
  margin are
• margin-top the space between the top of the box
  and the top margin
• margin-right the space between the right side
  of the box and the right margin
• margin-bottom the space between the bottom of
  the page and the bottom margin
• margin-left the space between the left side of
  the box and the left margin.

49
Setting Padding Size

• Padding is useful for relieving the crowding
  around your elements.
• Four attributes control the size of the padding
  space
• padding-top
• padding-right
• padding-bottom
• padding-left

50
Formatting the Border

• CSS provides a wide variety of attributes for
  managing the box border
• Not all are supported by major browsers

51
Values of Border Attributes
52
Examples of Border Values
53
Using the Float Attribute

• Normally, when your browser retrieves a web page,
  it lays out all of the block-level elements, one
  after another on the page, with the exact
  positions determined by the elements width,
  margin and padding.
• CSS allows you to override the browser and place
  each block-level in a specific location on the
  page.

54
Floating Block-Level Element
55
Using the Clear Attribute