CSS Cascading Style Sheets Cascading Style Sheets 1.

CSSCSS

Cascading Style SheetsCascading Style Sheets

Style SheetsStyle Sheets

• Describe the evolution of style sheets from print Describe the evolution of style sheets from print media to the webmedia to the web

• List advantages of using cascading style sheetsList advantages of using cascading style sheets• Create style sheets that configure common page Create style sheets that configure common page

and text propertiesand text properties• Use inline stylesUse inline styles• Use embedded style sheetsUse embedded style sheets• Use external style sheetsUse external style sheets• Use pseudo-classesUse pseudo-classes

Overview ofOverview ofCascading Style Sheets (CSS)Cascading Style Sheets (CSS)

See what is possible with CSS:See what is possible with CSS:• Visit Visit http://www.csszengarden.com

Style SheetsStyle Sheets• used for years in Desktop Publishingused for years in Desktop Publishing• apply typographical styles and spacing to printed apply typographical styles and spacing to printed

mediamedia

CSSCSS• provides the functionality of style sheets provides the functionality of style sheets (and (and

much more)much more) for web developers for web developers• a flexible, cross-platform, standards-based a flexible, cross-platform, standards-based

language developed by the W3C. language developed by the W3C.

CSSCSSAdvantagesAdvantages

Greater typography and page Greater typography and page layout controllayout control

Style is separate from structureStyle is separate from structure Styles can be stored in a separate Styles can be stored in a separate

document and linked to from the document and linked to from the web pageweb page

Potentially smaller documentsPotentially smaller documents No need for <font> tagsNo need for <font> tags Easier site maintenanceEasier site maintenance

Types ofTypes ofCascading Style SheetsCascading Style Sheets

Inline StylesInline Styles• Inline styles are coded in the body of the web page as an attribute of Inline styles are coded in the body of the web page as an attribute of

an XHTML tag. The style only applies to the specific element that an XHTML tag. The style only applies to the specific element that contains it as an attributecontains it as an attribute

Embedded StylesEmbedded Styles• Embedded styles are defined in the header of a web page. These Embedded styles are defined in the header of a web page. These

style instructions apply to the entire web page document.style instructions apply to the entire web page document. External StylesExternal Styles

• External Styles are coded in a separate text file. This text file is External Styles are coded in a separate text file. This text file is linked to the web page by using a <link> tag in the header section.linked to the web page by using a <link> tag in the header section.

Imported StylesImported Styles• Imported Styles are similar to External Styles in that they are coded Imported Styles are similar to External Styles in that they are coded

in a separate text file. We’ll concentrate on the other types of styles in a separate text file. We’ll concentrate on the other types of styles in this text.in this text.

CSSCSSSyntaxSyntax

Style sheets are composed of "Rules" Style sheets are composed of "Rules" that describe the styling to be applied. that describe the styling to be applied.

Each Rule contains a Selector and a Each Rule contains a Selector and a DeclarationDeclaration

CSSCSSSyntax SampleSyntax Sample

body { color: blue;body { color: blue; background-color: yellow; }background-color: yellow; }This could also be written using hexadecimal color values as shown below.This could also be written using hexadecimal color values as shown below.body { color: #0000FF;body { color: #0000FF; background-color: #FFFF00; }background-color: #FFFF00; }

Common FormattingCommon FormattingCSS PropertiesCSS Properties

See Table 9.1 Common CSS Properties, See Table 9.1 Common CSS Properties, including:including:• background-color background-color • colorcolor• font-family font-family • font-size font-size • font-weight font-weight • font-stylefont-style• text-decorationtext-decoration• line-heightline-height• text-aligntext-align• background-imagebackground-image

Using Using Inline StylesInline Styles

Inline Styles are coded as attributes on XHTML Inline Styles are coded as attributes on XHTML tags. tags.

The following code will set the text color of a The following code will set the text color of a <h1><h1> tag to a shade of red: tag to a shade of red:

<h1 style="color:#CC0000">This is displayed as a red <h1 style="color:#CC0000">This is displayed as a red heading</h1>heading</h1>

The following code sets the text in the heading The following code sets the text in the heading to red and italic.to red and italic.

<h1 style="color:#CC0000;font-style:italic">This is <h1 style="color:#CC0000;font-style:italic">This is displayed as a red heading in italic style</h1>displayed as a red heading in italic style</h1>

Hexadecimal Hexadecimal Color ValuesColor Values

# is used to indicate a hexadecimal # is used to indicate a hexadecimal valuevalue

Hex value pairs range from 00 to FFHex value pairs range from 00 to FF Three hex value pairs describe an RGB Three hex value pairs describe an RGB

colorcolor

#000000 black#000000 black #FFFFFF white#FFFFFF white#FF0000 red#FF0000 red #00FF00 green#00FF00 green#0000FF blue#0000FF blue #CCCCCC grey#CCCCCC grey

Configuring Color with Inline CSS Configuring Color with Inline CSS (1)(1)

Inline CSSInline CSS• Configured in the body of the Web page Configured in the body of the Web page • Use the style attribute of an XHTML tagUse the style attribute of an XHTML tag• Apply only to the specific elementApply only to the specific element

The Style AttributeThe Style Attribute• Value: one or more style declaration property and Value: one or more style declaration property and

value pairsvalue pairs

Example: configure red color text in an <h1> element:Example: configure red color text in an <h1> element:

<h1 style="color:#ff0000">Heading text is red</h1><h1 style="color:#ff0000">Heading text is red</h1>

Configuring Color with Inline Configuring Color with Inline CSS (2)CSS (2)

Example 2: configure the red text in the Example 2: configure the red text in the headingheading

configure a gray backgroundin the configure a gray backgroundin the headingheading

Separate style rule declarations with ;Separate style rule declarations with ;

<h1 style="color:#FF0000;background-color:#cccccc">This is <h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>displayed as a red heading with gray background</h1>

QuestionsQuestions1.1. List three reasons to use CSS on a web page.List three reasons to use CSS on a web page.

2.2. When designing a page to use other than When designing a page to use other than the default colors for text and background, the default colors for text and background, explain why it is a good reason to configure explain why it is a good reason to configure both properties: text color and background both properties: text color and background color.color.

3.3. Write the code to configure an inline style Write the code to configure an inline style attached to a <div> tag. Configure as attached to a <div> tag. Configure as follows: background color set to a light follows: background color set to a light green color, text set to a dark green color, green color, text set to a dark green color, font set to Arial or sans-serif, size set to font set to Arial or sans-serif, size set to larger, font weight set to bold.larger, font weight set to bold.

CSS Embedded CSS Embedded StylesStyles

Configured in the header section of a Web Configured in the header section of a Web page. page.

Use the XHTML <style> elementUse the XHTML <style> element Apply to the entire Web page documentApply to the entire Web page document Style declarations are contained between the Style declarations are contained between the

opening and closing <style> tagsopening and closing <style> tags The type attribute indicates the MIME type of The type attribute indicates the MIME type of

text/csstext/css Example: Configure a Web page with white Example: Configure a Web page with white

text on a black backgroundtext on a black background

Embedded Embedded StylesStyles

Apply to an entire web page. Apply to an entire web page. Placed within aPlaced within a <style> <style> tag located in the tag located in the

header section of a web page. header section of a web page. The opening The opening <style><style> tag begins the tag begins the

embedded style rules.embedded style rules. The closing The closing </style> </style> tag ends the area tag ends the area

containing embedded style rules. containing embedded style rules. When using the When using the <style><style> tag, there is no need tag, there is no need

for the style attribute. for the style attribute. The The <style><style> tag does use a type attribute tag does use a type attribute

that should have the value of "text/css".that should have the value of "text/css".

CSS Embedded StylesCSS Embedded Styles

body { background-color: #E6E6FA;body { background-color: #E6E6FA;

color: #191970;}color: #191970;}

h1 { background-color: #191970;h1 { background-color: #191970;

color: #E6E6FA;}color: #E6E6FA;}

h2 { background-color: #AEAED4;h2 { background-color: #AEAED4;

color: #191970;}color: #191970;}

</style></style>

• The body selector sets the global style rules for the entire page.

• These global rules are overridden for <h1> and <h2> elements by the h1 and h2 style rules.

CSS and textCSS and text

Configuring Text with CSSConfiguring Text with CSS

CSS properties for configuring text:CSS properties for configuring text:• font-weightfont-weight

Configures the boldness of textConfigures the boldness of text

• font-stylefont-style Configures text to an italic styleConfigures text to an italic style

• font-sizefont-size Configures the size of the textConfigures the size of the text

• font-familyfont-family Configures the font typeface of the textConfigures the font typeface of the text

The font-size PropertyThe font-size Property

Accessibility RecommendationAccessibility Recommendation::◦ Use em or percentage font sizes – these can be easily enlarged in all Use em or percentage font sizes – these can be easily enlarged in all

browsers by usersbrowsers by users

The font-family PropertyThe font-family Property

Not everyone has the same fonts installed in Not everyone has the same fonts installed in their computertheir computer

Configure a list of fonts and include a generic Configure a list of fonts and include a generic family namefamily name

p {font-family: Arial,Verdana, sans-serif;}p {font-family: Arial,Verdana, sans-serif;}

Embedded Styles Embedded Styles ExampleExample

CSS SelectorsCSS SelectorsCSS style rules can be configured CSS style rules can be configured

for an:for an:• HTML element selector HTML element selector (i.e. as we saw in (i.e. as we saw in

previous slide to the element itself)previous slide to the element itself)

• class selectorclass selector• id selectorid selector

Using CSS with “class”Using CSS with “class” class Selectorclass Selector

• Apply a CSSApply a CSSrule to a certainrule to a certain"class" of elements"class" of elementson a Web pageon a Web page

• Does not associate the Does not associate the style to a particular style to a particular XHTML elementXHTML element

Configure with Configure with .classname.classname The sample creates a class called “The sample creates a class called “newnew” with ” with

red italic text.red italic text. To use the class, code the following To use the class, code the following

XHTML:XHTML:<p class=“new”><p class=“new”>This is text is red and in italics</p>This is text is red and in italics</p> 2323

Using CSS with “id”Using CSS with “id” id Selectorid Selector

• Apply a CSSApply a CSSrule to ONE element rule to ONE element on a Web page.on a Web page.

Configure with Configure with #idname#idname

The sample creates an id called “The sample creates an id called “newnew” with ” with red, large, italic text.red, large, italic text.

To use the id, code the following XHTML:To use the id, code the following XHTML:

<p id=“new”><p id=“new”>This is text is red, large, and in italics</p>This is text is red, large, and in italics</p>

font-size:2em; font-style: italic;

}</style>

CSS and styling “areas”CSS and styling “areas”

XHTML XHTML <div> element<div> element

A block-level elementA block-level element

Purpose: configure a specially Purpose: configure a specially formatted division or area of a Web formatted division or area of a Web pagepage• There is a line break before and after the There is a line break before and after the

division. division. • Can contain other block-level and inline Can contain other block-level and inline

elementselements

Useful to define an area that will Useful to define an area that will contain other block-level tags (such as contain other block-level tags (such as paragraphs or spans) within it. paragraphs or spans) within it. 2626

XHTML XHTML <div> Element Example<div> Element Example

Configure a page footer areaConfigure a page footer area Embedded CSS:Embedded CSS:

XHTMLXHTML<span> element<span> element

An inline-level elementAn inline-level element Purpose: Purpose:

• configure a specially formatted area configure a specially formatted area displayed in-line with other displayed in-line with other elements, such as within a elements, such as within a paragraph.paragraph.

There is no line break before and There is no line break before and after the span.after the span.

XHTML XHTML <span> Element Example <span> Element Example Embedded CSS:Embedded CSS:

.companyname { font-weight: bold;.companyname { font-weight: bold;

font-family: Georgia, "Times New Roman", serif;font-family: Georgia, "Times New Roman", serif;

font-size: 1.25em;font-size: 1.25em;

</style></style>

XHTML:XHTML:<p>Your needs are important to us at <span <p>Your needs are important to us at <span

class=“companyname">Acme Web Design</span>.class=“companyname">Acme Web Design</span>.We will work with you to build your Web site.</p>We will work with you to build your Web site.</p>

External Style SheetsExternal Style Sheets

Storing in separate file – decoupling Storing in separate file – decoupling design from content!!!design from content!!!

CSS style rules are contained in a CSS style rules are contained in a text file separate from the XHTML text file separate from the XHTML documents. documents.

The External Style Sheet text file: The External Style Sheet text file: • extension "extension ".css.css" " • contains only style rulescontains only style rules• does not contain any XHTML tagsdoes not contain any XHTML tags

body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; }h2 { color: #003366; }.nav { font-size: 16px; font-weight: bold; }

• Multiple web pages can associate with Multiple web pages can associate with the same external style sheet file.the same external style sheet file.

site.css

index.htmindex.htm

clients.htmclients.htm

about.htmabout.htm

Etc…

The <link /> ElementThe <link /> Element

A self-contained tag A self-contained tag Placed in the header sectionPlaced in the header section Purpose: associates the external Purpose: associates the external

style sheet file with the web page. style sheet file with the web page. Example:Example:

Using anUsing anExternal Style SheetExternal Style Sheet

To link to the external style sheet called color.css, the To link to the external style sheet called color.css, the XHTML code XHTML code placed in the header section placed in the header section is:is:

body { background-color: #0000FF; color: #FFFFFF;}

External Style Sheet color.css

Centering Page Content Centering Page Content with CSSwith CSS#container { margin-left: auto;#container { margin-left: auto;

margin-right: auto;margin-right: auto;

width:80%; }width:80%; }

W3C CSS ValidationW3C CSS Validation

http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/

CSS Guidelines – CSS Guidelines – Getting StartedGetting Started

Review the design of the pageReview the design of the page• Configure global font and color properties for the body Configure global font and color properties for the body

selectorselector• Identify typical elements (such as Identify typical elements (such as <h1>, <h3>, <h1>, <h3>, and so on) and so on)

and declare style rules for these if needed.and declare style rules for these if needed.• Identify page areas such as logo, navigation, footer, and so Identify page areas such as logo, navigation, footer, and so

on – configure an appropriate class or id for each. on – configure an appropriate class or id for each.

Create one prototype page that contains most of the Create one prototype page that contains most of the elements you plan to use and test.elements you plan to use and test.• Revise your CSS as needed.Revise your CSS as needed.• Once your design is set – move styles to an external .css fileOnce your design is set – move styles to an external .css file

Planning and testing are important activities when Planning and testing are important activities when designing a Web sitedesigning a Web site

CSS Troubleshooting TipsCSS Troubleshooting Tips Verify you are using the : and ; symbols in the right spots—they Verify you are using the : and ; symbols in the right spots—they

are easy to confuse.are easy to confuse.

Check that you are Check that you are not not using = signs instead of : between each using = signs instead of : between each property and its value.property and its value.

Verify that the { and } symbols are properly placedVerify that the { and } symbols are properly placed

Check the syntax of your selectors, their properties, and Check the syntax of your selectors, their properties, and property values for correct usage.property values for correct usage.

If part of your CSS works, and part doesn’t:If part of your CSS works, and part doesn’t:◦ Review your CSSReview your CSS◦ Determine the first rule that is not applied. Determine the first rule that is not applied.

Often the error is in the rule above the rule that is not applied.Often the error is in the rule above the rule that is not applied.

Validate your CSS at http://jigsaw.w3.org/css-validatorValidate your CSS at http://jigsaw.w3.org/css-validator

This “cascade” applies the styles in order from This “cascade” applies the styles in order from outermost (External Styles) to innermost (actual outermost (External Styles) to innermost (actual XHTML coded on the page). XHTML coded on the page).

This way site-wide styles can be configured but This way site-wide styles can be configured but overridden when needed by more granular (or page overridden when needed by more granular (or page specific) stylesspecific) styles. .

TheTheCascadeCascade

CSS and anchor <a> tagCSS and anchor <a> tag

Style attributes differentlyStyle attributes differently Use to make buttonsUse to make buttons

CSSCSSPseudo-classesPseudo-classes

Pseudo-classes and the anchor tagPseudo-classes and the anchor tag• Link – default state Link – default state

for a link (anchor tag)for a link (anchor tag)• Visited – state of a Visited – state of a

link that has been link that has been visitedvisited

• Hover – state of a Hover – state of a link that the mouse is currently overlink that the mouse is currently over

• Active – state of a link that is being Active – state of a link that is being clickedclicked

CSS “buttons”CSS “buttons”

#cccccc;#cccccc; width: 100px;width: 100px; padding: 3px 15px;padding: 3px 15px; color: #ffffff;color: #ffffff; background-color: #006600;background-color: #006600; font-family: Arial, Helvetica, sans-font-family: Arial, Helvetica, sans-

serif;serif; font-size: 16px;font-size: 16px; font-weight: bold;font-weight: bold; text-align: center;text-align: center; text-decoration:none;text-decoration:none;}}a.button:link { color : #FFFFFF; }a.button:link { color : #FFFFFF; }a.button:visited { color : #cccccc; }a.button:visited { color : #cccccc; }a.button:hover { color : #66cc33;a.button:hover { color : #66cc33; border:2px outset #cccccc;border:2px outset #cccccc;}}</style></style>

<div align="center"><h2>CSS Buttons!</h2><a href="index.htm" class="button">Home</a><a href="products.htm" class="button">Products</a><a href="sevices.htm" class="button">Services</a><a href="contact.htm" class="button">Contact</a><a href="about.htm" class="button">About</a><div>

CSS – more to doCSS – more to do

Effecting bordersEffecting borders

The CSS border PropertyThe CSS border Property Configures a border on the top, right, Configures a border on the top, right,

bottom, and left sides of an elementbottom, and left sides of an element

Consists of Consists of • border-widthborder-width• border-styleborder-style• border-colorborder-color

h2 { border: 2px solid #ff0000 }h2 { border: 2px solid #ff0000 }

CSS Borders: CSS Borders: Block / Inline ElementsBlock / Inline Elements

Block elementBlock element◦ default width of element content extends to browser margin default width of element content extends to browser margin

(or specified width)(or specified width) Inline element Inline element

◦ Border closely outlines the element contentBorder closely outlines the element content

h2 { border: 2px solid #ff0000; }h2 { border: 2px solid #ff0000; } a { border: 2px solid #ff0000; }a { border: 2px solid #ff0000; }

Browser Display Can VaryBrowser Display Can Vary

Configuring Specific Configuring Specific Sides of a BorderSides of a Border

Use CSS to configure a line on one or Use CSS to configure a line on one or more sides of an elementmore sides of an element• border-bottomborder-bottom• border-leftborder-left• border-rightborder-right• border-topborder-top

h2 { border-bottom: 2px solid #ff0000 }h2 { border-bottom: 2px solid #ff0000 }

The CSS padding PropertyThe CSS padding Property Configures empty space between the Configures empty space between the

content of the XHTML element and the content of the XHTML element and the borderborder

Set to 0px by defaultSet to 0px by default

h2 { border: 2px solid #ff0000;h2 { border: 2px solid #ff0000;

padding: 5px; }padding: 5px; }

No padding configured: No padding configured:

Configuring Padding on Configuring Padding on Specific Sides of an ElementSpecific Sides of an Element

Use CSS to configure padding on one or Use CSS to configure padding on one or more sides of an elementmore sides of an element• padding-bottompadding-bottom• padding-leftpadding-left• padding-rightpadding-right• padding-toppadding-top

h2 { border: 2px solid #ff0000; h2 { border: 2px solid #ff0000;

background-color: #cccccc;background-color: #cccccc;

padding-left: 5px;padding-left: 5px;

padding-bottom: 10px;padding-bottom: 10px;

padding-top: 10px;}padding-top: 10px;}

CSS padding Property Shorthand: CSS padding Property Shorthand: two valuestwo values

Two numeric values or percentagesTwo numeric values or percentages• first value configures top and bottom paddingfirst value configures top and bottom padding• the second value configures left and right the second value configures left and right

paddingpadding

h2 { border: 2px solid #ff0000; h2 { border: 2px solid #ff0000;

background-color: #cccccc;background-color: #cccccc;

padding: 20px 10px;padding: 20px 10px;

Four numeric values or percentagesFour numeric values or percentages◦ Configure top, right, bottom, and left paddingConfigure top, right, bottom, and left padding

h2 { border: 2px solid #ff0000;h2 { border: 2px solid #ff0000; width: 250px; width: 250px; background-color: #cccccc;background-color: #cccccc; padding: 30px 10px 5px 20px;padding: 30px 10px 5px 20px;}}

CSS padding Property Shorthand: CSS padding Property Shorthand: four valuesfour values

Hands-On Hands-On PracticePractice

h1 { background-color:#191970; h1 { background-color:#191970;

color:#E6E6FA;color:#E6E6FA;

padding: 15px;padding: 15px;

font-family: Georgia, "Times New Roman", serif; } font-family: Georgia, "Times New Roman", serif; }

h2 { background-color:#AEAED4; h2 { background-color:#AEAED4;

color:#191970; color:#191970;

font-family: Georgia, "Times New Roman", serif; font-family: Georgia, "Times New Roman", serif;

border-bottom: 2px dashed #191970; }border-bottom: 2px dashed #191970; }

Try this on your own

CSS – more to doCSS – more to do

Background imagesBackground images

CSS background-image CSS background-image PropertyProperty

Configures a background-image Configures a background-image By default, background images tile By default, background images tile

(repeat)(repeat)

body { background-image: url(background1.gif); }body { background-image: url(background1.gif); }

CSS background-repeat PropertyCSS background-repeat Property

Using background-repeatUsing background-repeat

h2 { background-color: #d5edb3;h2 { background-color: #d5edb3;

color: #5c743d;color: #5c743d;

font-family: Georgia, "Times New Roman", serif;font-family: Georgia, "Times New Roman", serif;

padding-left: 30px;padding-left: 30px;

background-image: background-image: url(trilliumbullet.gif);url(trilliumbullet.gif);

background-repeat: background-repeat: no-repeatno-repeat; ;

trilliumbullet.gif:

CSSCSSStrategies(1)Strategies(1)

Always include end tags (even though Always include end tags (even though browsers usually display the page, browsers usually display the page, anyway) for all XHTML container tags.anyway) for all XHTML container tags.

Design and code the page to look Design and code the page to look "OK" or "Acceptable" -- then use style "OK" or "Acceptable" -- then use style sheets for extra-special effects and sheets for extra-special effects and formatting.formatting.

Use style sheet components that will Use style sheet components that will degrade gracefully. Check the degrade gracefully. Check the compatibility charts and test, test, compatibility charts and test, test, test, test, test....test, test, test....

CSSCSSStrategies(2)Strategies(2)

Use <div> and <span> tags to create Use <div> and <span> tags to create logical page sections. Be aware that logical page sections. Be aware that Netscape 4.x handles the <div> tag Netscape 4.x handles the <div> tag better than the <span> tag.better than the <span> tag.

Use style sheets in Intranet Use style sheets in Intranet environments -- you know exactly what environments -- you know exactly what browsers your visitors will be using.browsers your visitors will be using.

Consider using a browser detection Consider using a browser detection script (discussed in Chapter 12) to test script (discussed in Chapter 12) to test for a specific browser and link to the for a specific browser and link to the style sheet coded specifically for that style sheet coded specifically for that browser. browser.

CSS Cascading Style Sheets Cascading Style Sheets 1.

Documents

Cascading style sheets (css)

4.01 Cascading Style Sheets

Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML:...

Cascading Style Sheets Continued

Cascading style sheets - CSS

Cascading Style Sheets CSS

Cascading Style Sheets(final)

Introducing Cascading Style Sheets

Cascading style sheets

Introducing Cascading Style Sheets COPYRIGHTED...

Cookies, Cascading Style Sheets

Using Cascading Style Sheets

Using Cascading Style Sheets CSS Basics. Goals Understand...

Cascading Style Sheets (Formatting

CSS Cascading Style Sheets

Cascading Style Sheets (CSS) - Gunadarma...