SPACEBAR to move forward through slides.
SHIFT & SPACEBAR to move backwards through slides.
LEFT ARROW & RIGHT ARROW to move through sections.
ESC to see overview and ESC again to exit.
F to enter presentation mode and ESC to exit.
This slide deck answers some common CSS questions: What is CSS? What are rulesets? How can you write CSS rules more efficiently?
CSS is written using a series of rules - sometimes called rulesets or statements.
CSS rules have five different component:
The selector selects the elements in an HTML document that you want to target for styling.
In the following example, the p selector will select every paragraph element in the HTML document.
/* Selector */
p {
color: red;
}
<!doctype html>
<html>
<head>
<title>Document title</title>
</head>
<body>
<h1>Heading</h1>
<p>A paragraph element.</p>
<p>A second paragraph element.</p>
<body>
</html>
The declaration block is a container that consists of anything between (and including) the start brace "{" and end brace "}".
/* Declaration block */
p {
color: red;
}
The declaration consists of a property and a value. It tells browsers how to render any element that is selected.
/* Declaration */
p {
color: red;
}
The property defines what aspect of the element will be styled.
In the following example, the color property will be styled.
/* Property */
p {
color: red;
}
In CSS2.1 there were 98 properties.
In CSS3 there are now approximately 510 properties.
The value is the exact style you wish to set for the property. In the following example, all paragraph elements will be styled with a value of red.
/* Value */
p {
color: red;
}
Open this HTML file in an editor:
exercises-start/exercise-203-01.html
Write a CSS rule to style the <h1> element with a color value of blue.
Write another CSS rule to style the <p> element with a color of red.
/* Add styles here */
h1 {
color: blue;
}
p {
color: red;
}
Check your work against the finished HTML file:
exercises-finished/exercise-203-01.html
When several selectors share the same declarations, they can be grouped.
Each selector must be separated by a comma. There must be no comma after the last selector.
In the following example, the <h1> and <h2> elements use the same declaration. These two rules can be converted into one.
/* Individual rules */
h1 {
color: red;
}
h2 {
color: red;
}
/* Multiple selector rule */
h1, h2 {
color: red;
}
Multiple selectors are designed to make it easier for authors - to save writing the same rule more than once.
Open this HTML file in an editor:
exercises-start/exercise-203-02.html
Write a CSS rule to style the <h1> element and the <p> elements with a color of green. Make sure to add a comma between the selectors.
/* Add styles here */
h1,
p {
color: green;
}
Check your work against the finished HTML file:
exercises-finished/exercise-203-02.html
Multiple declarations can be defined inside a single declaration block.
Each declaration must be separated by a semi-colon.
In the following example, there are two rules defining aspects of the <h1> element. These two rules can be combined into one.
/* Individual rules */
h1 {
color: red;
}
h1 {
margin: 0;
}
/* Multiple declarations */
h1 {
color: red;
border: 1px solid blue;
}
The last declaration does not need a semi-colon.
However, semi-colon should be placed after every declaration, in case additional declarations are added later.
/* Semi-colons */
h1 {
color: red;
border: 1px solid blue;
}
From the browser’s perspective, declarations can be written in any order.
/* Color declared first */
h1 {
color: red;
border: 1px solid blue;
}
/* Border declared first */
h1 {
border: 1px solid blue;
color: red;
}
From an author’s perspective, it is better to write declarations in a consistent order, so that the CSS is easier to maintain in the future.
The declaration order you choose is entirely up to you as long as it is intuitive and consistent.
Open this HTML file in an editor:
exercises-start/exercise-203-03.html
Write a CSS rule to style the <p> element with color: purple and border: 1px solid lime.
/* Add styles here */
p {
color: purple;
border: 1px solid lime;
}
Check your work against the finished HTML file:
exercises-finished/exercise-203-03.html
White space is ignored inside CSS rules. Declarations can be written in single or multiple lines.
/* One line */
h1 { color: red; border: 1px solid blue; }
/* Multiple lines */
h1 {
color: red;
border: 1px solid blue;
}
Open this HTML file in an editor:
exercises-start/exercise-203-04.html
Write a CSS rule across multiple lines and set the <h1> with color: teal and border: 1px solid fuchsia.
Write another CSS rule on one line and set the <p> element with color: navy and border: 1px solid aqua.
h1 {
color: teal;
border: 1px solid fuchsia;
}
p { color: navy; border: 1px solid aqua; }
Check your work against the finished HTML file:
exercises-finished/exercise-203-04.html
You can insert comments in CSS. CSS comments must begin with a forward slash and an asterisk "/*" and end with an asterisk and a forward slash "*/".
Any characters between the start and end of the comment will be ignored by browsers.
/* a CSS comment used in CSS files */
CSS comments can be written on single or multiple lines.
/*
a CSS comment
over multiple lines
*/
CSS comments can be used to create sections and notes within CSS files.
These types of comments make CSS files easier to understand and maintain.
/* -------------------
HEADER STYLES
------------------- */
Open this HTML file in an editor:
exercises-start/exercise-203-05.html
Write a CSS rule to set the <h1> to color: olive and the <p> to color: maroon.
Then add a comment above each rule to help explain their purpose.
/* heading style */
h1 {
color: olive;
}
/* paragraph style */
p {
color: maroon;
}
Check your work against the finished HTML file:
exercises-finished/exercise-203-05.html
Site Twitter Github Slideshare Linkedin