markup: html and xhtml, part 2 - harvard university › lecture_notes › 2007... · markup: html...

Markup: HTML and XHTML, Part 2 http://localhost:8080/cocoon/projects/cscie12/slides/20080213/handout.html

1 of 65 2/12/2008 10:45 AM

Table of Contents | All Slides | Link List | Examples | CSCI E-12

Markup: HTML and XHTML, Part 2February 13, 2008

Harvard University Division of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2008 David P. Heitmeyer

Instructor email: [email protected] Course staff email: [email protected]


2 of 65 2/12/2008 10:45 AM

frameset and iframe

HTML Specification Chapter on Frames

Frameset Example

Lecture Notes Frameset Example

Google Image Search and Frames

Search Results: Minuteman

The "framed" image result page:


3 of 65 2/12/2008 10:45 AM


4 of 65 2/12/2008 10:45 AM

Frames: Multiple documents involved

frameset document that defines the frame structurecontent documents (HTML or images) to fill the frames defined by the frameset document

Lecture Notes Frameset Example

view plain print ?

<?xml version="1.0" encoding="UTF-8"?> 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 3.<html> 4. <head> 5. <title> 6. Frameset Example 7. </title> 8. </head> 9. <frameset cols="200,*"> 10. <frame name="navigation" src="list.html" /> 11. <frame name="main" src="slide1.html"/> 12. <noframes> 13. <body> 14. <p> This text will display in a browser that does not support frames. It should contain 15. text that is useful to the viewer. Do not simply tell them "Your browser does not 16. support frames. You should upgrade your browser." </p> 17. <p> You may <a href="slide1.html">view the slide show</a>. </p> 18. </body> 19. </noframes> 20. </frameset> 21.</html> 22.


5 of 65 2/12/2008 10:45 AM


6 of 65 2/12/2008 10:45 AM

Targets

Attribute target of a (anchor) element.

Special Targets

_blank Opens up a new window_self The browser or window in which the document is already loaded. This is the default behavior forhypertext links._parent Will clear the parent frameset_top Will clear the current window of all frames.

Named Targets

Frames can be named (via name attribute. Windows can be named via JavaScript.


7 of 65 2/12/2008 10:45 AM

Inline Frames (iframe)

iframe is deprecated.

Example 3.1

Example 3.1 Source:

Example 3.1 Rendered:

imgaformtable

view plain print ?

<div> 1. <ul> 2. <li><a href="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements/img.html" target="inline3. </li> 4. <li><a href="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements/a.html" target="inlinefr5. </li> 6. <li><a href="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements/form.html" target="inlin7. form</a> 8. </li> 9. <li><a href="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements/table.html" target="inli10. table</a> 11. </li> 12. </ul> 13. <iframe name="inlineframe" src="http://minerva.dce.harvard.edu/dtd/xhtml1-strict/elements.html" 14. frames or is currently configured not to display frames. However, you may visit <a href="dtd/xht15. </iframe> 16.</div> 17.

XHTML 1.0 Strict: User Element View [DTD Element View]

[Home] [Entities]

A | B | C | D | E | F | H | I | K | L | M | N | O | P | Q | S | T | U | V

Top level element: html.

Aaabbracronymaddressarea

Bb


8 of 65 2/12/2008 10:45 AM

framesets and iframes: Pros and Cons

If you are going to use framesets and iframes, use them correctly!

Pros

Parts of your page can scroll while other parts remain stationary. Note that this can be achieved with CSS!Can display resources from different servers within same browser window.

Cons

Non-visual BrowsersIncreases complexity.

number of fileshypertext links (users can becomes "trapped" if links and targets are not carefully written).

Linking or bookmarking any page other than the top level frameset is problematic.Problems with search engines because deep linking is problematic. Try a Google search for "your browser doesn't support frames".


9 of 65 2/12/2008 10:45 AM

Forms: Introduction

Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. The submittedinformation is passed from the HTTP Server to a server-side program that processes the information andproduces a response for the browser.


10 of 65 2/12/2008 10:45 AM


11 of 65 2/12/2008 10:45 AM

form

Attributes

method (GET|POST)action (URL of CGI program)enctype

Each element within a form has a name associated with it. When the information is sent back to the server, theCGI program will access the information by name. Thus, the front-end form and the back-end program mustuse the same names.

While exploring forms, it is useful to use a simple "echo" CGI program, which will simply echo back the name/value information your form submitted (http://minerva.dce.harvard.edu/cgi-bin/echo.cgi).

Example 3.2

Example 3.2 Source:


Email Address: Submit Query

view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.


12 of 65 2/12/2008 10:45 AM

Get vs. Post

GET: form information sent from browser to server as part of query string, visible in the URLPOST: form information sent from browser to server as part of HTTP body; not in URL

Example 3.3

Example 3.3 Source:



Example 3.4

Example 3.4 Source:



view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.

view plain print ?

<form method="get" action="http://cscie12.dce.harvard.edu/echo.cgi" enctype="application/x-www-for1. <div> Email Address: 2. <input type="text" name="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.


13 of 65 2/12/2008 10:45 AM

Radio Buttons

Example 3.5

Example 3.5 Source:


Please send me spam: yes no

Submit Information

view plain print ?

<form method="post" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/1. <div> 2. Please send me spam: 3. <input type="radio" name="spam" value="yes" checked="checked" />yes 4. <input type="radio" name="spam" value="no" />no 5. <hr/> 6. <input type="submit" value="Submit Information" name="submit" /> </div> 7.</form> 8.


14 of 65 2/12/2008 10:45 AM

Checkbox

Example 3.6

Example 3.6 Source:


What ice cream do you like?

Chocolate Vanilla Strawberry Ginger Herrell's Chocolate Pudding

Submit Information

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x1. <p>What ice cream do you like?</p> 2. <input type="checkbox" name="icecream" value="chocolate" />Chocolate 3. <br/> 4. <input type="checkbox" name="icecream" value="vanilla" />Vanilla 5. <br/> 6. <input type="checkbox" name="icecream" value="strawberry" />Strawberry 7. <br/> 8. <input type="checkbox" name="icecream" value="ginger" />Ginger 9. <br/> 10. <input type="checkbox" name="icecream" value="herrellchocolatepudding" /> Herrell's 11. Chocolate Pudding 12. <p> 13. <input type="submit" value="Submit Information" name="submit" /></p> 14.</form> 15.


15 of 65 2/12/2008 10:45 AM

Option Lists

Example 3.7

Example 3.7 Source:


Your favorite New England state: Please Select...Please Select...

Submit Information

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x1. <select name="favorite_NE_state" > 2. <option value="" selected="selected" >Please Select...</option> 3. <option value="CT" >Connecticut</option> 4. <option value="ME" >Maine</option> 5. <option value="MA" >Massachusetts</option> 6. <option value="NH" >New Hampshire</option> 7. <option value="RI" >Rhode Island</option> 8. <option value="VT" >Vermont</option> 9. </select> 10. <p> 11. <input type="submit" value="Submit Information" name="submit" /> 12. </p> 13.</form> 14.


16 of 65 2/12/2008 10:45 AM

Textarea

Example 3.8

Example 3.8 Source:


Please enter comments:

Submit Information

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x1. <p>Please enter comments:</p> 2. <textarea rows="10" cols="50" name="comments" > comments go here.... </textarea> 3. <p> 4. <input type="submit" value="Submit Information" name="submit" /></p> 5. </form> 6.

comments go here....

17 of 65 2/12/2008 10:45 AM

Labels

Example 3.9

Example 3.9 Source:


What ice cream do you like?

Chocolate Vanilla Strawberry Ginger Herrell's Chocolate Pudding

Submit Information

view plain print ?

<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x1. <p>What ice cream do you like?</p> 2. <input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate" /> 3. <label for="icecream_chocolate" >Chocolate</label> 4. <br/> 5. <input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla" /> 6. <label for="icecream_vanilla" >Vanilla</label> 7. <br/> 8. <input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry" /> 9. <label for="icecream_strawberry" >Strawberry</label> 10. <br/> 11. <input type="checkbox" name="icecream" id="icecream_ginger" value="ginger" /> 12. <label for="icecream_ginger" >Ginger</label> 13. <br/> 14. <input type="checkbox" name="icecream" id="icecream_hcp" value="herrellchocolatepudding" /> 15. <label for="icecream_hcp" >Herrell's Chocolate Pudding</label> 16. <p> 17. <input type="submit" value="Submit Information" name="submit" /></p> 18.</form> 19.


18 of 65 2/12/2008 10:45 AM

Server Side Includes (SSI)

A simple way of dynamically including content in XHTML/HTML documents.

include other documentsecho (print) document and/or server informationsimple conditional statements with extended SSI (xSSI)

SSI statements look like XHTML comments, except with a "#"

Typical Uses of SSI

Common elements of site are in one place and included throughout the site SSIs are useful to include documents or information that is used repeatedly throughout a site, such ascommon headers, footers, and navigation elements. You can change these chunks in one place andhave an effect on the entire site!Documents (or parts of pages) that change often SSIs are also useful to include documents or information that change frequently; only the "included" file needs to be updated, not the page itself. Also the person or program editing the file need only have permissions to edit the "included" file, not the actual XHTML document that includes it; only the data in the "include" file needs to be written, not the entire XHTML page.Document Information In addition, SSIs are useful to include information specific about a document, such as last modified date, URI, size.Conditionally deliver content. With xSSI (extended SSI), different content can be delivered based upon ENV or other variable information.

view plain print ?

 1.


19 of 65 2/12/2008 10:45 AM

Typical SSI Use Cases

Common pages header1.Frequently changing content2.Common navigation3.Common footer with document information4.

Footer:


20 of 65 2/12/2008 10:45 AM

21 of 65 2/12/2008 10:45 AM

Server Side Includes (SSI)

SSI commands are embedded into the XHTML/HTML document. The HTTP server processes the file for anySSI statements, executes the SSI commands, and then returns content to the HTTP client.

What files are processed?

This is set in the HTTP server configuration, and is typically done by file extension.

.shtml

On minerva.dce.harvard.edu, the server will parse only .shtml documents.


22 of 65 2/12/2008 10:45 AM

An Example

The "include" SSI command is a very useful to insert the contents of one file into another. In the examplebelow, the SSI directive is replace by the contents of the file footer.inc.

Example 3.10

Example 3.10 Source:

Example 3.10 Demonstrated

footer.inc is:

What is "Lorem ipsum" text?

view plain print ?

<div> 1. <p> 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 3. Cras sollicitudin, orci nec facilisis vehicula, neque urna 4. porta risus, ut sagittis enim velit at orci. Fusce velit. 5. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, 6. felis. Nulla convallis ante sit amet urna. Maecenas condimentum 7. hendrerit turpis. 8. </p> 9.  10.</div> 11.

view plain print ?

<div> 1. <p>Copyright © 2007 President and Fellows of Harvard College </p> 2. <p> 3. <a href="http://hcl.harvard.edu/site/privacy.html">Privacy Statement</a> 4. • 5. <a href="http://www.trademark.harvard.edu/trademark_protection/notice.php" 6. target="_blank">Harvard Trademark Notice</a> 7. </p> 8. <p>Page Last Reviewed: December 7, 2007</p> 9.</div> 10.

23 of 65 2/12/2008 10:45 AM

include

Remember: the content of the included document is inserted into the document containing the SSI command.The included document should not be a complete XHTML document. It is common practice (although not arequirement) to give these files an extension like: .inc, .fhtml, or .phtml.

The parameters for include are:

virtual. This is the parameter you will use most. The argument is a virtual path to a document on the server. Examples are:

virtual="/~dheitmey/inc/footer.inc"virtual="/includes/navigation.fhtml"virtual="../includes/disclaimer.phtml"

file. The argument is a relative path to a document that is within the current directory or any of itsdescendent directories (i.e. can't have "../")

A note about SSI and file contents and file extensions

Extension(s) parsed for SSI directives (e.g. ".shtml"). On minerva and by default with Apache, the fileextension that is processed for SSI directives is .shtml. SSI directives that occur in files that are notprocessed for SSI will simply appear as comments in the output. You can configure the file extensionsthat Apache will process.Extensions that are sometimes used for XHTML/HTML fragments (e.g. ".inc", ".fhtml", ".phtml").Since included files are only document fragments, sometimes these files are given a different extension.These different extensions provide a reminder to the authors that the content should not be fullXHTML/HTML documents. Common file extensions that serve as a reminder are:

.phtml - 'partial' HTML

.fhtml - 'fragment' HTML

.inc - 'include' fileRecommendation for file extensions: use .shtml for all


24 of 65 2/12/2008 10:45 AM

echo

Example 3.11



view plain print ?

<div> 1.Document URI: <br/> 2.Server Name: <br/> 3.Last Modified: <br/> 4.Server Admin: <br/> 5.</div> 6.

25 of 65 2/12/2008 10:45 AM

fsize

File size. US Constitution PDF

Example 3.12



view plain print ?

<div>Constitution of the United States of America as Amended: Unratified Amendments, 1. Analytical Index (U.S. House of Representatives, via GPO Access) July 25, 2007 (H. Doc. 110-50): <2. ) </div> 3.


26 of 65 2/12/2008 10:45 AM

config

Example 3.13



Example 3.14



Example 3.15



view plain print ?

<div> 1.Last modified: <br/> 2. 3.Last modified: <br/> 4.</div> 5.

view plain print ?

<div><a href="constitution/us_consitution.pdf" shape="rect" >US Constitution in PDF</a> ( 2.<a href="constitution/us_consitution.pdf" shape="rect" >US Constitution in PDF</a> ( 4.<a href="constitution/us_consitution.pdf" shape="rect" >US Constitution in PDF</a> (</p> 3.<p>The second SSI error, with a configured message:<br/> 4. 5.<br/> 6.</p> 7.<p>The third SSI error, with a configured message of "null":<br/> 8. 9. 10.</p></div> 11.

27 of 65 2/12/2008 10:45 AM


28 of 65 2/12/2008 10:45 AM

printenv

Example 3.16



view plain print ?

<div> 1. <p>Print out environment variables:</p> 2. <pre xml:space="preserve" ></pre> 3.</div> 4.

29 of 65 2/12/2008 10:45 AM

SSI commands within included documents

Files are parsed for SSI commands based upon their extension. If .shtml files are parsed for SSI commands, then included files with the extension .shtml are also parsed for SSI commands.

Files are parsed for SSI commands based upon their extension. If .inc files are parsed for SSI commands, thenincluded files with the extension .inc are also parsed for SSI commands.

Example 3.17



Contents of footer.shtml contains SSI commands:

Example 3.18



view plain print ?

<div> 1. 2.</div> 3.

view plain print ?

<div class="footer" > 1. 2.Location: http:// <br/> 3.Last modified: <br/> 4.Contact:  5.</div> 6.


30 of 65 2/12/2008 10:45 AM

exec

This is usually off for security purposes.

31 of 65 2/12/2008 10:45 AM

Typical Uses of SSI

Common elements of site are in one place and included throughout the site SSIs are useful to include documents or information that is used repeatedly throughout a site, such ascommon headers, footers, and navigation elements. You can change these chunks in one place andhave an effect on the entire site!Documents (or parts of pages) that change often SSIs are also useful to include documents or information that change frequently; only the "included" file needs to be updated, not the page itself. Also the person or program editing the file need only have permissions to edit the "included" file, not the actual XHTML document that includes it; only the data in the "include" file needs to be written, not the entire XHTML page.Document Information In addition, SSIs are useful to include information specific about a document, such as last modified date, URI, size.Conditionally deliver content. With xSSI (extended SSI), different content can be delivered based upon ENV or other variable information.


32 of 65 2/12/2008 10:45 AM

PRISE Website

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3.<head> 4. <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5. <title>PRISE: About PRISE</title> 6. <link rel="stylesheet" href="prise.css" type="text/css" /> 7.</head> 8.<body id="about"> 9. <div id="container"> 10. <div id="logobanner"> 11.  12. </div> 13. <div id="content"> 14.  15. <div id="main"> 16. <div id="notices"> 17.  18. </div> 19. <h2>About PRISE</h2> 20. <p>The May 2007 Report ...</p> 21. <p>For more information ...</p> 22. <div class="footer"> 23.  24. </div> 25. </div> 26. </div> 27. </div> 28.</body> 29.</html> 30.

33 of 65 2/12/2008 10:45 AM

Iroquois Constitution

Iroquois Constitution

Iroquois Constitution Zip File containing XHTML, CSS, and "Include" files.


34 of 65 2/12/2008 10:45 AM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations) </title> 5. <link rel="stylesheet" type="text/css" href="style.css" /> 6. </head> 7. <body> 8.  9.  10. <div id="main"> 11.  12. </div> 13.  14. </body> 15.</html> 16.

35 of 65 2/12/2008 10:45 AM

Recommendation: Keep included files well-formed

Breaking a page in half

This technique is not recommended. The first include file contains the top "half" of the page; the contentfollows; the second include file contains the bottom "half" of the page. In this technique, the html ,body, and perhaps other elements are started in the header.shtml and their end tags are in footer.shtml. The pagedelivered to the browser does validate, but the individual parts on the server are not well-formed, which cancause some confusion when editing a file.

Keeping things well-formed

view plain print ?

 1. Lorem ipsum dolor sit amet, consectetuer adipiscing ... 2. 3.

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations) </title> 5. <link rel="stylesheet" type="text/css" href="style.css" /> 6. </head> 7. <body> 8. <div id="header"> 9.  10. </div> 11. <div id="navigation"> 12.  13. </div> 14. <div id="main"> 15.  16. </div> 17. </body> 18.</html> 19.


36 of 65 2/12/2008 10:45 AM


37 of 65 2/12/2008 10:45 AM

Pros and Cons

Pros

Easy to use Widespread server support for SSIServer-side; not browser-dependentLess resource intensive than CGISimple, yet powerful.

Cons

Used appropriately, virtually none.Limiting (compared to other, more complex and full-featured mechanisms to produce dynamiccontent)

Apache SSI Documentation

Apache Tutorial: Introduction to Server Side Includes

Apache module mod_include


38 of 65 2/12/2008 10:45 AM

Cascading Style Sheets (CSS)

XHTML for MarkupCSS for style and presentation

Markup and Presentation Intertwined

Symptoms

proprietary HTML extensionsmaking text into imagesproliferate use of "spacer" 1px by 1px GIF imagesdeprecated HTML elements and/or attributesusing tables for layout

Consequences

Changing design can be a major undertakingHTML/XHTML very complex; can easily lead to errorsUnnecessary content constraints

Separated

Allows structure and presentation to be separate.Allows greater control over presentation than XHTML/HTML alone.Improves accessibility.Simplifies XHTML/HTML markup, both in term of structure and size


39 of 65 2/12/2008 10:45 AM

The Power of Stylesheets

United States Constitution (no external stylesheet)

W3C Core Styles applied to the US Constitution.

Chocolate StylesheetMidnight StylesheetModernist StylesheetOldstyle StylesheetSteely StylesheetSwiss StylesheetTraditional StylesheetUltramarine Stylesheet


40 of 65 2/12/2008 10:45 AM


41 of 65 2/12/2008 10:45 AM

Harvard College Admissions

Harvard College Admissions With CSS disabled:

Headings

Heading elements (h1,h2,etc.) combined with CSS are very powerful. Headings can remain headings inmarkup and CSS can style them as desired.

Lists

Lists combined with CSS are very powerful. Lists can remain lists in markup (navigation, content items, etc.)and CSS can style them as desired.


42 of 65 2/12/2008 10:45 AM


43 of 65 2/12/2008 10:45 AM

Department of African and African American Studies

Department of African and African American Studies

With CSS disabled:


44 of 65 2/12/2008 10:45 AM


45 of 65 2/12/2008 10:45 AM

Designing with Stylesheets: CSS Zen Garden

css Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplished visually through CSS-based desgin.


46 of 65 2/12/2008 10:45 AM

47 of 65 2/12/2008 10:45 AM

XHTML: a simple example with CSS

No CSS: simple.htmlWith CSS:

simple-style.htmlsimple-style.css

And here is the stylesheet (simple-style.css):

view plain print ?

<?xml version="1.0"?> 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd" > 3.<html> 4. <head> 5. <title> 6. My Schools 7. </title> 8.  9. <link rel="stylesheet" href="simple-style.css" type="text/css"/> 10. </head> 11. <body> 12. ... 13. </body> 14.</html> 15. 16.


48 of 65 2/12/2008 10:45 AM

view plain print ?

body { 1. margin-left: 10%; 2. margin-top: 1em; 3. margin-right: 10%; 4. background: #ff9; 5.} 6.h1 { 7. font-family: Arial, sans-serif; 8. color: #600; 9. border-bottom: thin dotted black; 10.} 11.ul { 12. list-style-type: none; 13.} 14.li { 15. margin-top: 1em; 16. font-size: 1.25em; 17.} 18.img { 19. border: thin solid black; 20.} 21.a { 22. text-decoration: none; 23.} 24.a:link, a:visited { 25. color: blue; 26.} 27.a:hover { 28. color: white; 29. text-decoration: underline; 30. background: blue; 31.} 32. 33.


49 of 65 2/12/2008 10:45 AM

CSS Recommendations from the W3C

CSS 1, December 1996; Revised January 1999)CSS 2, May 1998CSS 2.1, Candidate Recommendation, July 2007CSS Current Work (CSS Mobile Profile, Print Profile, TV Profile, CSS3)

CSS Validator

W3C CSS Validation Servicehttp://jigsaw.w3.org/css-validator/


50 of 65 2/12/2008 10:45 AM

Binding Styles to Markup

Three ways to bind CSS rules to XHTML/HTML markup:

style attribute in elementstyle element in XHTML/HTML headExternal CSS document, through the link element in XHTML/HTML head


51 of 65 2/12/2008 10:45 AM

style attribute

Example 3.19



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisisvehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim,rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenacondimentum hendrerit turpis.

view plain print ?

<p style="color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; tex1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec 2. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. 3. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis 4. ante sit amet urna. Maecenas condimentum hendrerit turpis. </p> 5.


52 of 65 2/12/2008 10:45 AM

style element

Example 3.20


In style element (<style type="text/css">) within head element:


With StylesWithout Styles

view plain print ?

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec 1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. 2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante 3. sit amet urna. Maecenas condimentum hendrerit turpis. </p> 4.

view plain print ?

p { 1. color: black; 2. background-color: teal; 3. padding: 1em; 4. font-family: helvetica, sans-serif; 5. text-align: justify; 6. margin: 2em; 7. } 8.


53 of 65 2/12/2008 10:45 AM

link element

The link element can reference an external stylesheet.

Example 3.21


In example21.css

In head element:



view plain print ?

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec 1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. 2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante 3. sit amet urna. Maecenas condimentum hendrerit turpis. </p> 4.

view plain print ?

p { 1. color: black; 2. background-color: teal; 3. padding: 1em; 4. font-family: helvetica, sans-serif; 5. text-align: justify; 6. margin: 2em; 7. } 8.

view plain print ?

<link rel="stylesheet" type="text/css" href="example21.css"/> 1.


54 of 65 2/12/2008 10:45 AM

Anatomy of a CSS Rule

Example 3.22





CSS Rule

Selector and Declarations

view plain print ?

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec 1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. 2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante 3. sit amet urna. Maecenas condimentum hendrerit turpis. </p> 4.

view plain print ?

p { 1. color: red; 2. background-color: blue; 3. } 4.


55 of 65 2/12/2008 10:45 AM

Properties and Values


56 of 65 2/12/2008 10:45 AM

Combining Rules

Rules can be combined. The following two sets of style rules would produce identical results. Rules can belisted separately:

Or, rules can be grouped. Property:Value pairs need to be separated by a semicolon.

view plain print ?

p {color: black;} 1.p {background-color: teal;} 2.p {padding: 1em;} 3.p {margin: 1em;} 4.p {font-family: helvetica, sans-serif;} 5.p {text-align: justify;} 6.

view plain print ?

p { 1. color: black; 2. background-color: teal; 3. padding: 1em; 4. margin: 1em; 5. font-family: helvetica, sans-serif; 6. text-align: justify; 7.} 8.


57 of 65 2/12/2008 10:45 AM

Combining Selectors

Selectors can be combined into comma-separated groups.

We combine the selectors so that a single declaration applies to multiple selectors.

view plain print ?

h1 { color: maroon; } 1.h2 { color: maroon; } 2.h3 { color: maroon; } 3.h4 { color: maroon; } 4.h5 { color: maroon; } 5.h6 { color: maroon; } 6.

view plain print ?

h1, h2, h3, h4, h5, h6 { color: maroon; } 1.


58 of 65 2/12/2008 10:45 AM

class selectors

The class and id attributes of XHTML elements can be used in conjunction with styles.

Example 3.23





view plain print ?

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci 1. nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. </div> 2.<div class="withstyle" >Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, 3. commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum 4. hendrerit turpis.</div> 5.<div class="warn" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 6. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim 7. velit at orci.</div> 8.<div>Lorem ipsum dolor sit amet, 9. <span class="warn" >consectetuer adipiscing elit</span>. Cras sollicitudin, orci nec 10. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. </div> 11.<div id="legalese" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 12. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim 13. velit at orci.</div> 14.

view plain print ?

div { margin: 0.5em; padding: 0.5em; font-family: times; 1. color: black; background-color: white; } div.withstyle { margin: 0.5em; padding: 2. 0.5em; font-family: sans-serif; color: navy; background-color: olive; } .warn { color: 3. red; background-color: yellow; font-weight: bold; } #legalese { font-size: 0.6em; 4. color: #cccccc; } 5.

59 of 65 2/12/2008 10:45 AM

id selectors

Example 3.24





view plain print ?

<div id="header" ><h1>Lorem ipsum dolor</h1></div> 1.<div id="main" > 2.  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 4. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim 5. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo 6. vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit 7. turpis. </div> 8.<div id="footer" >Nulla turpis erat, faucibus commodo, iaculis id, aliquet quis, lectus. 9. Pellentesque habitant morbi tristique senectus et netus et malesuada 10. fames ac turpis egestas.</div> 11.

view plain print ?

#main { 1. font-family: Times, serif; 2.} 3.#header { 4. font-family: arial, helvetica, sans-serif; 5. background-color: #900; 6. color: #fff; 7. text-align: center; 8.} 9.#footer { 10. font-family: arial, helvetica, sans-serif; 11. padding: 1em; 12. margin-top: 1em; 13. color: #999; 14. border-top: thin solid #999; 15. text-align: center; 16. font-size: 80%; 17.} 18.


60 of 65 2/12/2008 10:45 AM

Contextual Selectors

Example 3.25





view plain print ?

<div> <em>Emphasized text</em> outside of <strong>li</strong> appear "normal". 1. <ul> 2. <li><em>Emphasized text</em> within <strong>li</strong> have a different 3. style.</li> 4. </ul> </div> 5.

view plain print ?

li em { color: red; background-color: navy;} 1.


61 of 65 2/12/2008 10:45 AM

CSS Properties

CSS Level 1 lists 53 properties that let you style properties of:

fontcolortextboxes (border, padding, margins)classification (inline, block, list)

CSS Level 2.1 lists 105 properties .


62 of 65 2/12/2008 10:45 AM

Inheritance

Properties are typically inherited by children elements.

Example 3.26





view plain print ?

<div> Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Cras 1. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit 2. at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. 3. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div> 4.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec 5. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. 6. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante 7. sit amet urna. Maecenas condimentum hendrerit turpis.</p> 8.

view plain print ?

body { color: navy; } 1.em { color: red; } 2.div { color: green; } 3.


63 of 65 2/12/2008 10:45 AM

Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0

Take a look at the sample default stylesheets for HTML 2.0 and HTML 4.0 listed in the Appendices of the CSS1 and CSS2 Recommendations.

Sample style sheet for HTML 2.0 [Local copy]Default style sheet for HTML 4.0 [Local copy]

HTML 4 Sample default CSS


64 of 65 2/12/2008 10:45 AM

view plain print ?

html, address, 1.blockquote, 2.body, dd, div, 3.dl, dt, fieldset, form, 4.frame, frameset, 5.h1, h2, h3, h4, 6.h5, h6, noframes, 7.ol, p, ul, center, 8.dir, hr, menu, pre { display: block } 9.li { display: list-item } 10.head { display: none } 11.table { display: table } 12.tr { display: table-row } 13.thead { display: table-header-group } 14.tbody { display: table-row-group } 15.tfoot { display: table-footer-group } 16.col { display: table-column } 17.colgroup { display: table-column-group } 18.td, th { display: table-cell; } 19.caption { display: table-caption } 20.th { font-weight: bolder; text-align: center } 21.caption { text-align: center } 22.body { margin: 8px; line-height: 1.12 } 23.h1 { font-size: 2em; margin: .67em 0 } 24.h2 { font-size: 1.5em; margin: .75em 0 } 25.h3 { font-size: 1.17em; margin: .83em 0 } 26.h4, p, 27.blockquote, ul, 28.fieldset, form, 29.ol, dl, dir, 30.menu { margin: 1.12em 0 } 31.h5 { font-size: .83em; margin: 1.5em 0 } 32.h6 { font-size: .75em; margin: 1.67em 0 } 33.h1, h2, h3, h4, 34.h5, h6, b, 35.strong { font-weight: bolder } 36.blockquote { margin-left: 40px; margin-right: 40px } 37.i, cite, em, 38.var, address { font-style: italic } 39.pre, tt, code, 40.kbd, samp { font-family: monospace } 41.pre { white-space: pre } 42.button, textarea, 43.input, object, 44.select { display:inline-block; } 45.big { font-size: 1.17em } 46.small, sub, sup { font-size: .83em } 47.sub { vertical-align: sub } 48.sup { vertical-align: super } 49.table { border-spacing: 2px; } 50.thead, tbody, 51.tfoot { vertical-align: middle } 52.td, th { vertical-align: inherit } 53.s, strike, del { text-decoration: line-through } 54.hr { border: 1px inset } 55.ol, ul, dir, 56.menu, dd { margin-left: 40px } 57.ol { list-style-type: decimal } 58.ol ul, ul ol, 59.ul ul, ol ol { margin-top: 0; margin-bottom: 0 } 60.u, ins { text-decoration: underline } 61.br:before { content: "\A" } 62.:before, :after { white-space: pre-line } 63.center { text-align: center } 64.abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } 65.:link, :visited { text-decoration: underline } 66.:focus { outline: thin dotted invert } 67. 68./* Begin bidirectionality settings (do not change) */ 69.BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } 70.BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } 71. 72.*[DIR="ltr"] { direction: ltr; unicode-bidi: embed } 73.*[DIR="rtl"] { direction: rtl; unicode-bidi: embed } 74. 75.@media print { 76. h1 { page-break-before: always } 77. h1, h2, h3, 78. h4, h5, h6 { page-break-after: avoid } 79. ul, ol, dl { page-break-before: avoid } 80.} 81.


65 of 65 2/12/2008 10:45 AM

HTML 2 Sample default CSS

Table of Contents | All Slides | Link List | Examples | CSCI E-12

view plain print ?

BODY { 1. margin: 1em; 2. font-family: serif; 3. line-height: 1.1; 4. background: white; 5. color: black; 6.} 7. 8.H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 9.DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL { 10. display: block } 11. 12.B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, 13.IMG, SPAN { display: inline } 14. 15.LI { display: list-item } 16. 17.H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em } 18.H5, H6 { margin-top: 1em } 19.H1 { text-align: center } 20.H1, H2, H4, H6 { font-weight: bold } 21.H3, H5 { font-style: italic } 22. 23.H1 { font-size: xx-large } 24.H2 { font-size: x-large } 25.H3 { font-size: large } 26. 27.B, STRONG { font-weight: bolder } /* relative to the parent */ 28.I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic } 29.PRE, TT, CODE, KBD, SAMP { font-family: monospace } 30. 31.PRE { white-space: pre } 32. 33.ADDRESS { margin-left: 3em } 34.BLOCKQUOTE { margin-left: 3em; margin-right: 3em } 35. 36.UL, DIR { list-style: disc } 37.OL { list-style: decimal } 38.MENU { margin: 0 } /* tight formatting */ 39.LI { margin-left: 3em } 40. 41.DT { margin-bottom: 0 } 42.DD { margin-top: 0; margin-left: 3em } 43. 44.HR { border-top: solid } /* 'border-bottom' could also have been used */ 45. 46.A:link { color: blue } /* unvisited link */ 47.A:visited { color: red } /* visited links */ 48.A:active { color: lime } /* active links */ 49. 50./* setting the anchor border around IMG elements 51. requires contextual selectors */ 52. 53.A:link IMG { border: 2px solid blue } 54.A:visited IMG { border: 2px solid red } 55.A:active IMG { border: 2px solid lime } 56. 57.