ITNP43: HTML Lecture 4 Niederst, Part III (3rd edn) 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
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 <i>wonderful</i> 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= #336699 > 4
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
CSS Zen Garden Example See www.csszengarden.com for an exercise in CSS styling. 7
Style rules consist of: Style Rules 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 8
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 { color: red; } <h1 class= important >Attention!</h1> <p class= important >Red text.</p> 10
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 11
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> 12
Embedded Style Sheets <style type= text/css > in header <head> <style type="text/css"> h1 { color: red; } p { font-size: 24pt; font-family: Verdana, sans-serif; } </style> <title>examples of CSS</title> </head> 13
External Style Sheets Put all style information in a separate file (e.g. mystyles.css) 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... 14
Linking Style Sheets <link> tag in HTML header <head> <link rel= stylesheet href= mypath/mystyles.css type= text/css /> </head> 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 15
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 later rules have precedence over earlier rules inline styles The specific overrides the general GENERAL SPECIFIC 16
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 17
Colour Specification By name: 16 named colours (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; } 18
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; } Niederst, Chapt 18 (3 rd edn) 19
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; } Niederst, Chapt 18 (3 rd edn) 20
21
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; } Niederst, Chapt 23 (3 rd edn) 22
CSS Information Validation: CSS validation at http://jigsaw.w3.org/css-validator/ can upload external style sheets or cut-and-paste style rules from embedded sheets Tutorials links to tutorials at http://www.w3.org/style/css/learning e.g. http://www.w3.org/markup/guide/style Predefined style sheets http://www.w3.org/stylesheets/core/ 23
Examples 24
End of Lecture Next lecture: more CSS 25