Cascading Style Sheets

Transcript Cascading Style Sheets

Cascading Style Sheets
August 25-26, 2004
What is CSS?
• a means for web authors to separate
the appearance of web pages from
the content of web pages
• is a recommendation of the World
Wide Web Consortium (the W3C).
History of CSS
• CSS 1 became a recommendation in late
1996
• CSS 2 became a recommendation in May
of 1998.
• CSS 2, revision 1 was released in January
2003
CSS Mobile Profile
• a scaled down version of CSS 2.1
specification, appropriate to mobile, or
wireless devices
Style Sheet
• A text file with a .css extension
• SS may be in a embedded in a web page
or, preferably, in a separate file with the
.css extension.
Embedded vs Linked SS
• Embedded
<style type="text/css"> </style>
• Linked
<link rel="stylesheet"
type="text/css"
href=“basicstyle.css" />
Rules
• Correspond to elements in an HTML
document. Elements are <p>, <body>…
• Rules correspond to HTML elements.
• A Rule which selects the body is called a
body selector or
body
• An example
p {font-family: verdana; color: red}
Syntax
body {
font-family: Verdana, “Times
New Roman", Helvetica, sansserif;
font-size: 1em;
text-align: justify;
}
Syntax
• Every statement must have a selector and a
declaration.
• The declaration is one or more properties
separated by semicolons.
• Each property has a property name followed by a
colon and then the value for that property.
• Sometimes a property can take a number of
values. The values in the list should be separated
by a comma and a space.
• White space can be used to make your style
sheet easier to read and write.
Comments
/* This is a style sheet comment */
What is the syntax of an HTML comment?
Why Shouldn’t Your
bgcolor=“ffffff”?
Download a Web Page
• Create a working directory (playpen)
• Download (Right click the link/
Save target as) the Bill of Rights web
page from the class schedule to the
playpen directory.
Link To An External CSS
• Using Notepad to edit BillOfRights.html,
insert the following line in the head section
(between <head> and </head> tags) of the
html document.
<link rel="stylesheet" type="text/css"
href=“basicss.css">
• Select File / Save to save the change to
BillOfRights.html
Create CSS
• Create a new file with Notepad.
• Save it as basicss.css in your playpen
directory
• Verify that the .css extension is correct in
Windows Explorer.
Work Tutorial
• Display the BillOfRights in a browser on
your desktop.
• Open a new browser window and select
the hyperlink at the beginning of the
webpage to the CSS tutorial.
• Use basicss.css and BillOfRights.html to
experiment with CSS as you read through
the tutorial, CSS From the Ground Up.
Note
• When you reach Section 7 on <div>
</div> tags you will want to add an
embedded style sheet section into your
BillOfRights.html document.
• Stop when you finish Section 10.
• Email us your .css and .html. Copy
yourself.
Homework
• Email us your .css and .html. Copy yourself.
• Develop a web page named index.html for
use in our class.
• Have at least one link on the page to your
BillOfRights page.
• Bring your formatted BillOfRights.html with
its basicss.css and your web page,
index.html to our next class.

Cascading Style Sheets

Transcript Cascading Style Sheets

Directory