Cascading Style Sheets
Download
Report
Transcript Cascading Style Sheets
Cascading Style Sheets
What is CSS?
• Short for Cascading Style Sheets, a new
feature being added to HTML that gives more
control over how pages are displayed. With
CSS, you can create style sheets that define
how different elements, such as headers and
links, appear. These style sheets can then be
applied to any Web page.
– 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
Basic HTML Page
<html>
<head>
<title> My Page </title>
</head>
<body>
Here’s my page.
</body>
</html>
A Style Sheet
• A style sheet is a simple concept: it's a page of style
definitions or specifications that tell the browser how to
display the various elements on a page.
• You can build our style sheet into the head element of
your web page:
<head>
<title> My Page </title>
<style type="text/css"> media=“all”>
<!--
-- >
</style>
</head>
External Style Sheet
• You can also use an external style file by placing
the following in the head element of your page:
<head>
<title> My Page </title>
<link rel="stylesheet" type="text/css"
href=“basicstyle.css" media=“screen”/>
</head>
• “basicstyle” is a text file with a .css extension
located in the same directory as your html
document.
Rules
• Correspond to elements in an HTML
document. Elements are deliniated by tags
such as <p>, <body>…
• Rules correspond to HTML elements.
• A Rule which selects the body is called a
body selector
• An example of a p selector:
p {font-family: verdana; color: red}
Syntax
<style type="text/css" media="all">
<!-body {
background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva,
Arial, sans-serif;
font-size: small;
line-height: 180%
}
-->
</style>
Syntax
• Every CSS 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 starting web page
to the playpen directory.
Link To An External CSS
• Using Notepad to edit startingPage, 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
startingPage.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 startingPage in a browser on
your desktop.
• Open a new browser window and select
the hyperlink at the beginning of the
webpage to access the CSS tutorial.
• Use basicss.css and
startingPage.html to experiment with
CSS as you read through the tutorial, CSS
From the Ground Up.
Note
• Stop when you finish Section 10.
• Email your .css and .html to me:
[email protected] Copy yourself.