cscu9b2: web tech lecture 2 - computing science and ... · spring 2016 © university of stirling...

Spring 2016 © University

of Stirling

CSCU9B2: Making the Most of the

World Wide Web

1

CSCU9B2: Web Tech Lecture 2


of Stirling


World Wide Web

2

Style versus Content

• HTML purists insist that style should be

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


of Stirling


World Wide Web

3

Structure and Content

• Structure

– headings

– paragraphs

– lists

– tables

• Content

– text

– images

<html><head><title>My First Web Page</title></head><body><p>Hello world.</p><p>It is a <em>wonderful</em> day, today!</p></body></html>


of Stirling


World Wide Web

4

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>

– <font color=“#336699”> (deprecated)


of Stirling


World Wide Web

5

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

pages


of Stirling


World Wide Web

6

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

CSS Zen Garden Example

• See www.csszengarden.com

for an exercise in CSS styling.


of Stirling


World Wide Web

7


of Stirling


World Wide Web

8

Style Rules

• Style rules consist of:

selector { property : value }

declaration

• Selector identifies element(s) to be affected

– e.g. h1, p

• Declaration specifies particular style

instructions for the element

– e.g. colour, font


of Stirling


World Wide Web

9

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


of Stirling


World Wide Web

10

CLASS Selectors

• class selectors are used to specify different

possible styles for single elements

• class example:

h1 { color: green; }

h1.important { color: red; }

<h1 class=“important”>Attention!</h1>

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

.important { color: red; }

<h1 class=“important”>Attention!</h1>

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


of Stirling


World Wide Web

11

ID Selectors

• ID selectors are used to specify a style for a

particular (single) identified element

• id example:


h1#myhead21 { color: red; }

<h1 id=“myhead21”>Attention!</h1>

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

#myhead21 { color: red; }


of Stirling


World Wide Web

12

Adding Styles to HTML

• Inline styles

– style information for individual HTML elements in

the HTML document itself

– style attribute

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

• Embedded style sheets

– in HTML <head>

• External style sheets

– in a separate file


of Stirling


World Wide Web

13

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>

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

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


of Stirling


World Wide Web

14

Embedded Style Sheets

<style type=“text/css”> in header

Or in HTML5, just <style>

<head>

<style>

h1 { color: red; }

p { font-size: 24pt;

font-family: Verdana, sans-serif; }

</style>

<title>Examples of CSS</title>

</head>


of Stirling


World Wide Web

15

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)

• HTML document says which external style sheet document(s) it will use– maybe more than one

– details next ...

/* My styles */

h1 { color: red; }


font-family: Verdana, sans-serif; }


of Stirling


World Wide Web

16

Linking Style Sheets

• <link> tag in HTML header

– rel attribute defines linked document’s relationship

with current document e.g. stylesheet

• Can have more than one link per document

• Can have inline, embedded and linked styles

in one document

<head><link rel=“stylesheet” href=“mypath/mystyles.css”></head>


of Stirling


World Wide Web

17

Importing Style Sheets

• @import at beginning of style sheet

– rel attribute defines linked document’s relationship

with current document e.g. stylesheet

• Can import more than one sheet

• All imports must be before any new selectors

<style>@import url(“myotherstyles.css”);/* My new styles */h1 { color: red; }p { font-size: 24pt;

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


of Stirling


World Wide Web

18

The Cascade

• More than one style sheet can affect a single

document, so a hierarchy is defined:

– Browser default settings

– User style settings (set in browser)

– Linked external style sheets, in order listed

– Imported style sheets, in order listed

– Embedded style sheets

• Later rules have precedence over earlier rules

– Inline styles

• The specific overrides the general

– Override with !important keyword

GENERAL

SPECIFIC


of Stirling


World Wide Web

19

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

– colour specs could be given for individual list items

• overriding specs at the list or body levels


of Stirling


World Wide Web

20

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%); }

• Background and foreground colours:– h1 { background-color: silver; color: olive; }


of Stirling


World Wide Web

21

Font Properties• Font family:

– Usually specify specific and generic fonts

– 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

• Font weight and style:

– E.g p { font-weight: bold; font-style: italic; }


of Stirling


World Wide Web

22

<html>

<head>

<title>Examples of CSS</title>

<link rel="stylesheet" href="mystyles.css“>

<style>


h2 { color: maroon; }


font-family: Arial, sans-serif; }

em { background-color: #8000ff;

color: white; }

li em { background-color: white;

color: red;

font-weight: bold; }

</style>

</head>


of Stirling


World Wide Web

23

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


font-family: Verdana, sans-serif;

color: blue; }

p.border { color: white;

background-color: navy;

border-width: medium;

border-style: inset; }

mystyles.css


of Stirling


World Wide Web

24

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

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

• Text spacing:

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

– Word spacing e.g. p { word-spacing: 1em; }

<p>Just some text <img style=“vertical-align: middle”

src=“myimage.jpg” alt=“nice picture”> with an image

in the middle.</p>


of Stirling


World Wide Web

25


of Stirling


World Wide Web

26

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


of Stirling


World Wide Web

27

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

• Tutorials– http://www.w3schools.com/css/

• Predefined style sheets– www.csszengarden.com


of Stirling


World Wide Web

28

End of Lecture

Next Web Tech lecture: more HTML &

CSS

cscu9b2: web tech lecture 2 - computing science and ... · spring 2016 © university of stirling...

Documents