Cascading Style Sheet. Styles as Tag Attributes. Syntax. <h1>: what font type/size is used? STYLE = SELECTOR {RULES} Attributes such as bgcolor

Size: px

Start display at page:

Download "Cascading Style Sheet. Styles as Tag Attributes. Syntax. <h1>: what font type/size is used? STYLE = SELECTOR {RULES} Attributes such as bgcolor"

Darren Whitehead
5 years ago
Views:

Styles? Cascading Style Sheet http://www.eie.polyu.edu.hk/~nflaw/biclustering/index.html Request string: GET /~nflaw/biclustering/index.html HTTP/1.1 Host: www.eie.polyu.edu.hk 1 Response string: HTTP/1.

1 Styles? Cascading Style Sheet Request string: GET /~nflaw/biclustering/index.html HTTP/1.1 Host: 1 Response string: HTTP/ OK Server: Apache/ Content-type: text/html <html><head> <title>main Page</title> <style type= text/css > h1 {font-size: 20pt} p {text-indent: 1cm} </style> </head> <body>.. 2 </body></html> Styles as Tag Attributes <h1>: what font type/size is used? Default from browser Attributes such as bgcolor <body bgcolor= red > Mix content and presentation Difficult to manage / inconsistent CSS: separate data and presentation Separate style from content 3 Syntax STYLE = SELECTOR {RULES} Selector: HTML elements Rule: how the style changes RULES = NAME:VALUE; NAME:VALUE; Example: p { color: white; background-color: blue; } 4

2 Style Attribute Inline style: Style = CSS Style rule <p style= color:white; background-color: blue > A paragraph </p> local effect Apply to that <p> only, not other <p> tags Embedded Style Sheet Define in the head section using the style element Consistent styling throughout the doc Example: <head> <title> example </title> <style type= text/css p { color: white; background-color:blue} 5 </style> </head> 6 External Style Sheet Contain styles in another file (*.css) Separate content from presentation Consistent style for all pages in a web site Place a link in the head section <link rel= stylesheet href= sample.css /> <head> Separate Stylesheet <link rel="stylesheet" type="text/css" href="mystyles.css" /> <style type="text/css"> body { font-family: Tahoma, Arial, sans-serif; } </style> Page-Specific Styles </head> <body> <div style="padding:2px; "> Element-Specific Styles </body> 7 8

Cascade Cascade Most specific elements most precedence Order: Inline, embedded, external <td style = "background-color: green"> <p style = "background-color: red"> Hello, World</p></td> will display

3 Cascade Cascade Most specific elements most precedence Order: Inline, embedded, external <td style = "background-color: green"> <p style = "background-color: red"> Hello, World</p></td> will display with red background color Ref - CSS 9 From Web Style Guide: Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton Syntax: SELECTOR {RULES} Syntax: SELECTOR {RULES} Group selector: p, h3, h4 {color: white; background-color:blue} Universal selector (applies to all HTML elements): * {font-weight: bold} descendent selector p span {font-size: 12px} Class Selectors Apply to HTML element where the attribute CLASS is specified Example: in head section p.style1 {color:#ff0000} In body section <p class= style1 > red color text </p> 11 12

4 Syntax: SELECTOR {RULES} Generic Selectors Apply to HTML element where the attribute CLASS is specified Example: in head section.style2 {color:#ff0000} In body section <p class= style2 > red color text </p> <h1 class= style2 > red heading </h1> Syntax: SELECTOR {RULES} ID Selectors Apply to HTML element identified by specific ID Example: in head section p#parared {color:#ff0000} In body section <p id= parared > red color text </p> Pseudo classes Pseudo classes Styles that apply when sth happens :hover a:hover {color:#ff00ff} hover class applies when the mouse cursor is over the element 15 Unvisited link a:link {color:#ff0000} Visited link a:visited {color:#00ff00} Selected link a:active {color:#0000ff} Other browsers a:focus {color:#0000ff} focus class applies when an element has focus in IE 16

Descendant selectors h1 { color: red } em { color: green } h1 em { color: blue } <h1>hello</h1> <p>this <em>is a test</em></p> <h1><em>this</em> <span>headline is </span> <em>very important </em>

box { width: 280px; height: 200px; padding: 10px; border: 1px solid; margin: 15px; } </style> <p> Original paragraph with no style; </p> <p class="box"> Paragraph with style; Paragraph </p> <p>

5 Descendant selectors h1 { color: red } em { color: green } h1 em { color: blue } <h1>hello</h1> <p>this <em>is a test</em></p> <h1><em>this</em> <span>headline is </span> <em>very important </em> </h1> Difference between padding, border and margin <style type="text/css">.box { width: 280px; height: 200px; padding: 10px; border: 1px solid; margin: 15px; } </style> <p> Original paragraph with no style; </p> <p class="box"> Paragraph with style; Paragraph </p> <p> Original paragraph with no style; </p> Effective width = = 312px CSS Box Model Alternate stylesheet <head> <meta http-equiv= X-UA-Compatible content= IE=EmulateIE9 > <link rel="stylesheet href="page.css" media="all" type="text/css" />  <p class="test"> this is a paragraph. </p> 19 20

6 Alternate stylesheet Alternate stylesheet page.css: *.test {font-size: 18px;} ie7.css: *.test {border: 2px solid black; background-color: gold; } 21 22

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Mendel Rosenblum 1 Driving problem behind CSS What font type and size does introduction generate? Answer: Some default from the browser (HTML tells what browser how)