The Presentation Layer

~~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.

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 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
1. In-line styles sheets – specified for a specific occurrence of a tag and apply only to that tag
2. Document-level style sheets – apply to the whole document in which they appear
3. 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

In-line Style Sheets

Style sheet appears as the value of the style attribute

    style = "property_1: value_1;
             property_2: value_2;
             . . .;
             property_n: value_n"

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

       <style>
           rule list
       </style>

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:

      <head>
       <link rel="stylesheet" href="http://www.swan.ac.uk/style.css" />
      </head>

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:
1. Simple element selectors
2. Class selectors
3. Generic selectors
4. id selectors
5. 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:

     p.narrow {property/value list}
     p.wide {property/value list}

The class you want on a particular occurrence of a tag is specified with the class attribute of the tag

For example:

      <p class = "narrow">    <p class = "wide">
       . . .                   . . .
      </p>                    </p>
      . . .

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:

       <h1 class = "really-big"> . . . </h1>
       . . .
       <p class = "really-big"> . . . </p>

id Selector Forms

An id selector allow the application of a style to one specific element
General form: #specific-id {property-value list}
Example:

   #section14 {font-size: 20;}

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: pseudo.html

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>

Property Value Forms

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

[ 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
```
      url(protocol://server/pathname)
```
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

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:

    font: bolder 14pt Arial Helvetica

Order must be: style, weight, size, name(s)

Examples of the Use of Font

Example 1: fonts.html
Example 2: fonts2.html: styles applied with external stylesheet styles.css

Example 1

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>

Example 2

The HTML code fonts2.html:

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>

The External Stylesheet styles.css:

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
}

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 fonts3.html.
letter-spacing: value is any length property value

Example3

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>

List properties

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:

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

Could use an image for the bullets in an unordered list

        <li style = "list-style-image:url(bird.jpg)">

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: sequence_types.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>

CSS2 has more list style type properties, like lower-greek and hebrew.

Colours

Colour is a problem for the Web for two reasons:
1. Monitors vary widely
2. Browsers vary widely
There are three colour collections
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: color.html
The background-color property specifies the background colour of elements: back_color.html

Example of the use of the color property:

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>

Example of the use of the background-color property:

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>

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: float.html

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>

Typical results:

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: borders.html

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>

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:

     <img src = "c210.jpg " 
           style = "float: right;
                    margin-left: 0.35in;
                    margin-bottom: 0.35in" />

The Box Model – Padding

Padding – the distance between the content of an element and its border
Controlled by padding, padding-left, etc.
Example: marpads.html.

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>

Background Images

The background-image property
Example: 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

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>

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:

     <p>
       Now is the <span> best time </span> ever!
     </p>

Use <span> to apply a document style sheet to its content:

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

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.

Table of Contents