cascading style sheet (CSS)
Download
Report
Transcript cascading style sheet (CSS)
CSS
Cascading Style Sheets
Cascading Style Sheet (CSS)
A cascading style sheet (CSS) is a set of
rules that define styles to be applied to
entire Web pages or individual Web page
elements.
Each rule consists of a selector followed by
a set of curly braces containing the style
properties and their values.
The selector can be an HTML element, a
user-defined style known as a class, or the
ID of a specific element on a page.
Sample CSS Style Rules
a:link {color: rgb(255,204,0) }
a:visited {color: rgb(153,204,204) }
a:active {color: rgb(102,255,0) }
h1, h2, h3{font-family: Verdana, Arial,
Helvetica}
h1 {color: rgb(255,204,0) }
h2 {color: rgb(153,255,51) }
h3 {color: rgb(0,255,204) }
.callout { font-size: small }
#trailer { font-family: serif }
Three Kinds of Style Sheets
There are three ways of applying cascading style
sheets to a Web page: external, embedded, and
inline.
An external CSS keeps all the style definitions in
a separate CSS file that you include in a Web page
at runtime by using the <link> tag to apply the style
sheet to the page.
An embedded CSS is a style sheet that gets
copied physically into the head of the Web page
and applies to theWeb page as a whole.
An inline CSS is a style sheet that applies to only
one page element so it gets copied “inline” on the
page with that element.
Creating an Inline CSS
To create an inline CSS, you add a
style parameter to the specific
instance of the tag you want to style.
For example, consider the following
inline styling of an h1 heading tag:
<h1 style="background-color:#FFCC00">
Welcome to My Home Page </h1>
When an inline CSS has more than
one style change, you separate them
with ;
Creating an Embedded CSS
The embedded CSS goes in the head
section between the <style> start and
</style> stop tags:
<head>
<title>My Home Page</title>
<style>
h1 { font-family: Comic Sans MS; color:
#0000DD }
</style>
</head>
Creating an External CSS
When you want a style to apply to multiple
Web pages, you create an external CSS
and link the Web pages to it.
The Jade Valley site does this, for
example, via the command:
<link href="css/jadevalley.css“
rel="stylesheet" type="text/css" />
Let’s create an external CSS to experience
one in action.
Creating a Style Class
In cascading style sheets, a class is a
named definition of one or more styles.
You create the class by prefixing its name
with a dot in the CSS file. For example:
<style>
.warning { color: red; font-family: arial;
font-weight: bold}
</style>
You use this class via the class parameter:
<p>Be careful when you try this, because
<span class="warning">the burner is
hot!</span></p>
CSS Page Layout
On the cutting edge of cascading
style sheets is a feature called
absolute positioning, which enables
you to position page elements
precisely onscreen based on x,y
coordinates.
ITAW has a rock pile you can make.
Dreamweaver has absolute positioning
layouts you can try.
Eric Meyer
Eric Meyer is the Netscape standards
evangelist who is generally credited
with being the world’s expert on style
sheets.
Meyer has recommended a crossbrowser format for creating CSS
layouts.
Three-Column CSS Layout
HTML{margin: 0; padding: 0}
BODY{margin: 0; padding: 0}
DIV.left{position: absolute; top: 3em; left: 0;
width: 12.5%; padding:4px;font-size: 11px;
background-color: white; border: 1px solid
black; z-index: 10}
DIV.middle{margin: 0 20% 1em 20%; padding:
0; background-color: pink}
DIV.right{position: absolute; top: 4em; right:
0; width: 18%; font-size: 11px; z-index: 11}