Using Cascading Style Sheets CSS Basics

Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets (CSS) Understand the differences among inline, internal and external style sheets Understand the differences among inline, internal and external style sheets Understand how to declare a style Understand how to declare a style Understand how to attach specify values 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 element, were deprecated in HTML 4.0 and in XHTML 1.0 in favor of CSS 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 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 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 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 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 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 The term “cascading” refers to the Web pages’ ability to use CSS information from more than one source

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

CSS Properties

Common CSS Properties

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

CSS Properties CSS recommendation, Level 2 (CSS2) was released in 1998 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 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 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 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 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 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 Some properties can be assigned a range of values

CSS Values For instance, you can assign any font name that is available on a user’s system to the font- family property 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 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 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 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 measure You assign a measurement value to a property by assigning the number that represents the measurement, immediately followed by the unit of measure

CSS Length Units

Length Units CSS length units are either absolute or relative CSS length units are either absolute or relative Absolute length units use an exact measurement to specify the size or placement of an element 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: The following CSS length units are absolute: cm (centimeters) cm (centimeters) in (inches) in (inches) mm (millimeters) mm (millimeters) pc (picas) pc (picas) pt (points) pt (points)

Length Units Relative length units are preferred because they adjust properties according to screen size or user preferences Relative length units are preferred because they adjust properties according to 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 Units An alternative to relative length units is percentage units, which adjust properties relative to other values 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 (%) 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 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 You can assign a color unit to a property using any one of 16 color names defined in the CSS1 specification

Color Units

Most graphical computer systems use the RGB color system for specifying colors Most graphical computer systems use the RGB color system for specifying colors You can also assign a color using the RGB color system 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 Refer to appendix/resource for information on assigning colors with the RGB color system