Difference between revisions of "CSS:Essentials"
| Line 31: | Line 31: | ||
=CLASS and ID= | =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 | 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 | ||
| + | |||
| + | ==Class== | ||
| + | Class (actually, it's "pseudo-class" in the W3C specification) is a way of '''grouping together''' similar elements together. | ||
| + | |||
| + | Let's look at a class example, modifying the HTML and CSS from the example above. | ||
| + | |||
| + | |||
| + | ==ID== | ||
| + | ID is used to specify a single occurrence of a given element, so that CSS affects only one instance of a particular element. | ||
| + | |||
| + | ''HTML Document'' | ||
| + | <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | ||
| + | <HTML> | ||
| + | <HEAD> | ||
| + | <TITLE>CSS 3</TITLE> | ||
| + | <LINK rel="stylesheet" href="style2.css" type="text/css"> | ||
| + | </HEAD> | ||
| + | <BODY> | ||
| + | <H1 class="people">Students</H1> | ||
| + | <P class="people">some important information about students</P> | ||
| + | |||
| + | <H1 class="people">Staff</H1> | ||
| + | <P class="people">some important information about staff</P> | ||
| + | |||
| + | <H1 class="default">Buildings</H1> | ||
| + | <P class="default">some important information about buildings</P> | ||
| + | |||
| + | <H1 class="default">Rooms</H1> | ||
| + | <P class="default">some important information about rooms</P> | ||
| + | </BODY> | ||
| + | </HTML></nowiki> | ||
| + | |||
| + | ''CSS Document (save as "style2.css")'' | ||
| + | <nowiki>.people {font-family: Arial; color: green; font-weight: bold} | ||
| + | .default {font-family: Courier; color: red}</nowiki> | ||
Revision as of 11:57, 5 September 2007
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
Class
Class (actually, it's "pseudo-class" in the W3C specification) is a way of grouping together similar elements together.
Let's look at a class example, modifying the HTML and CSS from the example above.
ID
ID is used to specify a single occurrence of a given element, so that CSS affects only one instance of a particular element.
HTML Document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>CSS 3</TITLE>
<LINK rel="stylesheet" href="style2.css" type="text/css">
</HEAD>
<BODY>
<H1 class="people">Students</H1>
<P class="people">some important information about students</P>
<H1 class="people">Staff</H1>
<P class="people">some important information about staff</P>
<H1 class="default">Buildings</H1>
<P class="default">some important information about buildings</P>
<H1 class="default">Rooms</H1>
<P class="default">some important information about rooms</P>
</BODY>
</HTML>
CSS Document (save as "style2.css")
.people {font-family: Arial; color: green; font-weight: bold}
.default {font-family: Courier; color: red}
