CSS:Essentials
Selectors
Selectors are the way in which we identify which HTML elements are to be affected by our CSS. If we write some CSS that we want to affect all <H1> elements, we say that H1 is the selector. This, again, is best explained by example.
FROM HERE ON, ALL CSS IS EXTERNAL - where any CSS examples are shown, write an external CSS sheet and the HTML as separate documents.
HTML Document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>CSS 2</TITLE>
<LINK rel="stylesheet" href="style1.css" type="text/css">
</HEAD>
<BODY>
<H1>Section 1</H1>
<P>contents of section 1</P>
<H1>Section 2</H1>
<P>contents of section 2</P>
<H1>Section 3</H1>
<P>contents of section 3</P>
</BODY>
</HTML>
CSS Document (save as "style1.css")
h1 {font-family: Arial; color: green; font-weight: bold}
p {font-family: Courier; color: red}
You can see from the example above, that all heading 1's are affected by the h1 selector in the CSS, and all paragraphs are affected by the p selector.
What if we don't want to change every heading, just some of them?
CLASS and ID
Class and Id are two methods by which we can affect change to a subset of an element (i.e. for some paragraphs, but not all paragraphs). In the HTML, we can identify which paragraphs we want to change, by giving them either ID's or CLASS's
