Part 1: CSS - Why? - How it works - Writing rules - Examples.
35
Part 1: CSS - Why? - How it works - Writing rules - Examples
-
Upload
felix-holmes -
Category
Documents
-
view
221 -
download
5
Transcript of Part 1: CSS - Why? - How it works - Writing rules - Examples.
Part 1: CSS- Why?
- How it works- Writing rules
- Examples
Why style sheets?
Without stylesheets
• proprietary HTML extensions• making text into images• proliferate use of "spacer" GIF images• deprecated HTML elements and/or attributes• using tables for layout• General lack of flexibility
Stylesheets
• HTML for content• CSS for presentation
With stylesheets
• Separation of content and presentation• Increased flexibility• Increased accessibility• Simple yet powerful
Example
The Zen Garden (showcasing various CSS styles)http://www.csszengarden.com/
W3 core stylesheets:http://www.w3.org/StyleSheets/Core/
Doing it ourselves …
It’s in all in the head!
<head> <link rel="stylesheet" href=“stylesheet.css" type="text/css"></head>
Three levels of separation
1. style attribute2. style element3. Link element
1. Style attribute
<p style="color:red; font-family:helvetica">
This is a paragraph formatted using CSS.
</p>
2. Style elementIn head:<style type="text/css" >
p {
color: red;
font-family: helvetica;
}
</style>
In body:<p>
This is a paragraph formatted using CSS.
</p>
3. Link element
In head:<link rel="stylesheet" type="text/css" href="style.css"/>
In style.css:p{
color: red;
font-family: helvetica;
}
CSS Rules
CSS Rule
• Rulep { color: red;}
• Selectors and Declarations p{ color: red;}Selector: pDeclaration: {color: red;}
• Properties and Values color: redProperty: colorValue: red
Combining rules
p{color: red;}
p{font-family: helvetica;}
⇕p{
color: red;
font-family: helvetica;
}
Combining selectors
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
h4 {color: red;}
⇕h1, h2, h3, h4 {color: red;}
Inheritance
What happens if you have (head):<style type="text/css" >
body {color:blue;}
em {color: red;}
</style>
And (body):<body>
<p>Here’s a short <em>paragraph</em>.</p>
</body>
Inheritance
• Rules are inherited from parent• Unless overwritten specifically
ProblemEx: different “types” of paragraphs
Solutionid and class
id
In the head:<style type="text/css" >
p{color:black;}
#quote{font-style:italic;}
</style>
In the body: <p>Here's a short paragraph formatted in a
<i>standard</i> way.</p>
<p id="quote">Here's a type of paragraph that is intended to be displayed in italic.</p>
classIn the head:<style type="text/css" > p{color:black;} .quote{font-style:italic;}</style>
In the body:<p>Here's a short paragraph formatted in a
<i>standard</i> way.</p><p class="quote">Here's a type of paragraph that is
intended to be displayed in italic.</p><div class="quote">Here's a section of text. Using a
unique class identifier, the previous paragraph and the current div share the same formatting property.</div>
Differences between class and id
• id applies to a single element, class to any element
• Only one id per element, several classes per element
• These rules are not enforced by all browsers, but that’s no help when you’re designing a site.
ProblemEx: format all <em> children of <div> in a particular way
SolutionContextual selectors
Contextual selectors
In the head:<style type="text/css">
div em{color: blue;}
p em{color: green;}
</style>
In the body: <p>Here is one context for this <em>em
tag</em>.</p>
<div>Here is another context for this <em>em tag</em>.</div>
ProblemEx: I want links NOT to be underlined, except when the mouse
hovers over them.
SolutionPseudo-classes
Pseudo-classes
• Used to represent properties of a limited number of elements:
• Used essentially for links
Selector:pseudo-class {property: value;}
Pseudo-classes
In the head:<style type="text/css" >
a:link {text-decoration:none;}
a:visited {color: #aaaaaa;}
a:hover {text-decoration: underline;}
a:active {color: red;}
</style>
n.b. The order "link, visited, hover, active" is critical.
In the body: <p>The style of this <a href=".">link</a> uses
pseudo-classes.</p>
Pseudo-elements
• Similar to pseudo-classes• Limited scope:– :first-letter– :first-line
Summaryselector
#id.class
:pseudo-class
QuestionWhy cascading?
Cascading Stylesheet
• Publisher/reader• Inheritance• Order (last rule has priority)
Implication: Prefer relative to absolute values.
Writing rulesYou know how it works
You simply have to write rules: property: valuehttp://www.w3schools.com/css/
Property:value pairs
References:- W3schoolshttp://www.w3schools.com/css/css_reference.asp
- W3Chttp://www.w3.org/TR/CSS21/
