Using Cascading Style Sheets CSS Basics

1
Using Cascading Style SheetsCSS Basics
2
Goals

• Understand basic syntax of Cascading Style Sheets
  (CSS)
• Understand the differences among inline, internal
  and external style sheets
• Understand how to declare a style
• Understand how to attach specify values

3
Introduction to Styles and Properties

• To ensure that future Web page authoring
  separates the definition of the elements in a
  document from how they appear, many of the
  display and formatting extensions that were added
  to the HTML language, such as the ltfontgt element,
  were deprecated in HTML 4.0 and in XHTML 1.0 in
  favor of CSS

4
Introduction to Styles and Properties

• Cascading Style Sheets (CSS) are a standard set
  by the World Wide Web Consortium (W3C) for
  managing the design and formatting of Web pages
  in a Web browser

5
Introduction to Styles and Properties

• A single piece of CSS formatting information,
  such as text alignment or font size, is referred
  to as a style
• Some of the style capabilities of CSS include the
  ability to change fonts, backgrounds, and colors,
  and to modify the layout of elements as they
  appear in a Web browser

6
Introduction to Styles and Properties

• CSS information can be added directly to
  documents or stored in separate documents and
  shared among multiple Web pages
• The term cascading refers to the Web pages
  ability to use CSS information from more than one
  source

7
CSS Properties

• CSS styles are created with two parts separated
  by a colon the property, which refers to a
  specific CSS style, and the value assigned to it,
  which determines the styles visual
  characteristics
• Together, a CSS property and the value assigned
  to it are referred to as a declaration or style
  declaration

8
CSS Properties
9
Common CSS Properties
10
CSS Properties

• The properties available in CSS1 are grouped into
  the following categories
• Color and background properties
• Font properties
• Text properties
• Box properties
• Classification properties

11
CSS Properties

• CSS recommendation, Level 2 (CSS2) was released
  in 1998
• CSS2 builds on the properties in CSS1 and
  includes new features such as table properties
  and the ability to change the appearance of the
  mouse pointer

12
Inline Styles

• The most basic method of applying styles is to
  use inline styles, which allow you to add style
  information to a single element in a document

13
Inline Styles

• You use the style attribute to assign inline
  style information to an element
• You assign to the style attribute a property
  declaration enclosed in quotation marks

14
CSS Values

• The values you can assign to a CSS property
  depend on what type of property it is
• Some properties can be assigned a range of values

15
CSS Values

• For instance, you can assign any font name that
  is available on a users system to the
  font-family property
• For other properties, you must assign a value
  from a specific set of values

16
Length Units

• Length units refer to the units of measure that
  you can use in a style declaration to determine
  the size or positioning of an element
• Whether a length unit is used for sizing or
  positioning depends on the property and the
  element to which it is assigned

17
Length Units

• You assign a measurement value to a property by
  assigning the number that represents the
  measurement, immediately followed by the unit of
  measure

18
CSS Length Units
19
Length Units

• CSS length units are either absolute or relative
• Absolute length units use an exact measurement to
  specify the size or placement of an element

20
Length Units

• The following CSS length units are absolute
• cm (centimeters)
• in (inches)
• mm (millimeters)
• pc (picas)
• pt (points)

21
Length Units

• Relative length units are preferred because they
  adjust properties according to screen size or
  user preferences
• The following CSS length units are relative
• em (em space)
• ex (x-height)
• px (pixels)

22
Percentage Units

• An alternative to relative length units is
  percentage units, which adjust properties
  relative to other values
• You assign a percentage unit value to a property
  by assigning a number that represents the
  percentage, immediately followed by the percent
  symbol ()

23
Color Units

• A color unit represents a color value that you
  can assign to a property
• You can assign a color unit to a property using
  any one of 16 color names defined in the CSS1
  specification

24
Color Units
25
Color Units

• Most graphical computer systems use the RGB color
  system for specifying colors
• You can also assign a color using the RGB color
  system
• Refer to appendix/resource for information on
  assigning colors with the RGB color system