cascading style sheets. what is css? short for cascading style sheets, a new feature being added to...
TRANSCRIPT
Cascading Style SheetsCascading Style Sheets
What is CSS?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 CSSHistory 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 PageBasic HTML Page<html> <head> <title> My Page </title></head> <body> Here’s my page.</body> </html>
A Style SheetA 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 External Style Sheet
• You can also use an external style file by placing the following in the head element of your page:
• “basicstyle” is a text file with a .css extension located in the same directory as your html document.
<head> <title> My Page </title>
<link rel="stylesheet" type="text/css" href=“basicstyle.css" media=“screen”/>
</head>
RulesRules
• 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}
SyntaxSyntax<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>
SyntaxSyntax
• 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.
CommentsComments
/* This is a style sheet comment */
What is the syntax of an HTML comment?
Why Shouldn’t Your Why Shouldn’t Your bgcolor=“ffffff”?bgcolor=“ffffff”?
Download a Web PageDownload 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 CSSLink 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 CSSCreate 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 TutorialWork 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.
NoteNote
• Stop when you finish Section 10.
• Email your .css and .html to me: [email protected] Copy yourself.