The purpose of coding CSS is to change the appearance of your HTML document. Specifically, the way we do this is to alter the appearance of specific HTML tags, by writing CSS rules that affect them.
For instance, our biography assignment had an <h1> tag in it. In an attached CSS document, we could say something like:
h1 { color: red; }
…and we would change the appearance of the <h1> tag on our page (to be red text). Of course, if we had multiple instances of the <h1> tag on our HTML page, all of them would change accordingly.
Note the syntax – CSS uses curly brackets, colons and semi-colons, and all are required (that is, don’t leave them out or your code won’t work).
CSS Selectors that have two words in their name are hyphenated – for instance, ‘border-radius,’ ‘line-height,’ and ‘background-color.’ There are no spaces in CSS Selectors or rules.
CSS files are connected to your HTML files in the <head>, in a line that looks like this:
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>
Note that the file name ‘stylesheet’ is informative, but certainly not necessary – our file could be named ‘fred.css,’ as long as that’s the file name we connect to our HTML document. ‘Index,’ as you’ll remember, does have an importance to its file name, and shouldn’t be changed.
The best way to write out a bunch of CSS rules for an element is to do so on a line-by-line basis, so you can comment out what isn’t working. CSS comments look like this:
/* this is a comment */
As a reminder, HTML comments look like this:
<!– this is a comment –>
So a CSS rule could look like this:
h1 {
line-height: 32px;
color: red;
/* background-color: green; */
}
There’s a ton of great CSS rules to learn. Try looking through our textbook (Chapters 11-14 act as an intro to CSS; chapters 15-17 are more advanced CSS concepts), or checking out Lynda.com’s offerings – I recommend a class called ‘HTML: Essential Training’ (it also covers CSS).