ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:css

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
eg-259:css [2012/01/20 15:22] – [External style sheets] eechriseg-259:css [2012/01/20 16:39] (current) – [The Structural and Presentation Layers] eechris
Line 117: Line 117:
 <code html> <code html>
       <head>       <head>
-       <link rel="stylesheet" href="http://www.swan.ac.uk/style.css"> +       <link rel="stylesheet" href="http://www.swan.ac.uk/style.css" />
-       </link>+
       </head>       </head>
 </code> </code>
Line 128: Line 127:
  
 ===== Selector Forms ===== ===== Selector Forms =====
-  * There are five specific types of selector for style sheets. These control what XHTML elements (tags) a style is applied to.+  * There are five specific types of selector for style sheets. These control what HTML elements (tags) a style is applied to.
   * The Style selectors are:   * The Style selectors are:
     - //[[eg-259:css#simple_selector_forms|Simple element selectors]]//     - //[[eg-259:css#simple_selector_forms|Simple element selectors]]//
Line 211: Line 210:
   * '':hover'' classes apply when the mouse cursor is over the element   * '':hover'' classes apply when the mouse cursor is over the element
   * '':focus'' classes apply when an element has focus   * '':focus'' classes apply when an element has focus
-  * Example: [[/~eechris/eg-259/examples/lecture2/pseudo.html|pseudo.html]]+  * Example: [[/eg-259/examples/lecture2/pseudo.html|pseudo.html]]
  
 ---- ----
-<code html> +<code html|Illustrates the :hover and :focus pseudo classes> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- pseudo.html <!-- pseudo.html
-     Illustrates the :hover and :focus pseudo classes +Illustrates the :hover and :focus pseudo classes 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Checkboxes </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      input:hover {color: red;} +    <title> Checkboxes </title> 
-      input:focus {color: green;}+    <style type="text/css"> 
 +      input:hover { 
 +        color: red; 
 +      } 
 +      input:focus { 
 +        color: green; 
 +      }
     </style>     </style>
   </head>   </head>
   <body>   <body>
-    <form action = "">+    <form action="">
       <p>       <p>
         Your name:         Your name:
-        <input type = "text"  /> +        <input type="text" placeholder="type something to see the effect" />
       </p>       </p>
     </form>     </form>
Line 329: Line 331:
 ===== Examples of the Use of Font ===== ===== Examples of the Use of Font =====
  
-  * Example 1:  [[/~eechris/eg-259/examples/lecture2/fonts.html|fonts.html]] +  * Example 1:  [[/eg-259/examples/lecture2/fonts.html|fonts.html]] 
-  * Example 2: [[/~eechris/eg-259/examples/lecture2/fonts2.html|fonts2.html]]: styles applied with external stylesheet [[/~eechris/eg-259/examples/lecture2/styles.css|styles.css]]+  * Example 2: [[/eg-259/examples/lecture2/fonts2.html|fonts2.html]]: styles applied with external stylesheet [[/eg-259/examples/lecture2/styles.css|styles.css]]
  
 ---- ----
 //Example 1// //Example 1//
-<code html> +<code html|An example to illustrate font properties> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- fonts.html <!-- fonts.html
-     An example to illustrate font properties +An example to illustrate font properties 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Font properties </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      p.big {font-size: 14pt; +    <title> Font properties </title> 
-             font-style: italic; +    <style> 
-             font-family: 'Times New Roman'; +      p.big { 
-            } +        font-size: 14pt; 
-      p.small {font: 10pt bold 'Courier New';}  +        font-style: italic; 
-      h2 {font-family: 'Times New Roman';  +        font-family: 'Times New Roman'; 
-          font-size: 24pt; font-weight: bold} +      } 
-h3 {font-family: 'Courier New'; font-size: 18pt} +      p.small { 
-    </style>   +        font: 10pt bold 'Courier New'; 
 +      } 
 +      h2 { 
 +        font-family: 'Times New Roman'; 
 +        font-size: 24pt; 
 +        font-weight: bold 
 +      } 
 +      h3 { 
 +        font-family: 'Courier New'; 
 +        font-size: 18pt 
 +      } 
 +    </style>
   </head>   </head>
   <body>   <body>
Line 371: Line 381:
 //Example 2// //Example 2//
  
-The XHTML code [[/~eechris/eg-259/examples/lecture2/forms2.html|forms2.html]]: +The HTML code [[/eg-259/examples/lecture2/fonts2.html|fonts2.html]]: 
-<code html> +<code html|An example to test external style sheets> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- fonts2.html <!-- fonts2.html
-     An example to test external style sheets +An example to test external style sheets 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-<head> <title> External style sheets </title> +  <head> 
-    <link rel = "stylesheet"  type = "text/css" +    <meta charset="utf-8" /> 
-          href = "styles.css" />+    <title> External style sheets </title> 
 +    <link rel = "stylesheet" href = "styles.css" />
   </head>   </head>
   <body>   <body>
Line 398: Line 406:
 </html> </html>
 </code> </code>
-The External Stylesheet [[/~eechris/eg-259/examples/lecture2/styles.css|styles.css]]: +The External Stylesheet [[/eg-259/examples/lecture2/styles.css|styles.css]]: 
-<code css>+<code css|an external style sheet for use with fonts2.html>
 /* styles.css - an external style sheet /* styles.css - an external style sheet
-     for use with fonts2.html + for use with fonts2.html 
-*/ + */ 
-p.big {font-size: 14pt; +p.big { 
-       font-style: italic; +  font-size: 14pt; 
-       font-family: 'Times New Roman'; +  font-style: italic; 
-      } +  font-family: 'Times New Roman'; 
- +} 
-p.small {font: 10pt bold 'Courier New';} +p.small { 
- +  font: 10pt bold 'Courier New'; 
-h2 {font-family: 'Times New Roman'; +} 
-    font-size: 24pt; font-weight: bold} +h2 { 
- +  font-family: 'Times New Roman'; 
-h3 {font-family: 'Courier New'; +  font-size: 24pt; 
-    font-size: 18pt}+  font-weight: bold 
 +} 
 +h3 { 
 +  font-family: 'Courier New'; 
 +  font-size: 18pt 
 +}
 </code> </code>
  
-//Note// how much smaller, and easier to understand, is the XHTML **without** the stylesheet. Also, note that the stylesheet can be used with a collection of XHTML documents.+//Note// how much smaller, and easier to understand, is the HTML **without** the stylesheet. Also, note that the stylesheet can be used with a collection of HTML documents.
  
 ===== Some Additional Properties Related to Fonts ===== ===== Some Additional Properties Related to Fonts =====
  
-  * The ''text-decoration'' property: ''line-through'', ''overline'', ''underline'', ''none''. See [[/~eechris/eg-259/examples/lecture2/fonts3.html|fonts3.html]].+  * The ''text-decoration'' property: ''line-through'', ''overline'', ''underline'', ''none''. See [[/eg-259/examples/lecture2/fonts3.html|fonts3.html]].
   * ''letter-spacing'': value is any length property value   * ''letter-spacing'': value is any length property value
  
 ---- ----
 Example3 Example3
-<code html> +<code html|An example to illustrate some additional font properties> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- fonts3.html <!-- fonts3.html
-     An example to test external style sheets +An example to illustrate some additional font properties 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Text decoration </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      p.through {text-decoration: line-through} +    <title> Text decoration </title> 
-      p.over {text-decoration: overline} +    <style> 
-      p.under {text-decoration: underline}+      p.through { 
 +        text-decoration: line-through; 
 +      } 
 +      p.over { 
 +        text-decoration: overline; 
 +      } 
 +      p.under { 
 +        text-decoration: underline; 
 +      }
     </style>     </style>
   </head>   </head>
Line 501: Line 519:
 | ''lower-roman''  |   LC Roman        | i, ii, iii, iv | | ''lower-roman''  |   LC Roman        | i, ii, iii, iv |
  
-  * Example: [[/~eechris/eg-259/examples/lecture2/sequence_types.html|sequence_types.html]].+  * Example: [[/eg-259/examples/lecture2/sequence_types.html|sequence_types.html]].
  
 ---- ----
  
 <code html> <code html>
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- sequence_types.html <!-- sequence_types.html
-     An example to illustrate sequence type styles +An example to illustrate sequence type styles 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Sequence types </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      ol {list-style-type: upper-roman;} +    <title> Sequence types </title> 
-      ol ol {list-style-type: upper-alpha;} +    <style> 
-      ol ol ol {list-style-type: decimal;}+      ol { 
 +        list-style-type: upper-roman; 
 +      } 
 +      ol ol { 
 +        list-style-type: upper-alpha; 
 +      } 
 +      ol ol ol { 
 +        list-style-type: decimal; 
 +      }
     </style>     </style>
   </head>   </head>
Line 524: Line 547:
     <h3> Aircraft Types </h3>     <h3> Aircraft Types </h3>
     <ol>     <ol>
-      <li> General Aviation (piston-driven engines) +      <li> 
 +        General Aviation (piston-driven engines)
         <ol>         <ol>
-          <li> Single-Engine Aircraft +          <li> 
 +            Single-Engine Aircraft
             <ol>             <ol>
-              <li> Tail wheel </li> +              <li> 
-              <li> Tricycle </li> +                Tail wheel 
-            </ol>  +              </li> 
-          </li>  +              <li> 
-          <li> Dual-Engine Aircraft +                Tricycle 
 +              </li> 
 +            </ol> 
 +          </li> 
 +          <li> 
 +            Dual-Engine Aircraft
             <ol>             <ol>
-              <li> Wing-mounted engines </li> +              <li> 
-              <li> Push-pull fuselage-mounted engines </li>+                Wing-mounted engines 
 +              </li> 
 +              <li> 
 +                Push-pull fuselage-mounted engines 
 +              </li>
             </ol>             </ol>
           </li>           </li>
-        </ol> +        </ol>
       </li>       </li>
-      <li> Commercial Aviation (jet engines) +      <li> 
 +        Commercial Aviation (jet engines)
         <ol>         <ol>
-          <li> Dual-Engine +          <li> 
 +            Dual-Engine
             <ol>             <ol>
-              <li> Wing-mounted engines </li> +              <li> 
-              <li> Fuselage-mounted engines </li>+                Wing-mounted engines 
 +              </li> 
 +              <li> 
 +                Fuselage-mounted engines 
 +              </li>
             </ol>             </ol>
-          </li>  +          </li> 
-<li> Tri-Engine +          <li> 
 +            Tri-Engine
             <ol>             <ol>
-              <li> Third engine in vertical stabilizer </li> +              <li> 
-              <li> Third engine in fuselage </li>+                Third engine in vertical stabilizer 
 +              </li> 
 +              <li> 
 +                Third engine in fuselage 
 +              </li>
             </ol>             </ol>
           </li>           </li>
Line 611: Line 656:
 ===== Using Colours ===== ===== Using Colours =====
  
-  * The ''color'' property specifies the foreground colour of elements: [[/~eechris/eg-259/examples/lecture2/color.html|color.html]] +  * The ''color'' property specifies the foreground colour of elements: [[/eg-259/examples/lecture2/color.html|color.html]] 
-  * The ''background-color'' property specifies the background colour of elements: [[/~eechris/eg-259/examples/lecture2/back_color.html|back_color.html]]+  * The ''background-color'' property specifies the background colour of elements: [[/eg-259/examples/lecture2/back_color.html|back_color.html]]
  
 ---- ----
  
 Example of the use of the ''color'' property: Example of the use of the ''color'' property:
-<code html> +<code html|An example to illustrate the color property> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- back_color.html <!-- back_color.html
-     An example to illustrate the color property +An example to illustrate the color property 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> background-color </title> +  <head> 
-  <style type = "text/css"> +    <meta charset="utf=8" /> 
-    th.red {color: red} +    <title> background-color </title> 
-    th.orange {color: orange} +    <style> 
-  </style>+      th.red { 
 +        color: red 
 +      } 
 +      th.orange { 
 +        color: orange 
 +      } 
 +    </style>
   </head>   </head>
   <body>   <body>
-  . . . +    . . . 
-  <table border = "5"> +    <table border = "5"> 
-    <tr> +      <tr> 
-      <th class = "red"> Apple </th> +        <th class = "red"> Apple </th> 
-      <th class = "orange"> Orange </th> +        <th class = "orange"> Orange </th> 
-      <th class = "orange"> Screwdriver </th> +        <th class = "orange"> Screwdriver </th> 
-    </tr> +      </tr> 
-  </table>+    </table>
   </body>   </body>
 </html> </html>
Line 646: Line 694:
  
 Example of the use of the ''background-color'' property: Example of the use of the ''background-color'' property:
-<code html> +<code html|An example to illustrate the background-color property> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- back_color.html <!-- back_color.html
-     An example to illustrate the background-color property +An example to illustrate the background-color property 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> background-color </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8"> 
-      p.redback {font-size: 24pt; +    <title> background-color </title> 
-                 color: blue; +    <style> 
-                 background-color: red;+      p.redback { 
 +        font-size: 24pt; 
 +        color: blue; 
 +        background-color: red;
       }       }
     </style>     </style>
Line 689: Line 737:
 want on the right want on the right
  
-Example: [[/~eechris/eg-259/examples/lecture2/float.html|float.html]] +Example: [[/eg-259/examples/lecture2/float.html|float.html]]
- +
-<code html> +
-<?xml version = "1.0" encoding = "utf-8"?> +
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">+
  
 +<code html|An example to illustrate the float property>
 +<!DOCTYPE html>
 <!-- float.html <!-- float.html
-     An example to illustrate the float property +An example to illustrate the float property 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> The float property </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      img {float: right}+    <title> The float property </title> 
 +    <style> 
 +      img { 
 +        float: right 
 +      }
     </style>     </style>
   </head>   </head>
Line 710: Line 759:
     </p>     </p>
     <p>     <p>
-      This is a picture of a Cessna 210. The 210 is the flagship  +      This is a picture of a Cessna 210. The 210 is the flagship 
-      single-engine Cessna aircraft. Although the 210 began as a  +      single-engine Cessna aircraft. Although the 210 began as a 
-      four-place aircraft, it soon acquired a third row of seats,  +      four-place aircraft, it soon acquired a third row of seats, 
-      stretching it to a six-place plane. The 210 is classified  +      stretching it to a six-place plane. The 210 is classified 
-      as a high-performance airplane, which means its landing  +      as a high-performance airplane, which means its landing 
-      gear is retractable and its engine has more than 200  +      gear is retractable and its engine has more than 200 
-      horsepower. In its first model year, which was 1960,  +      horsepower. In its first model year, which was 1960, 
-      the 210 was powered by a 260-horsepower fuel-injected  +      the 210 was powered by a 260-horsepower fuel-injected 
-      six-cylinder engine that displaced 471 cubic inches.  +      six-cylinder engine that displaced 471 cubic inches. 
-      The 210 is the fastest single-engine airplane ever +      The 210 is the fastest single-engine airplane ever
       built by Cessna.       built by Cessna.
     </p>     </p>
Line 749: Line 798:
     * ''border-color'': any colour     * ''border-color'': any colour
     * Border width and colour can be specified for any of the four borders (e.g., ''border-top-width'', ''border-top-color'')     * Border width and colour can be specified for any of the four borders (e.g., ''border-top-width'', ''border-top-color'')
-  * Example: [[/~eechris/eg-259/examples/lecture2/borders.html|borders.html]]+  * Example: [[/eg-259/examples/lecture2/borders.html|borders.html]]
  
 ---- ----
  
-<code html> +<code html|An example of a simple table with various borders> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- borders.html <!-- borders.html
-     An example of a simple table with various borders +An example of a simple table with various borders 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Table borders </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      table {border-top-width: medium; +    <title> Table borders </title> 
-             border-bottom-width: thick; +    <style> 
-             border-top-color: red; +      table { 
-             border-bottom-color: blue; +        border-top-width: medium; 
-             border-top-style: dotted; +        border-bottom-width: thick; 
-             border-bottom-style: dashed; +        border-top-color: red; 
-            } +        border-bottom-color: blue; 
-      p {border-style: dashed; border-width: thin;  +        border-top-style: dotted; 
-         border-color: green +        border-bottom-style: dashed; 
-        }+      } 
 +      p { 
 +        border-style: dashed; 
 +        border-width: thin; 
 +        border-color: green 
 +      }
     </style>     </style>
   </head>   </head>
   <body>   <body>
     <table border = "5">     <table border = "5">
-      <caption> Fruit Juice Drinks </caption>+      <caption> 
 +        Fruit Juice Drinks 
 +      </caption>
       <tr>       <tr>
-        <th> </th>+        <th></th>
         <th> Apple </th>         <th> Apple </th>
         <th> Orange </th>         <th> Orange </th>
Line 788: Line 841:
         <th> Breakfast </th>         <th> Breakfast </th>
         <td> 0 </td>         <td> 0 </td>
-<td> 0 </td>+        <td> 0 </td>
       </tr>       </tr>
       <tr>       <tr>
Line 831: Line 884:
   * Padding -- the distance between the content of an element and its border   * Padding -- the distance between the content of an element and its border
   * Controlled by ''padding'', ''padding-left'', etc.   * Controlled by ''padding'', ''padding-left'', etc.
-  * Example: [[/~eechris/eg-259/examples/lecture2/marpads.html|marpads.html]].+  * Example: [[/eg-259/examples/lecture2/marpads.html|marpads.html]].
  
 ---- ----
  
-<code html> +<code html|An example to illustrate margins and padding> 
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +<!DOCTYPE html>
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +
 <!-- marpads.html <!-- marpads.html
-     An example to illustrate margins and padding +An example to illustrate margins and padding 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml"> +<html lang="en"> 
-  <head> <title> Table borders </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      p.one   {margin: 0.2in; +    <title> Table borders </title> 
-               padding: 0.2in; +    <style> 
-               background-color: #C0C0C0; +      p.one { 
-               border-style: solid; +        margin: 0.2in; 
-              } +        padding: 0.2in; 
-      p.two   {margin: 0.1in; +        background-color: #C0C0C0; 
-               padding: 0.3in; +        border-style: solid; 
-               background-color: #C0C0C0; +      } 
-               border-style: solid; +      p.two { 
-              } +        margin: 0.1in; 
-      p.three {margin: 0.3in; +        padding: 0.3in; 
-               padding: 0.1in; +        background-color: #C0C0C0; 
-               background-color: #C0C0C0; +        border-style: solid; 
-               border-style: solid; +      } 
-              } +      p.three { 
-p.four  {margin:0.4in; +        margin: 0.3in; 
-               background-color: #C0C0C0;} +        padding: 0.1in; 
-      p.five  {padding: 0.4in; +        background-color: #C0C0C0; 
-               background-color: #C0C0C0; +        border-style: solid; 
-              }+      } 
 +      p.four { 
 +        margin: 0.4in; 
 +        background-color: #C0C0C0; 
 +      } 
 +      p.five { 
 +        padding: 0.4in; 
 +        background-color: #C0C0C0; 
 +      }
     </style>     </style>
   </head>   </head>
Line 873: Line 932:
     <p class = "one">     <p class = "one">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [margin = 0.2in,+      learn to use style sheets. 
 +      <br /> 
 +      [margin = 0.2in,
       padding = 0.2in]       padding = 0.2in]
     </p>     </p>
     <p class = "two">     <p class = "two">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [margin = 0.1in,+      learn to use style sheets. 
 +      <br /> 
 +      [margin = 0.1in,
       padding = 0.3in]       padding = 0.3in]
     </p>     </p>
     <p class = "three">     <p class = "three">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [margin = 0.3in,+      learn to use style sheets. 
 +      <br /> 
 +      [margin = 0.3in,
       padding = 0.1in]       padding = 0.1in]
     </p>     </p>
     <p class = "four">     <p class = "four">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [margin = 0.4in,+      learn to use style sheets. 
 +      <br /> 
 +      [margin = 0.4in,
       no padding, no border]       no padding, no border]
     </p>     </p>
     <p class = "five">     <p class = "five">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [padding = 0.4in,+      learn to use style sheets. 
 +      <br /> 
 +      [padding = 0.4in,
       no margin, no border]       no margin, no border]
     </p>     </p>
Line 908: Line 977:
  
   * The ''background-image'' property   * The ''background-image'' property
-  * Example: [[/~eechris/eg-259/examples/lecture2/back_image.html|back_image.html]]+  * Example: [[/eg-259/examples/lecture2/back_image.html|back_image.html]]
   * Repetition can be controlled   * Repetition can be controlled
     * ''background-repeat'' property: possible values: ''repeat'' (default), ''no-repeat'', ''repeat-x'', or ''repeat-y''     * ''background-repeat'' property: possible values: ''repeat'' (default), ''no-repeat'', ''repeat-x'', or ''repeat-y''
Line 915: Line 984:
 ---- ----
  
-<code html> +<code html|An example to illustrate background images> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" +
-  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">+
 <!-- back_image.html <!-- back_image.html
-     An example to illustrate background images +An example to illustrate background images 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/xhtml xml:lang="en"> +<html lang="en"> 
-  <head> <title> Background images </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8"> 
-      body {background-image: url(c172.gif);} +    <title> Background images </title> 
-      p {margin-left: 30px; margin-right: 30px; +    <style> 
-         margin-top: 50px; font-size: 14pt; color: yellow}+      body { 
 +        background-image: url(c172.gif); 
 +      } 
 +      p { 
 +        margin-left: 30px; 
 +        margin-right: 30px; 
 +        margin-top: 50px; 
 +        font-size: 14pt; 
 +        color: yellow 
 +      }
     </style>     </style>
   </head>   </head>
Line 933: Line 1009:
     <p >     <p >
       The Cessna 172 is the most common general aviation airplane       The Cessna 172 is the most common general aviation airplane
-      in the world. It is an all-metal, single-engine piston, +      in the world. It is an all-metal, single-engine piston,
       high-wing four-place monoplane. It has fixed-gear and is       high-wing four-place monoplane. It has fixed-gear and is
       categorized as a non-high-performance aircraft. The current       categorized as a non-high-performance aircraft. The current
       model is the 172R.       model is the 172R.
-      The wingspan of the 172R is 36'1". Its fuel capacity is 56 +      The wingspan of the 172R is 36'1". Its fuel capacity is 56
       gallons in two tanks, one in each wing. The takeoff weight       gallons in two tanks, one in each wing. The takeoff weight
       is 2,450 pounds. Its maximum useful load is 837 pounds.       is 2,450 pounds. Its maximum useful load is 837 pounds.
-      The maximum speed of the 172R at sea level is 142 mph. +      The maximum speed of the 172R at sea level is 142 mph.
       The plane is powered by a 360 cubic inch gasoline engine       The plane is powered by a 360 cubic inch gasoline engine
-      that develops 160 horsepower. The climb rate of the 172R +      that develops 160 horsepower. The climb rate of the 172R
       at sea level is 720 feet per minute.       at sea level is 720 feet per minute.
     </p>     </p>
Line 1004: Line 1080:
   * [[eg-259:xhtml|The Structural Layer]]   * [[eg-259:xhtml|The Structural Layer]]
   * [[eg-259:css|The Presentation Layer]]   * [[eg-259:css|The Presentation Layer]]
-  * [[eg-259:html5|XHTML 2 and HTML 5]]+  * [[eg-259:html5|XHTML 2 and HTML5]]
   * [[eg-259:css3|CSS 3]]   * [[eg-259:css3|CSS 3]]
eg-259/css.1327072943.txt.gz · Last modified: 2012/01/20 15:22 by eechris