COMP519 Web Programming

Lecture 5: Cascading Style Sheets: Part 1

Handouts

Ullrich Hustadt

Department of Computer Science

School of Electrical Engineering, Electronics, and Computer Science

University of Liverpool

Contents

1 Style Sheets

Principle

History

Overview

2 Inline Styles

Overview

Properties and Values

3 Further Reading

COMP519 Web Programming Lecture 5 Slide L5 – 1

Style Sheets Principle

Style Sheets

•

HTML5 follows the separation of concerns design principle:

a system should be divided into parts with functionality that overlaps

as little as possible

; in HTML5 semantics and presentation are (mostly) separated

•

Concerns of presentation are dealt with using

Cascading Style Sheets (CSS)

COMP519 Web Programming Lecture 5 Slide L5 – 2

Style Sheets History

CSS: History

•

1996, W3C CSS Level 1 (CSS1)

Covers properties of fonts, texts, boxes; colours, pseudo classes

Very limited and buggy support in browsers

•

1998, W3C CSS Level 2 (CSS2)

Covers all of CSS1 plus selectors, media types, box model, tables,

bidirectional text, etc

Browser support still patchy

•

2011, W3C CSS Level 2 Revision 1 (CSS2.1)

Fixes errors, removes features from CSS2 with insuﬃcient browser

supports, adds others

•

2011 onwards, W3C CSS Level 3

Follows a modular speciﬁcation approach (lots of smaller speciﬁcations

instead of one very big one)

Covers all of CSS2.1 plus media queries, name spaces, ﬂexible layout, etc

COMP519 Web Programming Lecture 5 Slide L5 – 3

Style Sheets Overview

Cascading Style Sheet

•

Cascading Style Sheet are called cascading since they can be deﬁned at

diﬀerent levels:

1 Inline styles apply to a single HTML element

2 Document style sheets (aka embedded styles aka internal style sheets)

apply to all elements within the body-element of an HTML document

3 External style sheets can be linked and applied to numerous HTML

documents

•

Lower-level (that is, lower-numbered) style sheets can typically override

higher-level style sheets

•

Style sheets can specify how HTML elements should be presented on

diﬀerent screen types and/or in print

•

Web users can specify personalised style sheets that can override the

styles associated with an HTML document

This can be useful, for example, to specify larger font sizes for visually

impaired users

COMP519 Web Programming Lecture 5 Slide L5 – 4

Style Sheets Overview

Cascading Style Sheet

Cascading Style Sheet cover three aspects of style and layout:

•

Styling text

Deals with fonts, text colors, list item style, etc

•

Styling boxes

Deals with properties of boxes:

•

For the purpose of style and layout, all HTML elements are considered to be

boxes with the following properties:

•

Size of content, padding, border, margin, and box as well as their style

(e.g. colour) can be changed

•

Arranging boxes

Deals with the relative position of boxes to each other

COMP519 Web Programming Lecture 5 Slide L5 – 5

Inline Styles Overview

Inline Styles

Using the style attribute, one can specify the presentation style

for a single HTML element:

Within the value of the style attribute, list a sequence of

property:value pairs separated by semi-colons

Example:

To make an h1 element red with an italic font shape

•

set the font-style property to italic and

•

set the color property to red

<h1 s tyle =" font - sty le : it ali c ; color : red ">A Red H1 Heading </h1 >

For a complete list of properties and a description of each see

Mozilla and individual contributors: CSS reference. MDN Web Docs, 13 October 2017.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

(accessed 14 October 2017)

COMP519 Web Programming Lecture 5 Slide L5 – 6

Inline Styles Properties and Values

CSS Values: Lengths

•

One of the most important types of values in CSS are lengths

•

CSS distinguished between absolute lengths, measured in absolute

(length) units, and relative lengths, measured in relative (length) units

•

Relative length units specify a length relative to another length property

that is usually under user control

•

the size of fonts (controlled by browser settings)

•

the size of the viewport (controlled by resizing the browser window)

•

Absolute length units are various multiples of a ‘physical measurement’,

for example, the size of a screen pixel

COMP519 Web Programming Lecture 5 Slide L5 – 7

Inline Styles Properties and Values

CSS Values: Lengths

Relative Length Units

em current font-size

ex x-height of the current font

ch width of ”0” (zero) in the current font

rem font-size of the root element (typically 16px)

vw 1% of the width of the viewport

vh 1% of the height of the viewport

vmin 1% of viewport’s smaller dimension

vmax 1% of viewport’s larger dimension

The viewport is the user’s visible area of a web page, typically determined

by the size of the browser window

COMP519 Web Programming Lecture 5 Slide L5 – 8

Inline Styles Properties and Values

CSS Values: Lengths

Absolute Length Units

cm ‘centimeter’

mm ‘millimeter’

in ‘inch’ (1in = 96px = 25.4mm)

px pixel (1px = 1/96 in)

pt point (1pt = 1/72 1in)

pc pica (1pc = 12pt)

•

A CSS pixel is the visual angle of one

pixel on a device with a pixel density of

96dpi and a distance from the reader of

28in (0.2646mm).

•

A web client choosed the number of

physical pixels that best approximates a

CSS pixel

•

The multipliers between two absolute

length units are always as indicated above

COMP519 Web Programming Lecture 5 Slide L5 – 9

Inline Styles Properties and Values

Mobile Devices and Lengths

•

The interplay of CSS length units and mobile decives is problematic

•

On mobile devices in portrait orientation, web clients typically

•

render web pages in a viewport that is wider than the physical screen

•

then shrink the result to the physical screen

; HTML elements appear to shrink when switching from

landscape to portrait orientation

; Media queries might not work as expected

The viewport meta tag allows to control this behaviour or web clients

< meta name =" vie wpor t " con ten t =" wid th = device - width , initial - sca le =1" >

COMP519 Web Programming Lecture 5 Slide L5 – 10

Inline Styles Properties and Values

CSS Values: Font sizes

CSS allows to specify the size of a font in a number of diﬀerent ways,

including:

•

Via a length

•

Via a percentage:

Scales the font relative to the size of the current font

•

Via one of the following keywords:

Keyword Typical scaling factor

xx-large 200%

x-large 150%

large 110%

mediam 100%

small 80%

x-small 60%

xx-small 55%

COMP519 Web Programming Lecture 5 Slide L5 – 11

Inline Styles Properties and Values

CSS Values: Colours

CSS allows to specify colours in a number of diﬀerent ways, including:

•

Via colour keywords:

CSS has about 140 names for a wide range of colours, for example:

red, green, blue, gold, peachpuff, snow, rebeccapurple

•

Via hexadecimal notation: #RRGGBB

deﬁnes a colour as a mix of the colours red, green and blue

R (red), G (green), B (blue) are hexadecimal characters (0-9, A-F)

representing three numbers between 0 and 255, which in turn, specify

the intensity of that colour

Example: #FF000 deﬁnes the color red

•

Via functional notation: rgb(R,G,B)

deﬁnes a colour as a mix of the colours red, green and blue

R (red), G (green), B (blue) are either decimal numbers between 0 and

255 or percentages 0% to 100% that again specify the intensity of that

colour

COMP519 Web Programming Lecture 5 Slide L5 – 12

Inline Styles Properties and Values

Inline Styles: Properties and Values

font-family: Courier, monospace

font-style: italic

font-size: 12pt | larger

font-weight: bold

color: AliceBlue | #F0F8FF

background-color: AliceBlue | #F0F8FF

text-decoration: underline | none

text-align: left | right | center | justify

text-indent: 10pt

vertical-align: top | middle | bottom

This is a right - justi fied pa r agra ph in a sans serif font

with some < span style =" col or : gr een "> green text </ span >

and <a style =" color : Red ; text - decor ation : none ; font - size : larger ;"

href =" page01 . html "> here </ a > is a for m atte d link .</p >

COMP519 Web Programming Lecture 5 Slide L5 – 13

Inline Styles Properties and Values

Inline Styles: Properties and Values

list-style-type: disc | circle | square | none

list-style-type: decimal | lower-alpha | upper-roman

margin-left: 0.1in padding-top: 0.1in

margin-right: 3em padding-bottom: 3em

margin: 5% padding: 5%

<li s tyle =" co lor : red "> first thing </ li >

< spand s tyle =" co lor : bl ack "> second thing </ span > </li >

</ol >

COMP519 Web Programming Lecture 5 Slide L5 – 14

Inline Styles Properties and Values

Inline Styles: Properties and Values

list-style-type: disc | circle | square | none

list-style-type: decimal | lower-alpha | upper-roman

margin-left: 0.1in padding-top: 0.1in

margin-right: 3em padding-bottom: 3em

margin: 5% padding: 5%

one thing </ li >

or another </ li >

</ul >

COMP519 Web Programming Lecture 5 Slide L5 – 15

Inline Styles Properties and Values

Inline Styles: Properties and Values

border-width thin | thick | 5

border-color Blue | #0000FF

border-style dashed | dotted | double | none

< table s tyle =" border - sty le : dashed ; border - color :bl ue " >

< capt ion styl e =" color : red ; font - style : it ali c ;

text - dec orat i on : un derli ne "> Stu dent data </ caption >

<tr > < td > Chr is Smith </td >< td >19 </ td ></ tr >

<tr > < td > Pat Jones </td >< td >20 </ td ></ tr >

<tr > < td > Doogie Howser </ td > < td >15 </ td ></ tr >

</ table >

COMP519 Web Programming Lecture 5 Slide L5 – 16