css handout
TRANSCRIPT
1
Cascading Style Sheets
What, Why, How?
Tutorial:http://www.w3schools.com/css/default.asp
Reference:http://www.w3.org/Style/CSS/
Some Characteristics in HTML• Specific tags for desired display at different places
Examples– <FONT COLOR=RED>Warning!</FONT>– <H2 ALIGN=CENTER>Welcome to our site.</H2>– <STRONG>Keep your username and password private
and in a safe place.</STRONG>
Styling in HTML Pages• Styling of HTML pages
– Distributed, decentralized styling• What an individual item is, and should look like• Great flexibility, but hard to control, in page design• Same type of items in different parts of a page can
be very different in style– Maybe desirable– Maybe confusing
• Changing a style in different parts – requires individual efforts
– Multiple HTML pages at the same site can be different in style
• Users can be easily confused• Users typically dislike such sites• Maintenance cost can be very high
Cascading Style Sheets (CSS)• Cascading Style Sheets (CSS)
– A computer language used to describe the stylistic presentation of documents in structural languages, including HTML
– Separating layout from content– Allowing centralized definition of presentation style– Implemented on newer browsers,
e.g., IE5, Netscape7, Mozilla1.7, etc.
Reference:http://www.w3.org/Style/CSS/
• Benefits of CSS – separating document content and structure– Reduced complexity of the structural content– Easier design, implementation, and maintenance
• Easier implementation of a large number of pages in common styles
• Easier changing of styles of a page, or a large number of pages
2
– Greater control of presentation characteristics– Capable of specifying alternative rendering methods
for different devices or users– Improved content accessibility– Maybe used with HTML, XML, or other structured
document format
• Flexibility in CSS definition– Author CSS, different levels
• External: in a separate CSS-file (referenced from the HTML documents in <head> </head> section )
• Embedded: – Typically in <head> </head> of an HTML page
in a <style> </style> block
• Inline: exactly where is needed
– User CSS• Local CSS-file: specified by user in the browser
options– Allowing specific user control
• Cascading of styles– Inheritance: general to specific, or parent to
child• External• Embedded• Inline• Local browser option CSS-file
– Overriding, when in conflict• In reverse order of inheritance given above• Specific overrides general
• Basic syntax of CSS– A style sheet consists of rules.– Comments in CSS are enclosed in a pair of /* and */.– Each rule consists of
• A selector for which item the rule is specifiede.g., P, H2, BODY
• A declaration block – the specification
3
– The declaration block, rule specification• A list of semicolon-separated declarations in curly
braces• A declaration consists of a property, followed by a
colon, followed by a value• Example rules
P {font-size: 20pt; font-family: garamopnd, sans-serif;}
H1,H2 {font-size:25;}
The last semicolon is optional, but is often used.
Examples of popular CSS rules• Background image
body{background-image:url(‘butterfly.jpg')}• Background color
body {background-color: yellow}• Text color
h1 {color: green}h2 {color: yellow}p {color:blue}
• Text fonth3 {font-family: times}p {font-family: courier}
• Aligning texth1 {text-align: center}h2 {text-align: left}h3 {text-align: right}
• Indenting textp {text-indent: 2cm}
• Space between charactersh2 {letter-spacing: -3px}h3 {letter-spacing: 0.5cm}
• Using classes for a set of alternatives– Often for variety– Declared in <HEAD> or a CSS file, used inline– Syntax:
[TAG].CLASSNAME {property.value;}• Typically, several classes for the same tag• Often, a list of property.value;• TAG is optional, without it mean all
– Example rulesp.normal {font-weight: normal}p.thick {font-weight: bold}
– Example applications, in HTML file:<p class="normal">This is a paragraph</p><p class="thick">This is a paragraph</p>
This is a paragraph
This is a paragraph
– More example rules using classesp.uppercase {text-transform: uppercase}p.lowercase {text-transform: lowercase}p.capitalize {text-transform: capitalize}
– Example applications<p class="uppercase">This is some text in a paragraph</p><p class="lowercase">This is some text in a paragraph</p><p class="capitalize">This is some text in a paragraph</p>
4
External Style• An external CSS is a style sheet file on its own, may be
used (referenced, linked to) by many html files
• An example CSS file:In a file named ExternalStySht.css
UL {margin-left:1cm; color:blue}UL UL {color:red; text-decoration:underline;}UL UL UL{color:green; margin-left:2cm;}
The rules specify UL at different levels.Note the inheritance and overriding.The 1cm is inherited to the second level,but it is overridden in the third level. The underline is inherited by the third level.Each level has its own color.
• An HTML file references ExternalStySht.css(In the same directory as the css file. In general, not necessarily so.)
<HTML><HEAD><link rel="stylesheet" type="text/css" href="ExternalStySht.css"></HEAD><BODY><h1>My favorites</h1><ul><li> Sea Foods
<ul><li> Blue Crab<ul> <li> VA Beach</li> <li> Baltimore</li></ul></li>
<li> Coho Salmon</li></ul></li><li> Angus Steak
<ul><li> Texas</li> <li>California</li></ul></li><li> Cheese Cake</li>
</ul></BODY></HTML>http://www.cs.odu.edu/~shen/cs312/CasStySht/ExternalCSSExample.html
• Another HTML file referencing the same ExternalStySht.css<HTML><HEAD><link rel="stylesheet" type="text/css" href="ExternalStySht.css"></HEAD><BODY><h1>My favorite Sports</h1><ul><li>Contact
<ul><li> Balls<ul> <li> Basket ball</li> <li> Foot ball</li></ul></li>
<li> Wrestling</li> <li> Boxing</li> </ul></li><li>Swimming
<ul><li> Free stroke</li> <li>Butterfly</li></ul></li><li>Hiking</li>
</ul></BODY></HTML>http://www.cs.odu.edu/~shen/cs312/CasStySht/ExternalCSSExample2.html
Embedded Style• Embedded style (defines the style in the HEAD of
an HTML document, using class green)<HTML><HEAD><style type="text/css">H1 {font-family:Arial;} EM {color:blue;}P {font-family: Times; font-size: 16pt;}.green {color:green}</style></HEAD><BODY><h1 class="green">Example of embedded style</h1><p> We just have a simple paragraph in here.</p><p class="green">This second paragraph is green.<em>Did you notice</em> that dfinining a class uses a dot,but using a class does not use a dot?</p></BODY></HTML>
http://www.cs.odu.edu/~shen/cs312/CasStySht/EmbeddedCSSExample.html
• Similar example, added an H1 without referencing class green<HTML><HEAD><style type="text/css">H1 {font-family:Arial;} EM {color:blue;}P {font-family: Times; font-size: 16pt;}.green {color:green}</style></HEAD><BODY><h1 class="green">Example of embedded style</h1><p> We just have a simple paragraph in here.</p><p class="green">This second paragraph is green.<em>Did you notice</em> that dfinining a class uses a dot,but using a class does not use a dot?</p><h1>H1 again, without referencing the class green. </h1></BODY></HTML> http://www.cs.odu.edu/~shen/cs312/Cas
StySht/EmbeddedCSSExample2.html
In-line Style• Specified where it is needed
Inside the tag of the selector, specify: style =“declarationBlock”
– An example:<HTML><h1>Example of Inline CSS</h1><p style = "font-size: 30pt"> This text is size 30 pt.</p><p style = "font-size: 20pt; color: #FF0000">Style with two declarations, in 20pts and red. </p></HTML>
http://www.cs.odu.edu/~shen/cs312/CasStySht/InLineExample.html
Allows flexibility, used only when wanting to override.
5
A CSS for tablesWe illustrate enforcing consistency of displaying tables in web pages, classes declared externally, used inline.
• The tables.css
body { font-family: "Courier"; background-color: #BBBBBB; color: #FFFFFF;}table.structure { width: 50%; background: white; border: 2px solid #000000}td.label { width: 50%; font-family: "times"; color: blue; font-size: 20pt;}td.value { width: 50%; font-family: "courier"; font-style: italic; color: green; font-size: 18pt;}
• An HTML page, tables.html, using tables.css
<html><head><title>CSS for tables</title><link rel="stylesheet" type="text/css" href="tables.css">
</head>
<body><h1>Tables using CSS</h1>
<table class="structure"><tr>
<td class="label"> Name </td><td class="value"> Johnson</td>
</tr>
<tr class="header"><td class="label"> Sex</td><td class="value"> Male </td>
</tr></table><p> </p><table class="structure"><tr>
<td class="label"> Property </td><td class="value"> Car </td>
</tr><tr class="header">
<td class="label"> Value </td><td class="value"> $25,000 </td>
</tr></table>
</body></html>
http://www.cs.odu.edu/~shen/cs312/CasStySht/tables.html
Which CSS is more efficient?• Generally the external CSS.
– The style sheet gets stored in the browser's cache.– It can be ready for use immediately on all the pages
without the need for the stylesheet to be re-loaded. Faster than using inline or embedded stylesheets.
– It can be used by many pages• Enforcing basic common style• Easier implementation and update
Style with absolute positions<HTML><h1 style="position:absolute; top:100px; left:180px; z-index:5;"> With top and left specification, z index 5. </h1>
<img src="../PJ1AustriaCastle.jpg“ style="position:absolute; top:90px; left:90px; z-index:1;">
<img src="../PJ1HuangShan1.jpg" style="position:absolute; top:120px; left:120px; z-index:3;">
<h1 style="z-index:2;">This is for z index 2, no top and left position specification.</h1></HTML>http://www.cs.odu.edu/~shen/cs312/CasStySht/Absolute2.html
See how they appear in a browser.
Note the positions of the two headings, and the photos.
6
Now, see the effect of the z index on the headings.
Not all exactly the same in two browsers• Another example
<HTML><img src="../PJ1AustriaCastle.jpg" style="position:absolute;
top:90px; left:90px; z-index:1;">Access this page with both IE and Netscape, or additional browsers
and see how it appears. <p>View the source code, vary the window size too.</p><h1 style="position:absolute; top:20px; left:180px; z-index:5;">
They don't necessarily work the in the same way. </h1><img src="../PJ1HuangShan1.jpg" style="position:absolute;
top:120px; left:120px; z-index:3;"><h1>Second Phrase</h1><h1 style=“z-index:2;”>Third Phrase</h1><h2>More text, and let's see how it shows up in the page</h2>Other text.<h1 style="position:absolute; top:95px; left:180px; z-index:2;"> Can
you notice the difference? </h1></HTML>http://www.cs.odu.edu/~shen/cs312/CasStySht/Absolute.html
CSS Level 1 and Level 2• What we have discussed in the front are CSS1
http://www.w3.org/TR/REC-CSS1
• CSS2 builds on CSS2http://www.w3.org/TR/CSS2/Overview.html– Covers most of CSS1– Supports media specific style sheets– Many other features
• Internationalization• Font downloading• Properties related to user interface• Etc.
The link tag for external CSS file• Example<link rel="stylesheet" type="text/css" href=“mycss.css"
media ="screen, tv" />– We have used (illustrated) the first three attributes.– The last one, media, is for specified media for which
this CSS applies
– The media specification• If one or more is specified, then only the specified
ones apply, others will have un-styled content.• Values for the media attribute
– Most commonly used: all, print, screen– aural (for screen and audio devices)– handheld (for cell phones, PADs, etc.)– tv (for TVs)– and some others
7
W3C CSS Validation Service
A free service that checks Cascading Style Sheets (CSS) in (X)HTML documents or standalone for conformance to W3C recommendations.
Available at:http://jigsaw.w3.org/css-validator/
Another nice example site
A nice site with examples and tutorialshttp://css.maxdesign.com.au/
• A list with many styles of display• Nested list options• Some CSS tutorials