Cascading Stylesheet
Cascading Stylesheet
OUTLINE
• Using a style sheet to give all the pages of a Web site the same
look and feel.
• CSS syntax for assigning
• Class selector and using the class attribute to apply styles.
• Style sheet types and cascade precedence
• Using style sheets to separate presentation from content.
Introduction
• Cascading Style Sheets (CSS)
• Separation of structure from presentation
• Relationship between the style formatting and the
structure/content is no longer 1:1
• multiple style sheets can be applied to the same Web page
• Same style sheet can be applied to the multiple Web page
CSS Syntax
• A CSS rule-set consists of a selector and a declaration block:
p{
text-align: center;
color: red;
}
The CSS id Selector
• The CSS rule below will be applied to the HTML element with
id="para1":
#para1 {
text-align: center;
color: red;
}
The CSS class Selector
.center {
text-align: center;
color: red;
}
Example 2
• You can also specify that only specific HTML elements should
be affected by a class.
Example
• In the code below only <p> elements with class="center" will
be center-aligned:
p.center {
text-align: center;
color: red;
}
• HTML elements can also refer to more than one class.
Example
• Here the <p> element will be styled according to class="center"
and to class="large":
Example
• The CSS rule below will affect every HTML element on the
page:
*{
text-align: center;
color: blue;
}
The CSS Grouping Selector
• Selects all the HTML elements with the same style definitions.
Example
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
The CSS Grouping Selector
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
Example
h1, h2, p {
text-align: center;
color: red;
}
All CSS Simple Selectors
Multiple Levels of Style
Definition: Ways to Insert CSS
• Cascade Precedence: resolves conflicting style rules
—Embedded sheets
</body>
</html>
Internal CSS
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External style sheet
• Can be written in any text editor, and must be saved with a .css
extension.
• The external .css file should not contain any HTML tags.
Example "mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Multiple Style Sheets
• If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.
• Assume that an external style sheet has the following style for the <h1>
element:
h1 {
color: navy;
}
• Then, assume that an internal style sheet also has the following style for
the <h1> element:
h1 {
color: orange;
}
Multiple Style Sheets
• If the internal style is defined after the link to the external style
sheet, the <h1> elements will be "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Multiple Style Sheets
• However, if the internal style is defined before the link to the
external style sheet, the <h1> elements will be "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Cascading Order
• All the styles in a page will "cascade" into a new "virtual" style
sheet by the following rules, where number one has the highest
priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
• So, an inline style has the highest priority, and will override
external and internal styles and browser defaults.