Scribd
Upload
470 views

Css Handout

Cascading Style Sheets (CSS) allow separation of document content from style, which provides benefits like centralized control of presentation, easier maintenance, and flexibility. CSS uses selectors to specify rules that control the styling of elements, and declarations with properties and values to define aspects like color, font, and layout. Styles can be defined internally, externally, or inline, and rules are applied based on specificity and inheritance.

Uploaded by

api-26082976
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
470 views

Css Handout

Cascading Style Sheets (CSS) allow separation of document content from style, which provides benefits like centralized control of presentation, easier maintenance, and flexibility. CSS uses selectors to specify rules that control the styling of elements, and declarations with properties and values to define aspects like color, font, and layout. Styles can be defined internally, externally, or inline, and rules are applied based on specificity and inheritance.

Uploaded by

api-26082976
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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;
top:90px; left:90px; z-index:1;">
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;
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 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

You might also like