CSS CSS Cascading Style Sheets Cascading Style Sheets 1
CSSCSS
Cascading Style SheetsCascading Style Sheets
11
22
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.
33
44
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
55
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.
66
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
77
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; }
88
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
99
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
1010
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>
1111
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>
1212
1313
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
1414
<style type ="text/css">body { background-color: #000000; color: #FFFFFF;}</style>
1515
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".
<style type="text/css">body { background-color: #000000; color: #FFFFFF; font-family:Arial,sans-serif; }</style>
CSS Embedded StylesCSS Embedded Styles
<style type="text/css"><style type="text/css">
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
1717
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
<style type="text/css">body { background-color: #E6E6FA; color: #191970; font-family: Arial, Verdana, sans-serif; }h1 { background-color: #191970; color: #E6E6FA; line-height: 200%; font-family: Georgia, "Times New Roman", serif; }h2 { background-color: #AEAED4; color: #191970; font-family: Georgia, "Times New Roman", serif; }p {font-size: .90em; }ul {font-weight: bold; }</style>
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
<style type="text/css">.new { color: #FF0000; font-style: italic; }</style>
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>
2424
<style type="text/css">#new { color: #FF0000;
font-size:2em; font-style: italic;
}</style>
CSS and styling “areas”CSS and styling “areas”
2525
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:
<style type="text/css"><style type="text/css">.footer { font-size: small;.footer { font-size: small; text-align: center; }text-align: center; }</style></style>
XHTML:XHTML:<div class=“footer">Copyright © 2009</div><div class=“footer">Copyright © 2009</div>
2727
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.
2828
XHTML XHTML <span> Element Example <span> Element Example Embedded CSS:Embedded CSS:
<style type="text/css"><style type="text/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>
2929
External Style SheetsExternal Style Sheets
Storing in separate file – decoupling Storing in separate file – decoupling design from content!!!design from content!!!
3030
External Style SheetsExternal Style Sheets
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
3131
body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; }h2 { color: #003366; }.nav { font-size: 16px; font-weight: bold; }
body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; }h2 { color: #003366; }.nav { font-size: 16px; font-weight: bold; }
External Style SheetsExternal Style Sheets
• Multiple web pages can associate with Multiple web pages can associate with the same external style sheet file.the same external style sheet file.
3232
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:
3333
<link rel="stylesheet" href="color.css" type="text/css" />
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:
<link rel="stylesheet" href="color.css" type="text/css" /><link rel="stylesheet" href="color.css" type="text/css" />
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
4040
4141
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
<style type=”text/css>a:link {color:#FF0000 }a:hover {text-decoration:none; color:#000066 }</style>
4242
CSS “buttons”CSS “buttons”
<style type="text/css"><style type="text/css">.button { border: 2px inset .button { border: 2px inset
#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
4343
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
5353
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:
5757
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....
5858
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.