Cascading Style Sheets (CSS) Basics - PowerPoint PPT Presentation


PPT – Cascading Style Sheets (CSS) Basics PowerPoint presentation | free to download - id: 43a137-OTgyM


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Cascading Style Sheets (CSS) Basics


Using Cascading Style Sheets Foreground and Background Color The color you apply with the color element is referred to as the foreground color Another type of color ... – PowerPoint PPT presentation

Number of Views:185
Avg rating:3.0/5.0
Slides: 59
Provided by: AnthonyG3


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Cascading Style Sheets (CSS) Basics

Cascading Style Sheets (CSS) Basics
  • Using Cascading Style Sheets

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

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
  • The term cascading refers to the Web pages
    ability to use CSS information from more than one

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

CSS Properties
Common CSS Properties
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
  • 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

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

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

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

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

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

CSS Length Units
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)

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)

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 ()

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

Color Units
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 or Headeximel

Cascading Style Sheets (CSS) Structure
  • Using Cascading Style Sheets

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
    ltstylegt element placed within the document head
  • The ltstylegt element must include a type
    attribute, which is assigned a value of
  • Within the ltstylegt 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

Internal Style Sheets
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
    ltstylegt element separated by spaces

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 ltstylegt
    element by appending a name for the class to a
    selector with a period
  • You then assign the class name to the standard
    class attribute of elements in the document that
    you want to format with the classs style

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
  • As with inline styles, you use an ID selector
    when you want to change the style of a single
    element on your Web page

ID Selectors
  • 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 ltstylegt element, as opposed to inline
    style declarations, which you must create within
    each element

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

External Style Sheets
  • You create an external style sheet in a text
    editor, the same as when you create HTML
  • However, you should save the document with an
    extension of .css
  • The most popular way of accessing the styles in
    an external style sheet is to use the empty
    ltlinkgt element to link a document to a style
  • You place the ltlinkgt element in the document head

External Style Sheets
  • You include three attributes in the ltlinkgt
  • The href attribute that is assigned the Uniform
    Resource Locator (URL) of the style sheet
  • The rel attribute that is assigned a value of
    stylesheet to specify that the referenced file
    is a style sheet
  • The type attribute, which is assigned the same
    text/css value as the type attribute used in
    the ltstylegt element

The ltdivgt and ltspangt Elements
  • The ltdivgt element formats a group of block-level
    and inline elements with styles, whereas the
    ltspangt element formats a group of inline elements
  • The only difference between these two elements is
    that the ltdivgt element can contain block-level
    elements and also adds a line break after its
    closing tag

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
    browsers default style settings

Cascading Order
  • The cascading order of precedence for styles,
    starting with the least important to the most
    important, is as follows
  • Browser default
  • External style sheets
  • Internal style sheets
  • Inline styles

Setting Color and Background Properties
  • The color property sets the text color of an
  • Background properties set the background color or
    image that appears behind an element

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
    elements text appears on top of an elements
    background color

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
  • In order to set background properties for the Web
    page itself, you declare them for the ltbodygt

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)

Background Images
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 background Shorthand Property
  • 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

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

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 elements font
  • Text properties adjust visual aspects such as
    word and letter spacing, text alignment,
    indentation, and so on

CSS1 Text Properties
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

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 ltdelgt element

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

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

  • 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 elements font

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

Text Alignment
  • The vertical-align property is a little more
    complicated in that it changes the vertical
    alignment of an element in relation to its parent

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

Setting Font Properties
Font Name
  • The font-family property is a critical font
    property because it sets the font that an element
  • When you select a font for an element, be sure to
    use a font that you know is installed on a users

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
  • 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

Font Size
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
  • The font-style property allows you to make text
    italicized or oblique, which is a slanted font,
    similar to an italicized font

The font Shorthand Property
  • 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)