CSS overview
How to add CSS to your page?
There are three ways to add CSS to your HTML page:
- Inline style
by the mean of a style attribute in HTML elements - Internal style sheet
defined within a <style> element inside the <head> of the HTML page - External style sheet(s)
this is currently the best way to use CSS, and therefore the only one we'll talk about. Don't forget to include a <link> element to your CSS file in your HTML page's <head> as shown previously.
CSS syntax
The CSS excerpt displayed above states the following rules:
- what is mentioned here applies to all paragraphs in the page
- paragraphs are written in white
- their content is horizontally centered
Click here to learn CSS basic vocabulary, so as to be able to name any part of this piece of code. Don't forget to record notes!
Selectors
Introduction to selectors
CSS Academy
Some basic selectors
| selector | example | description |
|---|---|---|
| * | * | selects all elements |
| .class | .warning | selects all elements with class="warning" |
| #id | #main | selects the element with id="main" |
| element | p | selects all <p> elements |
| element,element | h1, h2, h3 | Selects all <h1>, <h2>elements and <h3> elements |
| element element | div p | selects all <p> elements in <div> elements |
| element>element | div > p | selects all <p> elements where the parent is a <div> element |
| element+element | div + h1 | selects all <h1> elements that are placed immediately after <div> elements |
| [attribute] | [title] | selects all elements with a title attribute |
If you need a selector that doesn't belong to the list above ... seek it on the Web (follow first the second link provided in the right panel)! And don't forget to record it for further use.
Three properties unavoidable for the following activities
Here's an application of the color, background-color and border properties, that we'll use with different values, over the lesson.
Exercise 1
Download here the archive that contains the HTML page you'll work on.
The final result is displayed below.
- Section the page, if necessary, and give your divisions relevant names, so that they may be selectors in your future CSS file.
- Write a style sheet that makes the page displayed as shown above.
Comments in a CSS file
As in HTML, comments are very useful to explain the code, if needed, and to mention explicitly the outline within the page.
CSS is indeed 'messier' than HTML, as rulesets aren't nested as HTML elements.
The syntax of comments however differs from HTML's.
/* this is a comment */
<< PreviousWords cloud created with tagul.com - images sourced from flickr.com