css – 1h. without stylesheets proprietary html extensions making text into images proliferate use...
TRANSCRIPT
CSS – 1h
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
• XHTML for content
• CSS for presentation
With stylesheets
• Separation of content and presentation
• Increased flexibility
• Increased accessibility
• Simple yet powerful
• Eg:http://www.w3.org/StyleSheets/Core/preview
It’s in all in the head!
<head>
<link rel="stylesheet" href=“stylesheet.css" type="text/css">
</head>
Three ways of introducing styling
1. style attribute
2. style element
3. Link element
1. Style attribute
<p style=“color:red; font-family:helvetica”>
This is a paragraph formatted using CSS.
</p>
2. Style element
In 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 Rule
• Rule– p { color: red;}
• Selectors and Declarations p{ color: red;}– Selector: p– Declaration: {color: red;}
• Properties and Values color: red– Property: color– Value: 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
• Priority:
– Styling at tag takes highest priority
– Then styling in the head
– Last comes the stylesheet file
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>
class
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 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
• But, these rules are not enforced by all browsers
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>
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 {text-decoration:none;}
a:hover {text-decoration: underline;}
a:visited {color: #aaaaaa;}
</style>
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– :before (not supported yet)– :after (not supported yet)
Summaryselector
#id
.class
:pseudo-class
Where to reference / read more
References:
- W3schoolshttp://www.w3schools.com/css/css_reference.asp
- W3Chttp://www.w3.org/TR/CSS21/
Example 1: text formatting
Write a stylesheet that formats paragraphs as follows:
- first line of each paragraph is indented by 10% of the length of a paragraph
- The text colour is 777777
- The font is arial