CSS Properties by alicejenny

VIEWS: 5 PAGES: 58

									Cascading Style Sheets

       Chapter 8




          XHTML          1
                  Objectives

In this chapter, you will:

• Study basic Cascading Style Sheet (CSS) syntax

• Work with internal and external style sheets

• Learn about CSS values




                          XHTML                    2
                  Objectives
• Set color and background properties

• Set text properties

• Set font properties

• Validate style sheets




                          XHTML         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
  <font> element, were deprecated in HTML 4.0 and in
  XHTML 1.0 in favor of CSS

• 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


                           XHTML                           4
    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
• CSS information can be added directly to documents
  or stored in separate documents and shared among
  multiple Web pages


                          XHTML                           5
    Introduction to Styles and
           Properties
• The term “cascading” refers to the Web
  pages’ ability to use CSS information from
  more than one source
  – External

  – Internal

  – Inline



                      XHTML                    6
            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 style’s
  visual characteristics
• Together, a CSS property and the value
  assigned to it are referred to as a declaration
  or style declaration


                       XHTML                      7
CSS Properties




      XHTML      8
Common CSS Properties




         XHTML          9
                CSS Properties
• You can find a listing of CSS1 properties in Appendix D
• The properties available in CSS1 are grouped into the
  following categories:
   – Color and background properties
   – Font properties
   – Text properties
   – Box properties
   – Classification properties

                                 XHTML                10
              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
• At the time of this writing, no Web browser provides
  complete support for the properties available in CSS2



                          XHTML                           11
                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

• 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


                         XHTML                         12
                 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
• For instance, you can assign any font name that is
  available on a user’s system to the font-family
  property
• For other properties, you must assign a value from a
  specific set of values

                         XHTML                           13
                 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
• You assign a measurement value to a property by
  assigning the number that represents the
  measurement, immediately followed by the unit of
  measure

                          XHTML                         14
CSS Length Units




       XHTML       15
                   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
• The following CSS length units are absolute:
   – cm (centimeters)
   – in (inches)
   – mm (millimeters)
   – pc (picas)
   – pt (points)
                          XHTML                      16
                   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)

                        XHTML                      17
             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 (%)




                          XHTML                         18
                   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




                            XHTML                          19
                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 D for information on assigning
  colors with the RGB color system


                       XHTML                     20
             CSS Structure

• You now understand the basics of working
  with CSS


• You will now learn how to structure the CSS
  used by your documents



                     XHTML                      21
         Internal Style Sheets
• You use an internal style sheet to create styles
  that apply to an entire document

• You create an internal style sheet within a
  <style> element placed within the document
  head

• The <style> element must include a type
  attribute, which is assigned a value of “text/cs”


                         XHTML                        22
        Internal Style Sheets
• Within the <style> element you create any
  style instructions for a specific element that
  are applied to all instances of that element
  contained in the body of the document
• The element to which specific style rules in a
  style sheet apply is called a selector




                       XHTML                       23
Internal Style Sheets




         XHTML          24
         Contextual Selectors
• A contextual selector allows you to specify
  formatting for an element, but only when it is
  contained within another element
• You create a contextual selector by including
  two or more selectors in a declaration within a
  <style> element separated by spaces
  p em{color:red}
  p{color:blue}

                       XHTML                       25
                Class Selectors
• Another method of applying styles is to use class
  selectors, which allow you to create different groups
  of styles for the same element
• You create a class selector within a <style>
  element by appending a name for the class to a
  selector with a period
   – tr.blue {color:white; background-color:blue}

• You then assign the class name to the standard
  class attribute of elements in the document that you
  want to format with the class’s style definitions

                              XHTML                   26
Class Selectors




      XHTML       27
                    ID Selectors
• An ID selector is similar to an inline style in that it allows
  you to create style declarations that are only applied to a
  single element in the document
• As with inline styles, you use an ID selector when you
  want to change the style of a single element on your Web
  page
   – #p1 {font-family: verdana; color: blue}

• The benefit to using ID selectors over inline styles is that
  they allow you to maintain all of your style declarations in
  a single location within the <style> element, as opposed
  to inline style declarations, which you must create within
  each element
                               XHTML                               28
         External Style Sheets
• External style sheets are separate text documents
  containing style declarations that are used by multiple
  documents on a Web site
• You should create an external style sheet whenever
  you need to use the same styles on multiple Web
  pages on the same site
• You create an external style sheet in a text editor, the
  same as when you create XHTML documents
• However, you should save the document with an
  extension of .css
                           XHTML                         29
          External Style Sheets
• The most popular way of accessing the styles in an
  external style sheet is to use the empty <link> element
  to link a document to a style sheet
• You place the <link> element in the document head
• You include three attributes in the <link> element: an
  href attribute that is assigned the Uniform Resource
  Locator (URL) of the style sheet, an rel attribute that is
  assigned a value of “stylesheet” to specify that the
  referenced file is a style sheet, and the type attribute,
  which is assigned the same “text/css” value as the type
  attribute used in the <style> element
                             XHTML                             30
      The <div> and <span>
            Elements
• The <div> element formats a group of
  block-level and inline elements with styles,
  whereas the <span> element formats a
  group of inline elements
• The only difference between these two
  elements is that the <div> element can
  contain block-level elements and also adds a
  line break after its closing tag


                       XHTML                     31
                Cascading Order
•   CSS uses an order of precedence to determine
    which styles to apply when a selector is formatted in
    different sources
•   The least important style formatting is the browser’s
    default style settings
•   The cascading order of precedence for styles,
    starting with the least important to the most
    important, is as follows:
    1. Browser default
    2. External style sheets
    3. Internal style sheets
    4. Inline styles
                               XHTML                        32
Setting Color and Background
          Properties
• The color property sets the text color of an
  element
• Background properties set the background
  color or image that appears behind an
  element




                      XHTML                      33
  Foreground and Background
            Color
• The color you apply with the color element is referred
  to as the foreground color

• Another type of color you can add to elements is
  background color, which you create with the
  background-color property

• The foreground color that is applied to an element’s
  text appears on top of an element’s background color


                          XHTML                        34
 Foreground and Background
           Color
• The W3C strongly recommends that
  whenever you use the color property, you
  also include the background-color
  property to ensure that the foreground color
  text is placed on a suitable background
• In order to set background properties for the
  Web page itself, you declare them for the
  <body> element


                      XHTML                       35
        Background Images
• To set an image to appear as the document
  background, you use the background-
  image property and assign to it a URL using
  the format url (url)




                     XHTML                      36
Background Images




       XHTML        37
   The background Shorthand
           Property
• Several of the property categories include a special
  property called a shorthand property that allows
  you to set all of the properties in a category using one
  declaration

• The shorthand property for the background properties
  category is the background property

• Many of the properties for each category have unique
  values that are assigned to them

                           XHTML                        38
  The background Shorthand
          Property
• The background-attachment property
  can be assigned the values “scroll” or “fixed”;
  neither of these values can be assigned to
  any other background property




                       XHTML                    39
       Setting Text Properties
• You use text properties to specify the placement and
  appearance of text
• The difference between text properties and font
  properties is that text properties do not change the
  appearance of an element’s font
• Text properties adjust visual aspects such as word
  and letter spacing, text alignment, indentation, and so
  on



                          XHTML                          40
CSS1 Text Properties




         XHTML         41
    Word and Letter Spacing
• Word spacing refers to the amount of space
  between words, whereas letter spacing refers
  to the amount of space between letters
• You set word spacing with the word-
  spacing property and letter spacing with the
  letter-spacing property




                     XHTML                   42
             Text Decorations
• The text-decoration property modifies the
  appearance of text by adding the following
  “decorations” to the text: none, underline, overline,
  line-through, and blink

• An underline value underlines the text, an overline
  value places a line over the text, and a line-through
  value places a line through the text, the same as the
  <del> element

                           XHTML                          43
         Text Decorations
• One of the more common uses of the text-
  decoration property is to turn off the
  underline that appears beneath links for
  design purposes




                    XHTML                    44
                  Line Height
• By default, the line height in a document is set to
  single-space
• You use the line-height property to change the
  default line of an element from single-spacing to
  something else
• The line-height property can accept a length unit
  or percentage unit value
• If you use a length unit, be sure to use a relative unit
  such as ems or a percentage unit


                           XHTML                             45
                    Indenting
• The text-indent property indents the first line of a
  paragraph according to the value you specify
• You may be tempted to use an absolute
  measurement such as inches or centimeters with the
  text-indent property
• Be sure to use a relative length unit or a percentage
  unit in order to allow the indent to scale according to
  the element’s font




                           XHTML                            46
              Text Alignment
• You have seen how to align text horizontally using
  the text-align property
• Although the examples you have seen have been
  with inline styles, you can also use the text-align
  property with selectors
• The vertical-align property is a little more
  complicated in that it changes the vertical alignment
  of an element in relation to its parent element


                          XHTML                           47
            Text Alignment
• One common use of the vertical-align
  property is to adjust the position of images,
  such as toolbar buttons, that are placed
  inside a line of text




                       XHTML                      48
Setting Font Properties




          XHTML           49
                    Font Name
• The font-family property is a critical font property
  because it sets the font that an element displays

• When you select a font for an element, be sure to use a
  font that you know is installed on a user’s computer

• Your best bet is to assign a list of font names to the
  font-family property, separated by commas

• Generic font families represent the five major font families
  available in typography: serif, sans serif, cursive, fantasy,
  and monospace

                             XHTML                            50
                    Font Size
• You have seen examples of how to specify font size
  using the font-size property
• When specifying font size, be sure to use a relative
  length unit such as ems or a percentage unit
• Alternately, you can use one of the following
  predefined values to set font size: xx-small, x-small,
  small, medium, large, x-large, xx-large, smaller, or
  larger


                           XHTML                           51
Font Size




   XHTML    52
            Font Appearance
• In addition to the font family and the font size,
  you can change the appearance of a font using
  the font-style, font-variant, and font-
  weight properties

• The font-style property allows you to make
  text italicized or oblique, which is a slanted font,
  similar to an italicized font


                          XHTML                          53
   The font Shorthand Property
• Using the font shorthand property, you can set values for all of
  the font properties in a single declaration
• The values for the font property must be set in the following
  order:
    – font-style (optional)
    – font-weight (optional)
    – font-variant (optional)
    – font-size (required)
    – line-height (optional)
    – font-family (required)

                               XHTML                              54
       Validating Style Sheets
• The W3C offers a utility, the W3C CSS Validation
  Service, for validating CSS code

• The W3C CSS Validation Service upload is primarily
  used for external style sheets

• You can download a copy of the utility or validate
  your CSS code online, the same as you validate
  XHTML code with the W3C Markup Validation
  Service

                          XHTML                        55
                   Summary
• Cascading Style Sheets (CSS) are a standard set by
  the W3C for managing the design and format of Web
  pages in a Web browser
• The term cascading refers to the Web pages’ ability
  to use CSS information from more than one source
• A CSS property and the value assigned to it are
  referred to as a declaration or style declaration



                          XHTML                         56
                    Summary
• Inline styles allow you to add style information to a
  single element in a document
• Percentage units adjust properties relative to other
  values
• External style sheets are separate text documents
  containing style declarations that can be used by
  multiple documents on a Web site
• Background properties set the background color or
  image that appears behind an element

                           XHTML                          57
                   Summary
• Several of the property categories include a special
  property called a shorthand property that allows you
  to set all of the properties in a category using one
  declaration

• You use font properties to specify the typeface, size,
  and style of an element’s text




                          XHTML                            58

								
To top