Using Cascading Style Using Cascading Style SheetsSheets

CSS StructureCSS Structure

GoalsGoals

• Understand how contextual, class and ID Understand how contextual, class and ID selectors workselectors work

• Understand how Understand how <div><div> and and <span><span> work work

• Understand how to build an external style Understand how to build an external style sheetsheet

• Understand how to create color, text and Understand how to create color, text and alignment stylesalignment styles

CSS StructureCSS Structure

• You now understand the basics of working You now understand the basics of working with CSSwith CSS

• You will now learn how to structure the You will now learn how to structure the CSS used by your documentsCSS used by your documents

Internal Style SheetsInternal Style Sheets

• You use an You use an internal style sheetinternal style sheet to create to create styles that apply to an entire documentstyles that apply to an entire document

• You create an internal style sheet within a You create an internal style sheet within a <style><style> element placed within the element placed within the document headdocument head

• The The <style><style> element must include a type element must include a type attribute, which is assigned a value of attribute, which is assigned a value of “text/css”“text/css”

Internal Style SheetsInternal Style Sheets

• Within the Within the <style><style> element you create element you create any style instructions for a specific any style instructions for a specific element that are applied to all instances of element that are applied to all instances of that element contained in the body of the that element contained in the body of the documentdocument

• The element to which specific style rules in The element to which specific style rules in a style sheet apply is called a a style sheet apply is called a selectorselector

Internal Style SheetsInternal Style Sheets

Contextual SelectorsContextual Selectors

• A A contextual selectorcontextual selector allows you to allows you to specify formatting for an element, but only specify formatting for an element, but only when it is contained within another when it is contained within another elementelement

• You create a contextual selector by You create a contextual selector by including two or more selectors in a including two or more selectors in a declaration within a declaration within a <style><style> element element separated by spacesseparated by spaces

Class SelectorsClass Selectors

• Another method of applying styles is to Another method of applying styles is to use use class selectorsclass selectors, which allow you to , which allow you to create different groups of styles for the create different groups of styles for the same elementsame element

• You create a class selector within a You create a class selector within a <style><style> element by appending a name for element by appending a name for the class to a selector with a periodthe class to a selector with a period

Class SelectorsClass Selectors

• You then assign the class name to the You then assign the class name to the standard standard classclass attribute of elements in attribute of elements in the document that you want to format the document that you want to format with the class’s style definitionswith the class’s style definitions

ID SelectorsID Selectors

• An An ID selectorID selector is similar to an inline style is similar to an inline style in that it allows you to create style in that it allows you to create style declarations that are only applied to a declarations that are only applied to a single element in the documentsingle element in the document

• As with inline styles, you use an ID As with inline styles, you use an ID selector when you want to change the selector when you want to change the style of a single element on your Web style of a single element on your Web pagepage

ID SelectorsID Selectors

• The benefit to using ID selectors over The benefit to using ID selectors over inline styles is that they allow you to inline styles is that they allow you to maintain all of your style declarations in a maintain all of your style declarations in a single location within the single location within the <style><style> element, as opposed to inline style element, as opposed to inline style declarations, which you must create within declarations, which you must create within each elementeach element

External Style SheetsExternal Style Sheets

• External style sheetsExternal style sheets are separate text are separate text documents containing style declarations documents containing style declarations that are used by multiple documents on a that are used by multiple documents on a Web siteWeb site

• You should create an external style sheet You should create an external style sheet whenever you need to use the same styles whenever you need to use the same styles on multiple Web pages on the same siteon multiple Web pages on the same site

External Style SheetsExternal Style Sheets

• You create an external style sheet in a text You create an external style sheet in a text editor, the same as when you create editor, the same as when you create XHTML documentsXHTML documents

• However, you should save the document However, you should save the document with an extension of .csswith an extension of .css

External Style SheetsExternal Style Sheets

• The most popular way of accessing the The most popular way of accessing the styles in an external style sheet is to use styles in an external style sheet is to use the empty the empty <link><link> element to link a element to link a document to a style sheetdocument to a style sheet

• You place the You place the <link><link> element in the element in the document headdocument head

External Style SheetsExternal Style Sheets

• You include three attributes in the You include three attributes in the <link><link> element: element: – The The hrefhref attribute that is assigned the Uniform attribute that is assigned the Uniform

Resource Locator (URL) of the style sheetResource Locator (URL) of the style sheet– The The relrel attribute that is assigned a value of attribute that is assigned a value of

“stylesheet” to specify that the referenced file “stylesheet” to specify that the referenced file is a style sheetis a style sheet

– The The typetype attribute, which is assigned the same attribute, which is assigned the same “text/css” value as the type attribute used in “text/css” value as the type attribute used in the the <style><style> element element

The The <div><div> and and <span><span> ElementsElements• The The <div><div> element element formats a group of formats a group of

block-level and inline elements with styles, block-level and inline elements with styles, whereas the whereas the <span><span> element element formats a formats a group of inline elementsgroup of inline elements

• The only difference between these two The only difference between these two elements is that the elements is that the <div><div> element can element can contain block-level elements and also adds contain block-level elements and also adds a line break after its closing taga line break after its closing tag

Cascading OrderCascading Order

• CSS uses an order of precedence to CSS uses an order of precedence to determine which styles to apply when a determine which styles to apply when a selector is formatted in different selector is formatted in different sourcessources

• The least important style formatting is The least important style formatting is the browser’s default style settingsthe browser’s default style settings

Cascading OrderCascading Order

• The cascading order of precedence for The cascading order of precedence for styles, starting with the least important styles, starting with the least important to the most important, is as follows:to the most important, is as follows:1.1. Browser defaultBrowser default2.2. External style sheetsExternal style sheets3.3. Internal style sheetsInternal style sheets4.4. Inline stylesInline styles

Setting Color and Setting Color and Background PropertiesBackground Properties• The The color propertycolor property sets the text color of sets the text color of

an elementan element

• Background propertiesBackground properties set the set the background color or image that appears background color or image that appears behind an elementbehind an element

Foreground and Background Foreground and Background ColorColor• The color you apply with the color element The color you apply with the color element

is referred to as the is referred to as the foreground colorforeground color

• Another type of color you can add to Another type of color you can add to elements is elements is background colorbackground color, which you , which you create with the create with the background-colorbackground-color propertyproperty

Foreground and Background Foreground and Background ColorColor• The foreground color that is applied to an The foreground color that is applied to an

element’s text appears on top of an element’s text appears on top of an element’s background colorelement’s background color

Foreground and Background Foreground and Background ColorColor• The W3C strongly recommends that The W3C strongly recommends that

whenever you use the whenever you use the colorcolor property, you property, you also include the also include the background-color background-color property to ensure that the foreground property to ensure that the foreground color text is placed on a suitable color text is placed on a suitable backgroundbackground

• In order to set background properties for In order to set background properties for the Web page itself, you declare them for the Web page itself, you declare them for the the <body><body> element element

Background ImagesBackground Images

• To set an image to appear as the To set an image to appear as the document background, you use the document background, you use the background-imagebackground-image property and assign to property and assign to it a URL using the format url (it a URL using the format url (url)url)

Background ImagesBackground Images

The The backgroundbackground Shorthand Shorthand PropertyProperty• Several of the property categories include Several of the property categories include

a special property called a a special property called a shorthand shorthand propertyproperty that allows you to set all of the that allows you to set all of the properties in a category using one properties in a category using one declarationdeclaration

The The backgroundbackground Shorthand Shorthand PropertyProperty• The shorthand property for the The shorthand property for the

background properties category is the background properties category is the backgroundbackground property property

• Many of the properties for each category Many of the properties for each category have unique values that are assigned to have unique values that are assigned to themthem

The The backgroundbackground Shorthand Shorthand PropertyProperty• The The background-attachmentbackground-attachment property can property can

be assigned the values “scroll” or “fixed”; be assigned the values “scroll” or “fixed”; neither of these values can be assigned to neither of these values can be assigned to any other background propertyany other background property

Setting Text PropertiesSetting Text Properties

• You use text properties to specify the You use text properties to specify the placement and appearance of textplacement and appearance of text

• The difference between text properties The difference between text properties and font properties is that text properties and font properties is that text properties do not change the appearance of an do not change the appearance of an element’s fontelement’s font

• Text properties adjust visual aspects such Text properties adjust visual aspects such as word and letter spacing, text alignment, as word and letter spacing, text alignment, indentation, and so onindentation, and so on

CSS1 Text PropertiesCSS1 Text Properties

Word and Letter SpacingWord and Letter Spacing

• Word spacing refers to the amount of Word spacing refers to the amount of space between words, whereas letter space between words, whereas letter spacing refers to the amount of space spacing refers to the amount of space between lettersbetween letters

• You set word spacing with the You set word spacing with the word-word-spacingspacing property and letter spacing with property and letter spacing with the the letter-spacingletter-spacing property property

Text DecorationsText Decorations

• The The text-decorationtext-decoration property modifies property modifies the appearance of text by adding the the appearance of text by adding the following “decorations” to the text: following “decorations” to the text: nonenone, , underlineunderline, , overlineoverline, , line-throughline-through, and , and blinkblink

Text DecorationsText Decorations

• An underline value underlines the text, an An underline value underlines the text, an overline value places a line over the text, overline value places a line over the text, and a line-through value places a line and a line-through value places a line through the text, the same as the through the text, the same as the <del><del> elementelement

Text DecorationsText Decorations

• One of the more common uses of the One of the more common uses of the text-decorationtext-decoration property is to turn off property is to turn off the underline that appears beneath links the underline that appears beneath links for design purposesfor design purposes

Line HeightLine Height

• By default, the line height in a By default, the line height in a document is set to single-spacedocument is set to single-space

• You use the You use the line-heightline-height property to property to change the default line of an element change the default line of an element from single-spacing to something elsefrom single-spacing to something else

Line HeightLine Height

• The The line-height line-height property can accept a property can accept a length unit or percentage unit valuelength unit or percentage unit value

• If you use a length unit, be sure to use a If you use a length unit, be sure to use a relative unit such as ems or a relative unit such as ems or a percentage unitpercentage unit

Indenting Indenting

• The The text-indenttext-indent property indents the property indents the first line of a paragraph according to the first line of a paragraph according to the value you specifyvalue you specify

• You may be tempted to use an absolute You may be tempted to use an absolute measurement such as inches or measurement such as inches or centimeters with the centimeters with the text-indent text-indent propertyproperty

Indenting Indenting

• Be sure to use a relative length unit or a Be sure to use a relative length unit or a percentage unit in order to allow the percentage unit in order to allow the indent to scale according to the indent to scale according to the element’s fontelement’s font

Text AlignmentText Alignment

• You have seen how to align text You have seen how to align text horizontally using the horizontally using the text-aligntext-align propertyproperty

• Although the examples you have seen Although the examples you have seen have been with inline styles, you can also have been with inline styles, you can also use the use the text-aligntext-align property with property with selectorsselectors

Text AlignmentText Alignment

• The The vertical-alignvertical-align property is a little property is a little more complicated in that it changes the more complicated in that it changes the vertical alignment of an element in vertical alignment of an element in relation to its parent elementrelation to its parent element

Text AlignmentText Alignment

• One common use of the One common use of the vertical-alignvertical-align property is to adjust the position of property is to adjust the position of images, such as toolbar buttons, that are images, such as toolbar buttons, that are placed inside a line of textplaced inside a line of text

Setting Font PropertiesSetting Font Properties

Font NameFont Name

• The The font-familyfont-family property is a critical font property is a critical font property because it sets the font that an property because it sets the font that an element displayselement displays

• When you select a font for an element, be When you select a font for an element, be sure to use a font that you know is sure to use a font that you know is installed on a user’s computerinstalled on a user’s computer

Font NameFont Name

• Your best bet is to assign a list of font Your best bet is to assign a list of font names to the names to the font-familyfont-family property, property, separated by commasseparated by commas

• Generic font families represent the five Generic font families represent the five major font families available in major font families available in typography: typography: serifserif, , sans serifsans serif, , cursivecursive, , fantasyfantasy, and , and monospacemonospace

Font SizeFont Size

• You have seen examples of how to specify You have seen examples of how to specify font size using the font-size property font size using the font-size property

• When specifying font size, be sure to use a When specifying font size, be sure to use a relative length unit such as ems or a relative length unit such as ems or a percentage unitpercentage unit

Font SizeFont Size

• Alternately, you can use one of the Alternately, you can use one of the following predefined values to set font following predefined values to set font size: size: xx-smallxx-small, , x-smallx-small, , smallsmall, , mediummedium, , largelarge, , x-largex-large, , xx-largexx-large, , smallersmaller, or , or largerlarger

Font SizeFont Size

Font AppearanceFont Appearance

• In addition to the font family and the font In addition to the font family and the font size, you can change the appearance of a size, you can change the appearance of a font using the font using the font-stylefont-style, , font-font-variantvariant, and , and font-weightfont-weight properties properties

• The The font-stylefont-style property allows you to property allows you to make text italicized or oblique, which is a make text italicized or oblique, which is a slanted font, similar to an italicized fontslanted font, similar to an italicized font

The font Shorthand PropertyThe font Shorthand Property

• Using the Using the fontfont shorthand property, shorthand property, you can set values for all of the font you can set values for all of the font properties in a single declarationproperties in a single declaration

The font Shorthand PropertyThe font Shorthand Property

• The values for the font property must be The values for the font property must be set in the following order:set in the following order:– font-stylefont-style (optional) (optional)– font-weight font-weight (optional)(optional)– font-variantfont-variant (optional) (optional)– font-sizefont-size (required) (required)– line-heightline-height (optional) (optional)– font-familyfont-family (required) (required)

Validating Style SheetsValidating Style Sheets

• The W3C offers a utility, the W3C CSS The W3C offers a utility, the W3C CSS Validation Service, for validating CSS codeValidation Service, for validating CSS code

• The W3C CSS Validation Service upload is The W3C CSS Validation Service upload is primarily used for external style sheetsprimarily used for external style sheets

Validating Style SheetsValidating Style Sheets

• You can download a copy of the utility or You can download a copy of the utility or validate your CSS code online, the same validate your CSS code online, the same as you validate XHTML code with the W3C as you validate XHTML code with the W3C Markup Validation ServiceMarkup Validation Service