Using Cascading Style Sheets Module A: CSS Basics

CSCI N241: Fundamentals of Web Design

Copyright ©2004  Department of Computer & Information Science

Goals
• Understand basic syntax of Cascading Style Sheets (CSS) • Understand the differences among inline, internal and external style sheets • Understand how to declare a style • Understand how to attach specify values
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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 source

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

CSS Properties

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

Common CSS Properties

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

CSS Properties
• At the time of this writing, no Web browser provides complete support for the properties available in CSS2

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

CSS 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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

CSS Length Units

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

Length Units
• The following CSS length units are absolute:
– cm (centimeters) – in (inches) – mm (millimeters) – pc (picas) – pt (points)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

Color Units

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

Resources
• Slides were adapted from the following text & companion lectures:
XHTML, Comprehensive First Edition Dan Gosselin Published by Course Technology (2004)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

Questions?

N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.