CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Using Cascading Style Sheets Module A: CSS Basics

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science 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 sheetsUnderstand the differences among inline, internal 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

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 element, were deprecated in HTML 4.0 and in XHTML 1.0 in favor of CSSTo 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

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 browserCascading 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 styleA 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 browserSome 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 pagesCSS 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 sourceThe 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 characteristicsCSS 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 declarationTogether, 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: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 1998CSS 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 pointerCSS2 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 CSS2At 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 documentThe 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 elementYou use the style attribute to assign inline style information to an element You assign to the style attribute a property declaration enclosed in quotation marksYou 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 isThe values you can assign to a CSS property depend on what type of property it is Some properties can be assigned a range of valuesSome 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 propertyFor 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 valuesFor 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 elementLength 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 assignedWhether 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 measureYou 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 relativeCSS length units are either absolute or relative Absolute length units use an exact measurement to specify the size or placement of an elementAbsolute 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: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 preferencesRelative 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) –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 valuesAn 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 (%)

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 propertyA 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 specificationYou 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 colorsMost graphical computer systems use the RGB color system for specifying colors You can also assign a color using the RGB color systemYou can also assign a color using the RGB color system Refer to Appendix D for information on assigning colors with the RGB color systemRefer 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: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?