Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.

Using Cascading Using Cascading Style SheetsStyle SheetsCSS BasicsCSS Basics

GoalsGoals

Understand basic syntax of Cascading Understand basic syntax of Cascading Style Sheets (CSS)Style Sheets (CSS)

Understand the differences among inline, Understand the differences among inline, internal and external style sheetsinternal and external style sheets

Understand how to declare a styleUnderstand how to declare a style Understand how to attach specify valuesUnderstand how to attach specify values

Introduction to Styles and Introduction to Styles and PropertiesProperties

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


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


A single piece of CSS formatting A single piece of CSS formatting information, such as text alignment or font information, such as text alignment or font size, is referred to as a size, is referred to as a stylestyle

Some of the style capabilities of CSS Some of the style capabilities of CSS include the ability to change fonts, include the ability to change fonts, backgrounds, and colors, and to modify backgrounds, and colors, and to modify the layout of elements as they appear in a the layout of elements as they appear in a Web browserWeb browser


CSS information can be added directly to CSS information can be added directly to documents or stored in separate documents or stored in separate documents and shared among multiple documents and shared among multiple Web pagesWeb pages

The term “cascading” refers to the Web The term “cascading” refers to the Web pages’ ability to use CSS information from pages’ ability to use CSS information from more than one sourcemore than one source

CSS PropertiesCSS Properties

CSS styles are created with two parts CSS styles are created with two parts separated by a colon: the separated by a colon: the propertyproperty, which , which refers to a specific CSS style, and the refers to a specific CSS style, and the value assigned to it, which determines the value assigned to it, which determines the style’s visual characteristicsstyle’s visual characteristics

Together, a CSS property and the value Together, a CSS property and the value assigned to it are referred to as a assigned to it are referred to as a declarationdeclaration or or stylestyle declarationdeclaration


Common CSS PropertiesCommon CSS Properties


The properties available in CSS1 are The properties available in CSS1 are grouped into the following categories:grouped into the following categories: Color and background propertiesColor and background properties Font propertiesFont properties Text propertiesText properties Box propertiesBox properties Classification propertiesClassification properties


CSS recommendation, Level 2 (CSS2) was CSS recommendation, Level 2 (CSS2) was released in 1998released in 1998

CSS2 builds on the properties in CSS1 and CSS2 builds on the properties in CSS1 and includes new features such as table includes new features such as table properties and the ability to change the properties and the ability to change the appearance of the mouse pointerappearance of the mouse pointer

Inline StylesInline Styles

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

Inline StylesInline Styles

You use the You use the stylestyle attribute attribute to assign to assign inline style information to an elementinline style information to an element

You assign to the You assign to the stylestyle attribute a attribute a property declaration enclosed in quotation property declaration enclosed in quotation marksmarks

CSS ValuesCSS Values

The values you can assign to a CSS The values you can assign to a CSS property depend on what type of property property depend on what type of property it is it is

Some properties can be assigned a range Some properties can be assigned a range of valuesof values

CSS ValuesCSS Values

For instance, you can assign any font For instance, you can assign any font name that is available on a user’s system name that is available on a user’s system to the to the font-familyfont-family property property

For other properties, you must assign a For other properties, you must assign a value from a specific set of valuesvalue from a specific set of values

Length UnitsLength Units

Length unitsLength units refer to the units of refer to the units of measure that you can use in a style measure that you can use in a style declaration to determine the size or declaration to determine the size or positioning of an elementpositioning of an element

Whether a length unit is used for sizing or Whether a length unit is used for sizing or positioning depends on the property and positioning depends on the property and the element to which it is assignedthe element to which it is assigned


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

CSS Length UnitsCSS Length Units


CSS length units are either absolute or CSS length units are either absolute or relativerelative

Absolute length unitsAbsolute length units use an exact use an exact measurement to specify the size or measurement to specify the size or placement of an elementplacement of an element


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


Relative length unitsRelative length units are preferred are preferred because they adjust properties according because they adjust properties according to screen size or user preferencesto screen size or user preferences

The following CSS length units are relative:The following CSS length units are relative: em (em space)em (em space) ex (x-height)ex (x-height) px (pixels)px (pixels)

Percentage UnitsPercentage Units

An alternative to relative length units is An alternative to relative length units is percentage unitspercentage units, which adjust , which adjust properties relative to other valuesproperties relative to other values

You assign a percentage unit value to a You assign a percentage unit value to a property by assigning a number that property by assigning a number that represents the percentage, immediately represents the percentage, immediately followed by the percent symbol (%)followed by the percent symbol (%)

Color UnitsColor Units

A A color unitcolor unit represents a color value that represents a color value that you can assign to a propertyyou can assign to a property

You can assign a color unit to a property You can assign a color unit to a property using any one of 16 color names defined in using any one of 16 color names defined in the CSS1 specificationthe CSS1 specification



Most graphical computer systems use the Most graphical computer systems use the RGB color systemRGB color system for specifying colors for specifying colors

You can also assign a color using the RGB You can also assign a color using the RGB color systemcolor system

Refer to appendix/resource for information Refer to appendix/resource for information on assigning colors with the RGB color on assigning colors with the RGB color systemsystem

Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.

Documents