Using Cascading Style Sheets CSS Basics - PowerPoint PPT Presentation


PPT – Using Cascading Style Sheets CSS Basics PowerPoint presentation | free to download - id: 68b72b-MDM2M


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Using Cascading Style Sheets CSS Basics


Using Cascading Style Sheets CSS Basics – PowerPoint PPT presentation

Number of Views:40
Avg rating:3.0/5.0
Date added: 2 April 2020
Slides: 26
Provided by: RobertM234


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

Title: Using Cascading Style Sheets CSS Basics

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

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

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

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

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

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

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

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

Length Units
  • 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
  • Refer to appendix/resource for information on
    assigning colors with the RGB color system