|
11.5.3.3 use the CSS stylesheet when creating a site
Web development. CSS (Cascading Style Sheets)
CSS – Cascading Style Sheets.
Style sheet - a collection of rules about how to present an HTML document.
A style sheet is made up of Style Rules. Each Style Rule has three parts, a selector, a property, and a value:
selector { property : value }
Three Ways to Insert CSS
- External style sheet
- Internal style sheet
- Inline style
External style sheet
| File.css |
File.html |
|
body {
background-color: red;
}
h1 {
color: navy;
margin-left: 20px;
}
|
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
|
Internal style sheet
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline style
<h1 style="color:blue; margin-left:30px;"> This is a heading</h1>
Classes
Class rules - select all elements of the class you have specified and apply the style to only those elements
| File.css |
File.html |
.classname {
property1 : value1;
property2 : value2
} |
<h1 class="classname">Welcome</h1> |
ID
ID rules - select the item with the single ID that you have specified.
You can only apply an ID once in an HTML document.
| File.css |
File.html |
#idname {
color : blue
} |
<p id="idname">Seriously!</p> |
Questions:
Exercises:
Ex. 1 Practice.
Download file CSS.7z
Ex. 2
CSS: Noughts & Crosses
Ex. 3
Challenge CSS Properties
Tasks:
|