ITNP43: HTML Lecture 4

(1)

ITNP43: HTML Lecture 4

Autumn 2014 © University of Stirling

ITNP43: Interface Design and the World Wide Web

1

Style versus Content

• HTML purists insist that

style

should be

separate from

content and structure

separate from

content and structure

– HTML was only designed to specify the structure and content of a document

– Style (how things look) is left up to software that displays HTML documents -web browsers

(2)

Structure and Content

• Structure

<html> <h d> – headings – paragraphs – lists – tables

• Content

<head>

<title>My First Web Page</title> </head> <body> <p> Hello world. </p> <p> Autumn 2014 © University of Stirling

3 – text

– images

p

It is a <em>wonderful</em> day, today! </p>

</body> </html>

Style and HTML

• But web page designers wish to have control

over how things look

– Fonts, colours – Page layout

• So HTML does include tags and attributes to

specify some aspects of style

– <i>, <b>

(3)

Style Sheets

• We might wish to specify style separately

from content and structure in a “

style sheet

”

– give page designer full control over style

• A

style sheet

specifies the style of page

elements

– e.g. I want all my headings in red

• One style sheet may serve for many different

5

pages

Cascading Style Sheets (CSS)

• HTML style sheets are known as cascading style sheets

– Reasonable support by latest browsers – Revision CSS 2.1 widely used

– (Parts of) CSS 3 implemented

• “Cascade” refers to the fact that a hierarchy of style information may be specified (details later)

• Style information may be in the HTML file itself or in a separate file

• Style sheets consist of rules for specifying how page elements should be displayed

(4)

CSS Zen Garden Example

• See

www.csszengarden.com

for an exercise in CSS styling.

7

Style Rules

• Style rules consist of:

selector { property : value }

{ p p

y

}

declaration

• Selector

identifies element(s) to be affected

– e.g. h1, p

• Declaration

specifies particular style

instructions for the element

(5)

Contextual Selectors

• Style attributes can be specified according to

their context, e.g.

– we may specify that emphasized text should be red:

em { color: red; }

– an overriding rule can specify that any emphasized text in a list item should be green:

li em { color: green; }

9

li em { color: green; }

CLASS Selectors

• class

selectors are used to specify different

possible styles for single elements

class

e ample

• class

example:

h1 { color: green; }

h1.important { color: red; } <h1 class=“important”>Attention!</h1>

• Can be non-tag specific (note the dot):

i t t { l d } .important { color: red; }

<h1 class=“important”>Attention!</h1> <p class=“important”>Red text.</p>

(6)

ID Selectors

• ID

selectors are used to specify a style for a

particular identified element

id

e ample

• id

example:

h1 { color: green; }

h1#myhead21 { color: red; } <h1 id=“myhead21”>Attention!</h1>

• Do not really need the element e.g.:

# h d21 { l d }

11

#myhead21 { color: red; }

Adding Styles to HTML

• Inline

styles

– style information for individual HTML elements instyle information for individual HTML elements in the HTML document itself

– styleattribute

– e.g. <h1 style=“color: red”>Red Head</h1>

• Embedded

style sheets

– in HTML <head>

• External

style sheets

(7)

Inline Styles with Scope

• <div>

and

<span>

– These are HTML tags for delimiting parts of a document that a style will be applied to

<div style=“color: blue”> <h1>My Heading</h1> <p>Just some blue text.</p> </div>

13 <p>Just some <span style=“color: blue”>blue

text.</span> This sentence is not blue.</p>

Embedded Style Sheets

<style type=“text/css”>

in header

Or in HTML5, just

<style>

h1 { color: red; } p { font-size: 24pt;

font-family: Verdana, sans-serif; } </style>

</style>

<title>Examples of CSS</title> </head>

(8)

External Style Sheets

• Put all style information in a separate file (e.g.

mystyles.css)

– Just your style rules (no need for the <style> tag) h1 { color: red; }

p { font-size: 24pt;

font-family: Verdana, sans-serif; }

15

• HTML document says which external style

sheet document(s) it will use

– maybe more than one

– details next ...

Linking Style Sheets

• <link>

tag in HTML header

– relattribute defines linked document’s relationship with current document e.g. stylesheet

<head>

• Can have more than one link per document

• Can have inline, embedded and linked styles

(9)

The Cascade

• More than one style sheet can affect a single

document at one time

• A hierarchy is defined:

– browser default settings

– user style settings (set in browser)

– linked external style sheets, in order listed – embedded style sheets

GENERAL

17 • later rules have precedence over earlier rules

– inline styles

• The specific overrides the general

SPECIFIC

Inheritance

• This kind of

hierarchy

applies to HTML tag

attributes, as well

• Style properties are passed down from a

parent element to any child element, e.g.

– colour specifications for text at the <body>level apply to the whole document, except ...

– colour specs for lists are applied to every list item • this colour spec would override spec at the body level • this colour spec would override spec at the body level – colour specs could be given for individual list items

(10)

Colour Specification

• By name:

– 140 named colours in CSS 3 – (17 in CSS 2.1)

– e.g. h1 { color: olive; }

• By RGB value – a variety of ways:

– { color: #0080FF; } – { color: rgb(0,128,255); } – { color: rgb(0% 50% 100%); }

19

{ color: rgb(0%, 50%, 100%); }

• Background and foreground colours:

– h1 { background-color: silver; color: olive; }

Font Properties

• Font family:

– Usually specify specific and generic fonts e g { font family: Arial Verdana sans serif; }

– e.g. { font-family: Arial, Verdana, sans-serif; }

• Font size:

– Absolute e.g. p { font-size: small; } or { font-size: 9pt; }

– Relative e.g. p { font-size: 0.8em; } or { font-size: 80%; }

– Relative is best for accessibility

Differences in how relative sizes are inherited – Differences in how relative sizes are inherited

• Font weight and style:

(11)

<title>Examples of CSS</title>

h1 { color: green; }{ g ; } h2 { color: maroon; } p { font-size: 18pt;

font-family: Arial, sans-serif; } em { background-color: #8000ff;

color: white; }

li em { background-color: white;

21 color: red; font-weight: bold; } </style> </head> <body> …

<p class="border">This gives you a basic idea of how to use style sheets

and how they "cascade". There are a great many elements of style that can be specified with style sheets. Niederst's Web Design in a Nutshell is a good place to start to learn more about what you can do.</p>

</body> </html>

h1 { color: red; } p { font-size: 24pt;

font-family: Verdana, sans-serif; color: blue; }

mystyles.css

p.border { color: white; background-color: navy; border-width: medium; border-style: inset; }

(12)

Text Properties

• Text (and inline element) alignment:

– Indent first line of text e.g. p { text-indent: 20px; }

Horizontal alignment e g p { text align: center; }

– Horizontal alignment e.g. p { text-align: center; }

– Vertical alignment e.g. p { vertical-align: sub; }

• Text spacing:

<p>Just some text <img style=“vertical-align: middle” src=“myimage.jpg” alt=“nice picture”> with an image in the middle.</p>

23

• Text spacing:

– Letter spacing e.g. p { letter-spacing: 8px; }

(13)

List Styles

• Bullets and numbering in lists are set with styles:

– e.g. ul { list-style-type: square; }

e g ol { list style type: upper alpha; }

– e.g. ol { list-style-type: upper-alpha; }

25

CSS Information

• W3C home page for CSS

– www.w3.org/Style/CSS/

• Validation:

– CSS validation at jigsaw.w3.org/css-validator/

– can upload external style sheets or cut-and-paste style rules from embedded sheets