ITNP43: HTML Lecture 4

Size: px

Start display at page:

Download "ITNP43: HTML Lecture 4"

Daisy Bishop
8 years ago
Views:

1 ITNP43: HTML Lecture 4 1 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 2 1

designed to specify the structure and content of a document Style (how

2 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> 3 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= # > (deprecated) 4 2

</p> </body> </html> 3 Style and HTML But web page designers wish to have control over how things look Fonts,

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 pages 5 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 6 3

sheets Reasonable support by latest browsers Revision CSS 2.

4 CSS Zen Garden Example See for an exercise in CSS styling. 7 Style Rules Style rules consist of: selector { property p : 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 8 4

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 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 t { color: red; } <h1 class= important >Attention!</h1> <p class= important >Red text.</p> 10 5

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

6 ID Selectors ID selectors are used to specify a style for a particular identified element id example: h1 { color: green; } h1#myhead21 { color: red; } <h1 id= myhead21 >Attention!</h1> Do not really need the element e.g.: #myhead21 { color: red; } 11 Inline styles Adding Styles to HTML style 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 in a separate file 12 6

: #myhead21 { color: red; } 11 Inline styles Adding Styles to HTML style information for individual HTML elements in the HTML

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> <p>just some <span style= color: blue >blue text.</span> This sentence is not blue.</p> 13 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> 14 7

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; } 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 <head> <link rel= stylesheet href= mypath/mystyles.css /> </head> relattribute 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 16 8

external style sheet document(s) it will use maybe more than one details next.

9 The Cascade More than one style sheet can affect a single document at one time A hierarchy is defined: GENERAL browser default settings user style settings (set in browser) linked external style sheets, in order listed embedded style sheets later rules have precedence over earlier rules inline styles SPECIFIC The specific overrides the general 17 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 18 9

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.

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%); } Background and foreground colours: h1 { background-color: silver; color: olive; } 19 Font family: Font Properties Usually specify specific and generic fonts e.g. { font-family: family: Arial, Verdana, sans-serif; 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; } 20 10

background-color: silver; color: olive; } 19 Font family: Font Properties Usually specify specific and generic fonts e.g. { font-family: family: Arial, Verdana, sans-serif; serif; } Font size: Absolute e.

11 <html> <head> <title>examples of CSS</title> <link rel="stylesheet" type="text/css" href="mystyles.css > <style type="text/css"> h1 { color: green; } h2 { color: maroon; } p { font-size: 18pt; font-family: Arial, sans-serif; } em { background-color: #8000ff; color: white; } li em { background-color: white; color: red; font-weight: bold; } </style> </head> 21 <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 mystyles.css is a good place to start to learn more about h1 { color: red; } what you can do.</p> p { font-size: 24pt; </body> font-family: Verdana, sans-serif; </html> color: blue; } p.border { color: white; background-color: navy; border-width: medium; border-style: inset; } 22 11

background-color: white; color: red; font-weight: bold; } </style> </head> 21 <body> <p class="border">this gives you a basic idea of how to use style sheets and how they "cascade".

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; } Vertical alignment e.g. p { vertical-align: sub; } <p>just some text <img style= vertical-align: middle src= myimage.jpg alt= nice picture > with an image in the middle.</p> Text spacing: Letter spacing e.g. p { letter-spacing: 8px; } Word spacing e.g. p { word-spacing: 1em; }

jpg alt= nice picture > with an image in the middle.</p> Text spacing: Letter spacing e.g. p { letter-spacing: 8px; } Word spacing e.

13 List Styles Bullets and numbering in lists are set with styles: e.g. ul { list-style-type: square; } eg e.g. ol { list-style-type: style type: upper-alpha; } 25 CSS Information W3C home page for 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 w3schools com/css/ Predefined style sheets

14 End of Lecture Next lecture: more CSS 27 14

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?