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:31] – eechriseg-259:css [2012/01/20 16:39] (current) – [The Structural and Presentation Layers] eechris
Line 222: Line 222:
     <meta charset="utf-8" />     <meta charset="utf-8" />
     <title> Checkboxes </title>     <title> Checkboxes </title>
-    <style>+    <style type="text/css">
       input:hover {       input:hover {
         color: red;         color: red;
Line 235: Line 235:
       <p>       <p>
         Your name:         Your name:
-        <input type="text"  />+        <input type="text" placeholder="type something to see the effect" />
       </p>       </p>
     </form>     </form>
Line 336: Line 336:
 ---- ----
 //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 HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.dtd"> +
 <!-- fonts.html <!-- fonts.html
-     An example to illustrate font properties +An example to illustrate font properties 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/HTML" 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 373: Line 381:
 //Example 2// //Example 2//
  
-The HTML code [[/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 HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.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/HTML" 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 401: Line 407:
 </code> </code>
 The External Stylesheet [[/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>
  
Line 428: Line 439:
 ---- ----
 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 HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.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/HTML" 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 508: Line 524:
  
 <code html> <code html>
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.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/HTML" 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 526: 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 619: Line 662:
  
 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 HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.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/HTML" 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 648: 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 HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.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/HTML" 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 693: Line 739:
 Example: [[/eg-259/examples/lecture2/float.html|float.html]] Example: [[/eg-259/examples/lecture2/float.html|float.html]]
  
-<code html> +<code html|An example to illustrate the float property> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.dtd"> +
 <!-- 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/HTML" 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 712: 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 755: Line 802:
 ---- ----
  
-<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 HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.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/HTML" 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 790: 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 837: Line 888:
 ---- ----
  
-<code html> +<code html|An example to illustrate margins and padding> 
-<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 1.1//EN" +<!DOCTYPE html>
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.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/HTML"> +<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 875: 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 917: 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 HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.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/HTML 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 935: 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 1078:
  
   * [[eg-259:lecture2|Lecture Home]]   * [[eg-259:lecture2|Lecture Home]]
-  * [[eg-259:HTML|The Structural Layer]]+  * [[eg-259:xhtml|The Structural Layer]]
   * [[eg-259:css|The Presentation Layer]]   * [[eg-259:css|The Presentation Layer]]
-  * [[eg-259:html5|HTML 2 and HTML 5]]+  * [[eg-259:html5|XHTML 2 and HTML5]]
   * [[eg-259:css3|CSS 3]]   * [[eg-259:css3|CSS 3]]
eg-259/css.1327073463.txt.gz · Last modified: 2012/01/20 15:31 by eechris