Basic CSS Concepts

Be aware that these notes refer you to material in the book HTML, XHTML, and CSS, 6^th Edition, Visual Quickstart Guide
(The old book, the chapter numbers of which I currently retain in these notes, is HTML for the World Wide Web, 5th Edition, Visual Quickstart Guide)

Remember: ELEMENT is another word for TAG

There are 3 main things to learn about Cascading Style Sheets:

Where you can put the CSS rules / apply them to your page(s), and how the casade (dominance) works:
CH 8 in the HTML, XHTML, and CSS 6th Edition book
(CH 9 in the old HTML 5th Edition book)
The syntax of how to write a CSS rule, and how to understand Selectors:
CH 7 and 9 in the HTML, XHTML, and CSS 6th Edition book
(CH 8 in the old HTML 5th Edition book)
The specific rules themselves (what you can control and change about things on your page with CSS):
CH 10 and 11 in the HTML, XHTML, and CSS 6th Edition book
(CH 10 and 11 in the old HTML 5th Edition book)

1) Where you can put the CSS rules and apply them to your page(s):

(for more info, see CH 8 in the HTML, XHTML, and CSS 6th Edition book)

- external: linked (well supported) / imported (not as widely supported)
- head: (using style tags in the head is easiest for CSS beginners)
- local: (in the tag itself, using a slightly different arrangement of CSS syntax)

See Where can the CSS go? - applying CSS for an explanation, and refer to the book for more detail...

2) The syntax of how a CSS style rule is written:
ways to Select and Modify things on the page using CSS:

(for more info, CH 7 and 9 in the HTML, XHTML, and CSS 6th Edition book)

The basic pattern: selector {declaration}
for example: h2 {color: green;}

The Selector selects which things on the page you are going to modify.
The Declaration controls how those things are modified.

Declaration detail:

inside a declaration is a pair: property: value;
h2 {background: silver;} -- here the pair is background: silver;
The property is one of the things that can be modified; the value that the property is set to controls exactly how it is being modified.

Adding more parts to a single style rule:

A semicolon and a space (or a return) separate multiple pairs of property: value; within one rule:

h2 {background: silver; color: green;}

- or -

h2 {background: silver;
color: green;}

- or -

h2
{
background: silver;
color: green;
}

Learn and try some of these selectors from CH 9.

Listed in order of importance (the first four are especially useful):
The most useful and well-supported selectors are ones that select:
- the tag/element name (pg 139)
- an entire class, or a unique id (pg 140)
- multiple tags, or multiple selectors (pg 148)
- for links: the link tag and all its states (pg 146)

These can also be useful, but are probably less important:
   - a certain class or id, but only of a particular tag/element (by context) (pg 141)
   - select element by ancestor context (an ancestor is a tag it is inside) (pg 142)
   - selecting part of an element (pgs 144-5)

For this course you do probably do not need to concern yourself about learning:
- select element by parent, sibling, ajacent sibling, first-child, etc.
- select element based on attributes

3) Writing actual CSS rules that change common things about tags: