6.#styling#the#web:# cascading#style#sheets#(css)# · lec6-css.ppt author: dave parker created...
TRANSCRIPT
6. Styling the Web: Cascading Style Sheets (CSS)
Dr. Dave Parker
Informa@on and the Web, 2014/15
1
Reminders & No@ces • Assignments
– #1 (XML/DTDs) – due Monday 4pm – #2 (XHTML/CSS) – out next week
• Exercises – #3 out now – see also the Notes sec@on for content not yet covered
• Ques@ons?
2
Today • XHTML: Basic example
• Cascading Style Sheets: CSS – introduc@on – a\aching CSS to (X)HTML – selec@on rules – examples
3
XHTML: Basic structure • Basic structure of a valid (Strict) XHTML file:
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!!<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">!
!<head>!! !<meta http-equiv="Content-Type" ! ! ! content="text/html; charset=utf-8" />!! !<title>Title goes here…</title>!!</head>!!<body>!! !...!!</body>!
</html>!
CSS • CSS = Cascading Style Sheets
– basic mechanism for styling (and layout) of web pages – rules: how to display each element in a HTML document
• Advantages – easy to create/maintain style for whole web site – separa@on of content and presenta@on – powerful (coverage, flexibility, structured)
• Disadvantages – mul@ple versions (“levels”), browser support, quirks
5
A\aching CSS to (X)HTML • 1. Inline: use the style a\ribute of HTML elements
– e.g. <p style="color:red;">This text is important.</p> – occasionally useful, avoid if possible
• 2. Embed CSS stylesheet inside HTML – some@mes useful, but prevents re-‐use
• 3. Link to an external CSS stylesheet – most common approach
6
A\aching CSS to (X)HTML • 2. Embed CSS stylesheet inside HTML (in the header)
• 3. Link to an external CSS stylesheet
7
...!<head>! <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />! <title>...</title>! <style type="text/css">...</style>!</head>!
...!<head>! <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />! <title>...</title>! <link type="text/css" rel="stylesheet" href="mystyle.css" />!</head>!
Simple CSS example
8
body {!!font-family: arial;!
}!!li {!
!background-color: green;!!color: white;!
}!
Selector
Property Value
Selec@on rules • Selec@on by element
– li { color:red; } (any <li>)
• Selec@on by id – p#intro { color:red; } (the <p id="intro">) – #intro { color:red; } (the element with id=”intro”)
• Selec@on by class – a.important { color:red; } (any <a class="important">) – .important { color:red; } (elements with class "important")
• Grouped selectors – li, a.important { color:red; } (either)
9
More selec@on rules • Descendent selector
– p#intro a { color: blue; } – (<a>s somewhere inside <p id="intro">)
• Child selector – p#intro > h3 { color: blue; } – (<h3>s that are children of <p id="intro">)
• Adjacent sibling detector – h2 + p { color: blue; } – (first <p> aper a <h2>, at the same level)
• And many more… 10
What can we change with CSS? • Almost all aspects of presenta@on
– fonts, text style/decora@on – colours, images – size, layout, posi@oning – and more…
• Web references – CSS notes on module web site – plus linked external references
11
Summary • XHTML – basic structure
• Introduc@on to CSS – principles – a\aching CSS to (X)HTML – selec@on rules
• Exercise classes – experiment with CSS – use the online resources
12