ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~SLIDESHOW~~





====== The Presentation Layer ======

HTML is designed to define only the structure of a web document. The cascading style sheet (CSS) standard provides a
way to define how a document, or collection of documents, will look. Cascading style sheets also allow
certain user interface effects to be achieved. 
  * This part of the lecture introduces the concept of a style sheet
  * Explains how style sheets fit into the philosophy of HTML
  * And describes the structure of HTML documents.













===== Cascading Style Sheets =====

Applying a common "look and feel" to a collection of web documents.

  * [[eg-259:css#cascading_style_sheets|Introduction to CSS]]
  * [[eg-259:css#introduction_to_css|Levels of Style Sheets]]
  * [[eg-259:css#style_specification_formats|Style Specification Formats]]
  * [[eg-259:css#selector_forms|Selector Forms]]
  * [[eg-259:css#property_value_forms|Property Value Forms]]
  * [[eg-259:css#font_properties|Font Properties]]
  * [[eg-259:css#list_properties|List Properties]]
  * [[eg-259:css#colours|Colours]]
  * [[eg-259:css#alignment_of_text|Alignment of Text]]
  * [[eg-259:css#the_box_model|The Box Model]]
  * [[eg-259:css#background_images|Background images]]
  * [[eg-259:css#the_span_and_div_tags|The <span> and <div> tags]]



===== Introduction to CSS =====

  * Provides the means to control and change presentation of HTML documents
    * The CSS1 specification was developed in 1996
    * CSS2 was released in 1998
    * Support for [[eg-259:css3|CSS3]] is gradually being added to modern browsers.
  * CSS is not technically HTML, but can be embedded in HTML documents
  * Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents
  * Style is specified for a tag by the values of its properties 




===== Levels of Style Sheets =====

  * There are three levels of style sheets
    - //In-line styles sheets// -- specified for a specific occurrence of a tag and apply only to that tag
    - //Document-level style sheets// -- apply to the whole document in which they appear
    - //External style sheets// -- can be applied to any number of documents

----

  * When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence
  * In a sense, the browser searches for a style property specification, starting with in-line, until it finds one (or there isn't one)
  * In-line style sheets appear in the tag itself and apply only to that tag.
  * Document-level style sheets appear in the head of the document
  * External style sheets are in separate files, potentially on any server on the Internet
  * **Note**: Use of in-line style sheets is fine-grain, which should be used sparingly as otherwise it defeats the purpose of style sheets –- uniform style



===== Style Specification Formats =====

Format depends on the level of the style sheet
  * [[eg-259:css#in-line_style_sheets|In-line Style Sheets]]
  * [[eg-259:css#document-level_style_sheets|Document-level Style Sheets]]
  * [[eg-259:css#external_style_sheets|External Style Sheets]]


===== In-line Style Sheets =====
  * Style sheet appears as the value of the ''style'' attribute
<code css>
    style = "property_1: value_1;
             property_2: value_2;
             . . .;
             property_n: value_n"
</code>

----

  * Style sheet appears as a list of rules that are the  content of a ''<style>'' tag
  * Comments in the rule list must have a different form -- use C comments (''/*  ... */'')


===== Document-level style sheets =====

<code html>
       <style>
           rule list
       </style>
</code>
  * Form of the rules: ''selector {list of property/values}''
  * Each property/value pair has the form: ''property: value''
  * Pairs are separated by semicolons, just as in the value of a ''<style>'' tag

===== External style sheets =====

  * Form is a list of style rules, as in the content of a ''<style>'' tag for document-level style sheets
  * Written as text files with the MIME type ''text/css''
  * A ''<link>'' tag in the HTML header is used to specify that the browser is to fetch and use an external style sheet file:
<code html>
      <head>
       <link rel="stylesheet" href="http://www.swan.ac.uk/style.css" />
      </head>
</code>
  * External style sheets can be validated http://jigsaw.w3.org/css-validator/validator-upload.html.





===== Selector Forms =====
  * 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:
    - //[[eg-259:css#simple_selector_forms|Simple element selectors]]//
    -  //[[eg-259:css#class_selector_forms|Class selectors]]//
    -  //[[eg-259:css#generic_selector_forms|Generic selectors]]//
    - //[[eg-259:css#id_selector_forms|id selectors]]//
    - //[[eg-259:css#pseudo_classes|Pseudo classes]]//
  * We shall look at each of these in the following slides


===== Simple Selector Forms ====

  * The selector is a tag name or a list of tag names, separated by commas
  * Examples:

    h1, h3
    p

  * Contextual selectors:

    ol ol li


===== Class Selector Forms ===== 

  * Used to allow different occurrences of the same tag to use different style specifications
  * A style class has a name, which is attached to a tag name
  * For example:
<code css>
     p.narrow {property/value list}
     p.wide {property/value list}
</code>
  * The class you want on a particular occurrence of a tag is specified with the ''class'' attribute of the tag

----

  * For example:
<code html>
      <p class = "narrow">    <p class = "wide">
       . . .                   . . .
      </p>                    </p>
      . . .
</code>


===== Generic Selector Forms =====

  * A generic class can be defined if you want a style to apply to more than one kind of tag
  * A generic class must be named, and the name must begin with a period
  * Example:

    .really-big { . . . }

  * Use it as if it were a normal style class:
<code html>
       <h1 class = "really-big"> . . . </h1>
       . . .
       <p class = "really-big"> . . . </p>
</code>





===== id Selector Forms =====

  * An ''id'' selector allow the application of a style to **one** specific element
  * General form: ''#specific-id {property-value list}''
  * Example:
<code css>
   #section14 {font-size: 20;}
</code>
  * The ''id'' tag must be set on the corresponding element.
  * Only one element is allowed to have the same ''id''.



===== Pseudo Classes =====

  * Pseudo classes are styles that apply when something happens, rather than because the target element simply exists
  * Names begin with colons
  * '':hover'' classes apply when the mouse cursor is over the element
  * '':focus'' classes apply when an element has focus
  * Example: [[/eg-259/examples/lecture2/pseudo.html|pseudo.html]]

----
<code html|Illustrates the :hover and :focus pseudo classes>
<!DOCTYPE html>
<!-- pseudo.html
Illustrates the :hover and :focus pseudo classes
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Checkboxes </title>
    <style type="text/css">
      input:hover {
        color: red;
      }
      input:focus {
        color: green;
      }
    </style>
  </head>
  <body>
    <form action="">
      <p>
        Your name:
        <input type="text" placeholder="type something to see the effect" />
      </p>
    </form>
  </body>
</html>
</code>
===== Property Value Forms =====

  * There are 60 different properties in 7 categories:
    * Fonts
    * Lists
    * Alignment of text
    * Margins
    * Colours
    * Backgrounds
    * Borders

[ [[eg-259:html5|Jump to HTML 5]] ]

===== Forms of Property Value =====

  * //Keywords// -- ''left'', ''small'', etc
  * //Length// -- numbers, maybe with decimal points and a unit specification
  * //Percentage// -- just a number followed immediately by a percent sign
  * //URL values// <code>      url(protocol://server/pathname)</code>
  * //Colours// -- colour name, or Red Green Blue values ''rgb(n1, n2, n3)'', or Hexadecimal form ''#XXXXXX''

----

//**Notes**//

  * The names of keyword properties are not case sensitive
  * Length Units:

         px -- pixels
         in -- inches
         cm -- centimeters
         mm -- millimeters
         pt -- points
         pc -- picas (12 points)
         em -- height of the letter 'm'
         ex-height -- height of the letter 'x'

    * No space is allowed between the number and the unit specification, e.g. ''1.5 in''  is illegal!
  * Property values are inherited by all nested tags, unless overridden






===== Font Properties =====

  * [[eg-259:css#font_family|Font family]]
  * [[eg-259:css#font_size_style_and_weight|Font size, style and weight]]
  * [[eg-259:css#the_font-property|The font property]]
  * [[eg-259:css#examples_of_the_use_of_font|Examples of the use of font]]

===== Font family =====

  * Value is a list of font names -- browser uses the first in the list it has
  * ''font-family'': ''Arial'', ''Helvetica'', ''Courier''
  * Generic fonts: ''serif'', ''sans-serif'', ''cursive'', ''fantasy'', and ''monospace''  (defined in CSS)
  * If a font name has more than one word, it should be single-quoted as in '''Times New Roman'''

----

  * Browser has a specific font for each generic font





===== Font size, style and weight =====

  * ''font-size'' -- Possible values: a length number or a name such as ''smaller'', ''xx-large'', etc.
  * ''font-style'' -- ''italic'', ''oblique'', ''normal''
  * ''font-weight'' -- degrees of boldness: ''bolder'', ''lighter'', ''bold'', ''normal''
  
----

The ''font-weight'' can be specified as a multiple of 100 (100 – 900)


===== The font property =====

  * For specifying a list of font properties you can use the ''font'' property:
<code css>
    font: bolder 14pt Arial Helvetica
</code>
  * Order must be: ''style'', ''weight'', ''size'', ''name(s)''



===== Examples of the Use of Font =====

  * Example 1:  [[/eg-259/examples/lecture2/fonts.html|fonts.html]]
  * 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//
<code html|An example to illustrate font properties>
<!DOCTYPE html>
<!-- fonts.html
An example to illustrate font properties
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Font properties </title>
    <style>
      p.big {
        font-size: 14pt;
        font-style: italic;
        font-family: 'Times New Roman';
      }
      p.small {
        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>
  <body>
    <p class = "big">
      If a job is worth doing, it's worth doing right.
    </p>
    <p class = "small">
      Two wrongs don't make a right, but they certainly
      can get you in a lot of trouble.
    </p>
    <h2> Chapter 1 Introduction </h2>
    <h3> 1.1 The Basics of Computer Networks </h3>
  </body>
</html>
</code>

//Example 2//

The HTML code [[/eg-259/examples/lecture2/fonts2.html|fonts2.html]]:
<code html|An example to test external style sheets>
<!DOCTYPE html>
<!-- fonts2.html
An example to test external style sheets
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> External style sheets </title>
    <link rel = "stylesheet" href = "styles.css" />
  </head>
  <body>
    <p class = "big">
      If a job is worth doing, it's worth doing right.
    </p>
    <p class = "small">
      Two wrongs don't make a right, but they certainly
      can get you in a lot of trouble.
    </p>
    <h2> Chapter 1 Introduction </h2>
    <h3> 1.1 The Basics of Computer Networks </h3>
  </body>
</html>
</code>
The External Stylesheet [[/eg-259/examples/lecture2/styles.css|styles.css]]:
<code css|an external style sheet for use with fonts2.html>
/* styles.css - an external style sheet
 for use with fonts2.html
 */
p.big {
  font-size: 14pt;
  font-style: italic;
  font-family: 'Times New Roman';
}
p.small {
  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
}
</code>

//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 =====

  * 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

----
Example3
<code html|An example to illustrate some additional font properties>
<!DOCTYPE html>
<!-- fonts3.html
An example to illustrate some additional font properties
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Text decoration </title>
    <style>
      p.through {
        text-decoration: line-through;
      }
      p.over {
        text-decoration: overline;
      }
      p.under {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p class = "through">
      This illustrates line-through
    </p>
    <p class= "over">
      This illustrates overline
    </p>
    <p class = "under">
      This illustrates underline
    </p>
  </body>
</html>
</code>






===== List properties =====

  * [[eg-259:css#list_style_typeunordered_lists|List style type: unordered lists]]
  * [[eg-259:css#list_style_typeordered_lists|List style type: ordered lists]]



===== List style type: unordered lists =====

  * Bullet can be a ''disc'' (default), a ''square'', or a ''circle''
  * Set it on either the ''<ul>'' or ''<li>'' tag
  * On ''<ul>'', it applies to the whole list:
<code html>
      <h3> Some Common Single-Engine Aircraft </h3>
      <ul style = "list-style-type: square">
        <li> Cessna Skyhawk </li>
        <li> Beechcraft Bonanza </li>
        <li> Piper Cherokee </li>
      </ul>
</code>
  * Could use an image for the bullets in an unordered list
<code html>
        <li style = "list-style-image:url(bird.jpg)">
</code>





===== List style type: ordered lists =====

  * On ordered lists ''list-style-type'' can be used to change the sequence values

^ Property value   ^   Sequence type   ^   First four   ^
| ''decimal''      |   Arabic numerals | 1, 2, 3, 4     |
| ''upper-alpha''  |   UC letters      | A, B, C, D     |
| ''lower-alpha''  |   LC letters      | a, b, c, d     |
| ''upper-roman''  |   UC Roman        | I, II, III, IV |
| ''lower-roman''  |   LC Roman        | i, ii, iii, iv |

  * Example: [[/eg-259/examples/lecture2/sequence_types.html|sequence_types.html]].

----

<code html>
<!DOCTYPE html>
<!-- sequence_types.html
An example to illustrate sequence type styles
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Sequence types </title>
    <style>
      ol {
        list-style-type: upper-roman;
      }
      ol ol {
        list-style-type: upper-alpha;
      }
      ol ol ol {
        list-style-type: decimal;
      }
    </style>
  </head>
  <body>
    <h3> Aircraft Types </h3>
    <ol>
      <li>
        General Aviation (piston-driven engines)
        <ol>
          <li>
            Single-Engine Aircraft
            <ol>
              <li>
                Tail wheel
              </li>
              <li>
                Tricycle
              </li>
            </ol>
          </li>
          <li>
            Dual-Engine Aircraft
            <ol>
              <li>
                Wing-mounted engines
              </li>
              <li>
                Push-pull fuselage-mounted engines
              </li>
            </ol>
          </li>
        </ol>
      </li>
      <li>
        Commercial Aviation (jet engines)
        <ol>
          <li>
            Dual-Engine
            <ol>
              <li>
                Wing-mounted engines
              </li>
              <li>
                Fuselage-mounted engines
              </li>
            </ol>
          </li>
          <li>
            Tri-Engine
            <ol>
              <li>
                Third engine in vertical stabilizer
              </li>
              <li>
                Third engine in fuselage
              </li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </body>
</html>
</code>
  * CSS2 has more list style type properties, like ''lower-greek'' and ''hebrew''.






===== Colours =====

  * Colour is a problem for the Web for two reasons:
    - Monitors vary widely
    - Browsers vary widely
  * There are three colour collections
    - [[eg-259:css#named_colours|Named colours]]
    - [[eg-259:css#the_web_palette|Web palette]]
    - [[eg-259:css#the_full_palette|The full colour palette]]
  * [[eg-259:css#using_colours|Using colours]]



===== Named Colours =====

There is a set of 16 colours that are guaranteed to be displayable by all graphical browsers on all colour monitors

|  black   |   000000   |    green    |   008000 |
|  silver  |   C0C0C0   |     lime    |   00FF00 |
|  gray    |   808080   |     olive   |   808000 |
|  white   |   FFFFFF   |     yellow  |   FFFF00 |
|  maroon  |   800000   |     navy    |   000080 |
|  red     |   FF0000   |     blue    |   0000FF |
|  purple  |   800080   |     teal    |   008080 |
|  fuchia  |   FF00FF   |     aqua    |   00FFFF |



===== The Web Palette =====

  * The //Web Palette// is a much larger set of colours
  * Designed to give similar results on most monitor/browser combinations
  * 216 colours
  *  Use hexadecimal colour values of ''00'', ''33'', ''66'', ''99'', ''CC'', and ''FF''

===== The Full Palette =====

  * Any one of 16 million different colours
  * may give different results on different monitor and browser combinations



===== Using Colours =====

  * 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: [[/eg-259/examples/lecture2/back_color.html|back_color.html]]

----

Example of the use of the ''color'' property:
<code html|An example to illustrate the color property>
<!DOCTYPE html>
<!-- back_color.html
An example to illustrate the color property
-->
<html lang="en">
  <head>
    <meta charset="utf=8" />
    <title> background-color </title>
    <style>
      th.red {
        color: red
      }
      th.orange {
        color: orange
      }
    </style>
  </head>
  <body>
    . . .
    <table border = "5">
      <tr>
        <th class = "red"> Apple </th>
        <th class = "orange"> Orange </th>
        <th class = "orange"> Screwdriver </th>
      </tr>
    </table>
  </body>
</html>
</code>

Example of the use of the ''background-color'' property:
<code html|An example to illustrate the background-color property>
<!DOCTYPE html>
<!-- back_color.html
An example to illustrate the background-color property
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> background-color </title>
    <style>
      p.redback {
        font-size: 24pt;
        color: blue;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p class = "redback">
      To really make it standout, use a red background!
    </p>
  </body>
</html>
</code>



===== Alignment of Text =====

  * The ''text-indent'' property allows indentation
  * Takes either a length or a % value
  * The ''text-align'' property has the possible values, ''left'' (the default), ''center'', ''right'', or ''justify''
  * Sometimes we want text to flow around another element using the ''float'' property
  * The ''float'' property has the possible values, ''left'', ''right'', and ''none'' (the default)

----

If we have an element we want on the right,
with text flowing on its left, we use the
default ''text-align'' value (''left'') for the text and
the ''right'' value for ''float'' on the element we
want on the right

Example: [[/eg-259/examples/lecture2/float.html|float.html]]

<code html|An example to illustrate the float property>
<!DOCTYPE html>
<!-- float.html
An example to illustrate the float property
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> The float property </title>
    <style>
      img {
        float: right
      }
    </style>
  </head>
  <body>
    <p>
      <img src = "c210new.jpg" alt = "Picture of a Cessna 210" />
    </p>
    <p>
      This is a picture of a Cessna 210. The 210 is the flagship
      single-engine Cessna aircraft. Although the 210 began as a
      four-place aircraft, it soon acquired a third row of seats,
      stretching it to a six-place plane. The 210 is classified
      as a high-performance airplane, which means its landing
      gear is retractable and its engine has more than 200
      horsepower. In its first model year, which was 1960,
      the 210 was powered by a 260-horsepower fuel-injected
      six-cylinder engine that displaced 471 cubic inches.
      The 210 is the fastest single-engine airplane ever
      built by Cessna.
    </p>
  </body>
</html>
</code>

Typical results:
{{eg-259:l2-float.png?500|An example of the use of float}}








===== The Box Model =====

{{eg-259:l2-boxmodel.png|The box model}}



===== The Box Model – Borders =====

  * Every element has a ''border-style'' property which controls whether the element has a border and if so, the style of the border
    * ''border-style'' values: ''none'', ''dotted'', ''dashed'', and ''double''
    * ''border-width'': ''thin'', ''medium'' (default), ''thick'', or a length value in pixels
    * ''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'')
  * Example: [[/eg-259/examples/lecture2/borders.html|borders.html]]

----

<code html|An example of a simple table with various borders>
<!DOCTYPE html>
<!-- borders.html
An example of a simple table with various borders
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Table borders </title>
    <style>
      table {
        border-top-width: medium;
        border-bottom-width: thick;
        border-top-color: red;
        border-bottom-color: blue;
        border-top-style: dotted;
        border-bottom-style: dashed;
      }
      p {
        border-style: dashed;
        border-width: thin;
        border-color: green
      }
    </style>
  </head>
  <body>
    <table border = "5">
      <caption>
        Fruit Juice Drinks
      </caption>
      <tr>
        <th></th>
        <th> Apple </th>
        <th> Orange </th>
        <th> Screwdriver </th>
      </tr>
      <tr>
        <th> Breakfast </th>
        <td> 0 </td>
        <td> 0 </td>
      </tr>
      <tr>
        <th> Lunch </th>
        <td> 1 </td>
        <td> 0 </td>
        <td> 0 </td>
      </tr>
      <tr>
        <th> Dinner </th>
        <td> 0 </td>
        <td> 0 </td>
        <td> 1 </td>
      </tr>
    </table>
    <p>
      Now is the time for all good Web programmers to
      learn to use style sheets.
    </p>
  </body>
</html>
</code>


===== The Box Model – Margins =====

  * Margin -- the space between the border of an element and its neighbour element
  * The margins around an element can be set with ''margin-left'', etc. -- just assign them a length value
  * Example:
<code html>
     <img src = "c210.jpg " 
           style = "float: right;
                    margin-left: 0.35in;
                    margin-bottom: 0.35in" />
</code>



===== The Box Model – Padding =====


  * Padding -- the distance between the content of an element and its border
  * Controlled by ''padding'', ''padding-left'', etc.
  * Example: [[/eg-259/examples/lecture2/marpads.html|marpads.html]].

----

<code html|An example to illustrate margins and padding>
<!DOCTYPE html>
<!-- marpads.html
An example to illustrate margins and padding
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Table borders </title>
    <style>
      p.one {
        margin: 0.2in;
        padding: 0.2in;
        background-color: #C0C0C0;
        border-style: solid;
      }
      p.two {
        margin: 0.1in;
        padding: 0.3in;
        background-color: #C0C0C0;
        border-style: solid;
      }
      p.three {
        margin: 0.3in;
        padding: 0.1in;
        background-color: #C0C0C0;
        border-style: solid;
      }
      p.four {
        margin: 0.4in;
        background-color: #C0C0C0;
      }
      p.five {
        padding: 0.4in;
        background-color: #C0C0C0;
      }
    </style>
  </head>
  <body>
    <p>
      Here is the first line.
    </p>
    <p class = "one">
      Now is the time for all good Web programmers to
      learn to use style sheets.
      <br />
      [margin = 0.2in,
      padding = 0.2in]
    </p>
    <p class = "two">
      Now is the time for all good Web programmers to
      learn to use style sheets.
      <br />
      [margin = 0.1in,
      padding = 0.3in]
    </p>
    <p class = "three">
      Now is the time for all good Web programmers to
      learn to use style sheets.
      <br />
      [margin = 0.3in,
      padding = 0.1in]
    </p>
    <p class = "four">
      Now is the time for all good Web programmers to
      learn to use style sheets.
      <br />
      [margin = 0.4in,
      no padding, no border]
    </p>
    <p class = "five">
      Now is the time for all good Web programmers to
      learn to use style sheets.
      <br />
      [padding = 0.4in,
      no margin, no border]
    </p>
    <p>
      Here is the last line.
    </p>
  </body>
</html>
</code>



===== Background Images =====

  * The ''background-image'' property
  * Example: [[/eg-259/examples/lecture2/back_image.html|back_image.html]]
  * Repetition can be controlled
    * ''background-repeat'' property: possible values: ''repeat'' (default), ''no-repeat'', ''repeat-x'', or ''repeat-y''
    * ''background-position property'': possible values: ''top'', ''center'', ''bottom'', ''left'', or ''right''

----

<code html|An example to illustrate background images>
<!DOCTYPE html>
<!-- back_image.html
An example to illustrate background images
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> Background images </title>
    <style>
      body {
        background-image: url(c172.gif);
      }
      p {
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 50px;
        font-size: 14pt;
        color: yellow
      }
    </style>
  </head>
  <body>
    <p >
      The Cessna 172 is the most common general aviation airplane
      in the world. It is an all-metal, single-engine piston,
      high-wing four-place monoplane. It has fixed-gear and is
      categorized as a non-high-performance aircraft. The current
      model is the 172R.
      The wingspan of the 172R is 36'1". Its fuel capacity is 56
      gallons in two tanks, one in each wing. The takeoff weight
      is 2,450 pounds. Its maximum useful load is 837 pounds.
      The maximum speed of the 172R at sea level is 142 mph.
      The plane is powered by a 360 cubic inch gasoline engine
      that develops 160 horsepower. The climb rate of the 172R
      at sea level is 720 feet per minute.
    </p>
  </body>
</html>
</code>






===== The <span> and <div> tags =====

  * One problem with the style properties is that they apply to whole elements, which are often too large
  * Solution: define a new tag to define an element in the content of a larger element -- ''<span>''
  * The default meaning of ''<span>'' is to leave the content as it is:
<code html>
     <p>
       Now is the <span> best time </span> ever!
     </p>
</code>

----

  * Use ''<span>'' to apply a document style sheet to its content:
<code html>
      <style type = "text/css">?
             bigred {font-size: 24pt;
                     font-family: Ariel; 
                     color: red}
      </style>
      <p>
         Now is the
            <span class = "bigred">
         best time </span> ever!
      </p>
</code>

{{eg-259:l2-span.png|Use of the span tag}}

===== The <span> and <div> tags (continued) =====



  * The ''<span>'' tag is similar to other HTML tags, it can be nested and they have ''id'' and ''class'' attributes
  * Another tag that is useful for style specifications is ''<div>''
    * Used to create document sections (or divisions) for which style can be specified
    * e.g., a section of paragraphs for which you want some particular local style to apply

----
By default ''<div>'' is a block-level tag and ''<span>'' is an in-line tag, although these definitions
can be overridden by style declarations.




===== The Structural and Presentation Layers =====

  * [[eg-259:lecture2|Lecture Home]]
  * [[eg-259:xhtml|The Structural Layer]]
  * [[eg-259:css|The Presentation Layer]]
  * [[eg-259:html5|XHTML 2 and HTML5]]
  * [[eg-259:css3|CSS 3]]