Difference between revisions of "CSS:Essentials"
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| + | [[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[CSS]] >> CSS: Essentials | ||
| + | |||
[[Category:CSS]] | [[Category:CSS]] | ||
=Selectors= | =Selectors= | ||
| Line 110: | Line 112: | ||
=Ready to move on?= | =Ready to move on?= | ||
Let's move onto [[CSS:BoxModel|CSS:The Box Model]] | Let's move onto [[CSS:BoxModel|CSS:The Box Model]] | ||
| + | |||
| + | =Related Pages= | ||
| + | <categorytree mode=pages>CSS</categorytree> | ||
Latest revision as of 15:02, 12 July 2011
Main Page >> Website fundamentals >> Workbook >> CSS >> 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
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.
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}
- IMPORTANT
- Notice the words "class=..." in the HTML elements
- Notice the full-stop (.) in front of the words "people" and "default" in the css - identifying that it is a class of elements to be affected
Any non-reserved word (words that are used in HTML like head, body, etc.) can be used to define a class - notice, importantly, that we can group DIFFERENT elements together using CLASS - headings, table cells, paragraphs, and so on.
ID
ID is used to specify a single occurrence of a given element, so that CSS affects only one instance of a particular element.
Let's modify the example again:
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="style3.css" type="text/css">
</HEAD>
<BODY>
<H1 id="topheading">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 id="lastheading">Rooms</H1>
<P class="default">some important information about rooms</P>
</BODY>
</HTML>
CSS Document (save as "style3.css")
.people {font-family: Arial; color: green; font-weight: bold}
.default {font-family: Courier; color: red}
#topheading {font-family: Courier; color: blue}
#lastheading {font-family: Courier; color: orange}
- IMPORTANT
- Notice the hash symbol (#) in front of the words "topheading" and "lastheading" - the hash symbol defines that it is a single instance to be changed
- Notice the words "id=..." in the HTML elements
Ready to move on?
Let's move onto CSS:The Box Model
Related Pages
<categorytree mode=pages>CSS</categorytree>
