Css Handout

Some Characteristics in HTML
• Specific tags for desired display at different places

Examples
Cascading Style Sheets – <FONT COLOR=RED>Warning!</FONT>
– <H2 ALIGN=CENTER>Welcome to our site.</H2>
What, Why, How? – <STRONG>Keep your username and password private
and in a safe place.</STRONG>
Reference:
http://www.w3.org/Style/CSS/
Tutorial:
http://www.w3schools.com/css/default.asp
Styling in HTML Pages

– Multiple HTML pages at the same site can be
• Styling of HTML pages different in style
– Distributed, decentralized styling • Users can be easily confused
• What an individual item is, and should look like • Users typically dislike such sites
• Great flexibility, but hard to control, in page design • Maintenance cost can be very high
• 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
Cascading Style Sheets (CSS)

• Cascading Style Sheets (CSS) • Benefits of CSS – separating document content
– A computer language used to describe the stylistic
and structure
presentation of documents in structural languages, – Reduced complexity of the structural content
including HTML – Easier design, implementation, and maintenance
– Separating layout from content • Easier implementation of a large number of pages
– Allowing centralized definition of presentation style in common styles
– Implemented on newer browsers, • Easier changing of styles of a page, or a large
number of pages
e.g., IE5, Netscape7, Mozilla1.7, etc.
Reference:
http://www.w3.org/Style/CSS/
1
• Flexibility in CSS definition
– Greater control of presentation characteristics
– Author CSS, different levels
– Capable of specifying alternative rendering methods
for different devices or users • External: in a separate CSS-file (referenced from the HTML
– Improved content accessibility documents in <head> </head> section )
– Maybe used with HTML, XML, or other structured • Embedded:
document format – Typically in <head> </head> of an HTML page
in a <style> </style> block
• Inline: exactly where is needed
– User CSS • Cascading of styles

• Local CSS-file: specified by user in the browser – Inheritance: general to specific, or parent to
options
child
– Allowing specific user control
• External
• Embedded
• Inline
• Local browser option CSS-file
• Basic syntax of CSS

– Overriding, when in conflict – A style sheet consists of rules.
• In reverse order of inheritance given above – Comments in CSS are enclosed in a pair of /* and */.
• Specific overrides general – Each rule consists of
• A selector for which item the rule is specified
e.g., P, H2, BODY
• A declaration block – the specification
2
– The declaration block, rule specification
• A list of semicolon-separated declarations in curly Examples of popular CSS rules
braces
• Background image
• A declaration consists of a property, followed by a
body{background-image:url(‘butterfly.jpg')}
colon, followed by a value
• Background color
• Example rules body {background-color: yellow}
P {font-size: 20pt; font-family: garamopnd, sans- • Text color
serif;} h1 {color: green}
H1,H2 {font-size:25;} h2 {color: yellow}
The last semicolon is p {color:blue}
optional, but is often • Text font
used. h3 {font-family: times}
p {font-family: courier}
• Using classes for a set of alternatives

• Aligning text
– Often for variety
h1 {text-align: center}
– Declared in <HEAD> or a CSS file, used inline
h2 {text-align: left}
– Syntax:
h3 {text-align: right}
[TAG].CLASSNAME {property.value;}
• Indenting text
• Typically, several classes for the same tag
p {text-indent: 2cm}
• Often, a list of property.value;
• Space between characters • TAG is optional, without it mean all
h2 {letter-spacing: -3px}
h3 {letter-spacing: 0.5cm}
– Example rules – More example rules using classes

p.normal {font-weight: normal} p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.thick {font-weight: bold}
p.capitalize {text-transform: capitalize}
– Example applications, in HTML file:
– Example applications
<p class="normal"> <p class="uppercase">
This is a paragraph</p> This is some text in a paragraph
<p class="thick"> </p>
This is a paragraph</p> <p class="lowercase">
This is some text in a paragraph
This is a paragraph </p>
<p class="capitalize">
This is a paragraph This is some text in a paragraph
</p>
3
External Style • An HTML file references ExternalStySht.css
(In the same directory as the css file. In general, not necessarily so.)
• An external CSS is a style sheet file on its own, may be <HTML>
used (referenced, linked to) by many html files <HEAD>
<link rel="stylesheet" type="text/css" href="ExternalStySht.css">
• An example CSS file: </HEAD>
<BODY>
In a file named ExternalStySht.css <h1>My favorites</h1>
UL {margin-left:1cm; color:blue} <ul><li> Sea Foods
UL UL {color:red; text-decoration:underline;} <ul><li> Blue Crab
UL UL UL{color:green; margin-left:2cm;} <ul> <li> VA Beach</li> <li> Baltimore</li></ul></li>
<li> Coho Salmon</li></ul></li>
<li> Angus Steak
The rules specify UL at different levels.
<ul><li> Texas</li> <li>California</li></ul></li>
Note the inheritance and overriding.
<li> Cheese Cake</li>
The 1cm is inherited to the second level,
</ul>
but it is overridden in the third level.
</BODY>
The underline is inherited by the third level.
</HTML>
Each level has its own color.
http://www.cs.odu.edu/~shen/cs312/Cas
StySht/ExternalCSSExample.html
Embedded Style
• Another HTML file referencing the same ExternalStySht.css • Embedded style (defines the style in the HEAD of
<HTML>
<HEAD>
an HTML document, using class green)
<HTML>
<link rel="stylesheet" type="text/css" href="ExternalStySht.css">
<HEAD>
</HEAD>
<style type="text/css">
<BODY>
H1 {font-family:Arial;} EM {color:blue;}
<h1>My favorite Sports</h1>
P {font-family: Times; font-size: 16pt;}
<ul><li>Contact
.green {color:green}
<ul><li> Balls
</style>
<ul> <li> Basket ball</li> <li> Foot ball</li></ul></li>
</HEAD>
<li> Wrestling</li> <li> Boxing</li> </ul></li>
<BODY>
<li>Swimming
<h1 class="green">Example of embedded style</h1>
<ul><li> Free stroke</li> <li>Butterfly</li></ul></li>
<p> We just have a simple paragraph in here.</p>
<li>Hiking</li>
<p class="green">This second paragraph is green.
</ul>
<em>Did you notice</em> that dfinining a class uses a dot,
</BODY>
but using a class does not use a dot?</p>
</HTML>
</BODY>
http://www.cs.odu.edu/~shen/cs312/Cas </HTML>
StySht/ExternalCSSExample2.html http://www.cs.odu.edu/~shen/cs312/CasStySht/E
mbeddedCSSExample.html
• Similar example, added an H1 without referencing

class green In-line Style
<HTML>
<HEAD>
• Specified where it is needed
<style type="text/css"> Inside the tag of the selector, specify:
H1 {font-family:Arial;} EM {color:blue;} style =“declarationBlock”
P {font-family: Times; font-size: 16pt;} Allows flexibility, used
.green {color:green} – An example: only when wanting to
</style> <HTML> override.
</HEAD> <h1>Example of Inline CSS</h1>
<BODY>
<h1 class="green">Example of embedded style</h1> <p style = "font-size: 30pt"> This text is size 30 pt.</p>
<p> We just have a simple paragraph in here.</p> <p style = "font-size: 20pt; color: #FF0000">
<p class="green">This second paragraph is green. Style with two declarations, in 20pts and red. </p>
<em>Did you notice</em> that dfinining a class uses a dot, </HTML>
but using a class does not use a dot?</p>
<h1>H1 again, without referencing the class green. </h1>
</BODY> http://www.cs.odu.edu/~shen/cs312
</HTML> http://www.cs.odu.edu/~shen/cs312/Cas /CasStySht/InLineExample.html
StySht/EmbeddedCSSExample2.html
4
A CSS for tables • An HTML page, tables.html, using tables.css
<html>
We illustrate enforcing consistency of displaying tables in <head>
web pages, classes declared externally, used inline. <title>CSS for tables</title>
<link rel="stylesheet" type="text/css" href="tables.css">
• The tables.css </head>
body { font-family: "Courier"; background-color:
<body>
#BBBBBB; color: #FFFFFF;} <h1>Tables using CSS</h1>
table.structure { width: 50%; background: white;
border: 2px solid #000000} <table class="structure">
<tr>
td.label { width: 50%; font-family: "times"; color: <td class="label"> Name </td>
blue; font-size: 20pt;} <td class="value"> Johnson</td>
</tr>
td.value { width: 50%; font-family: "courier"; font-
style: italic; color: green; font-size: 18pt;}
<tr class="header">
<td class="label"> Sex</td>
Which CSS is more efficient?
<td class="value"> Male </td> • Generally the external CSS.
</tr>
</table> – The style sheet gets stored in the browser's cache.
<p> </p> – It can be ready for use immediately on all the pages
<table class="structure">
without the need for the stylesheet to be re-loaded.
<tr>
<td class="label"> Property </td> Faster than using inline or embedded stylesheets.
<td class="value"> Car </td> – It can be used by many pages
</tr>
<tr class="header">
• Enforcing basic common style
<td class="label"> Value </td> • Easier implementation and update
<td class="value"> $25,000 </td>
</tr>
</table>
</body>
</html>
http://www.cs.odu.edu/~shen/cs312/
CasStySht/tables.html
Style with absolute positions

<HTML>
<h1 style="position:absolute; top:100px; left:180px; z- See how
index:5;"> With top and left specification, z index 5. </h1> they
appear in
<img src="../PJ1AustriaCastle.jpg“ style="position:absolute; a browser.
top:90px; left:90px; z-index:1;">
Note the
<img src="../PJ1HuangShan1.jpg" style="position:absolute; positions
top:120px; left:120px; z-index:3;"> of the two
headings,
<h1 style="z-index:2;">This is for z index 2, no top and left and the
position specification.</h1> photos.
</HTML>
http://www.cs.odu.edu/~shen/cs312/
CasStySht/Absolute2.html
5
Not all exactly the same in two browsers
• Another example
<HTML>
Now, see the effect of <img src="../PJ1AustriaCastle.jpg" style="position:absolute;
the z index on the Access this page with both IE and Netscape, or additional browsers
headings. 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;
<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 CSS2

http://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 – The media specification
• If one or more is specified, then only the specified
• Example ones apply, others will have un-styled content.
<link rel="stylesheet" type="text/css" href=“mycss.css" • Values for the media attribute
media ="screen, tv" />
– Most commonly used: all, print, screen
– We have used (illustrated) the first three attributes.
– aural (for screen and audio devices)
– The last one, media, is for specified media for which
– handheld (for cell phones, PADs, etc.)
this CSS applies
– tv (for TVs)
– and some others
6
W3C CSS Validation Service Another nice example site
A free service that checks Cascading Style Sheets (CSS) in A nice site with examples and tutorials
(X)HTML documents or standalone for conformance to W3C http://css.maxdesign.com.au/
recommendations.
• A list with many styles of display
Available at: • Nested list options
http://jigsaw.w3.org/css-validator/ • Some CSS tutorials

Css Handout

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css Handout

Diunggah oleh

Hak Cipta:

Format Tersedia

Some Characteristics in HTML

• Specific tags for desired display at different places

Styling in HTML Pages

Cascading Style Sheets (CSS)

– User CSS • Cascading of styles

• Basic syntax of CSS

• Using classes for a set of alternatives

– Example rules – More example rules using classes

• Similar example, added an H1 without referencing

Style with absolute positions

CSS Level 1 and Level 2

• CSS2 builds on CSS2

Anda mungkin juga menyukai