From Event to Action: Accelerate Your Decision Making with Real-Time Automation
CSS_tutorial_2
1. Beginner CSS Tutorial: Class and ID Selectors 1
I. OVERVIEW OF CLASSES AnD IDs
Class Selectors can be used to select any html element that has been given a class attribute. For in-
stance, a class can be applied to multiple things within your html document. Think of it as a paragraph
style in InDesign.
Classes are defined in CSS with a “.” For instance:
.intro {
font-weight: bold;
}
ID Selectors are similar to class selectors, in that they can be used to select any html element that has
an ID attribute. However, an ID can only be used OnCE within a document, whereas Classes can
be used as often as needed. IDs are used for specific instances. Think of an ID as a character style in
InDesign.
IDs are defined in CSS with a “#” For instance:
#main_nav {
font-weight: bold;
}
When do you use ID or Class? Classes can be used as many times as needed within a document. IDs
can be applied only once within a document. If you need to use the same selector more than once,
classes are a better choice.
However, IDs have more weight than classes. If a class selector and an ID selector apply the same
property to one element, the ID selector’s value would be chosen. For example the following #ID
selector:
h2#intro {
color: red;
}
will override the following .Class selector:
h2.intro {
color: blue;
}
This is the real concept behind “cascading”... that there is hierarchy built into the language of CSS so
that certain rules “override” others.
2. II. WORkIng WITH CLASSES AnD IDS 2
1. Make a folder on your desktop. Call it “CSS_tutorial_2”
2. Create a new file in Dreamweaver. Select:
- blank page
- Page type: html
- Layout: <none>
- In lower right, for “DocType” select “strict”
- click “create”
Again, we do not want to use a template for this because we are building the CSS from scratch.
3. go to “File” > “Save as” and name your Dreamweaver document “class_id_selectors_2.html”. Save it
in your “CSS_tutorial_2” folder on your desktop.
4. Look at the upper left-hand corner of your screen. There are three buttons:
“Code”, “Split”, and “Design”. Click on “Split”.
3. 5. Look at line 5 of the code: 3
<title>Untitled Document</title>
Type in a name for your page. Again, you can do this in the top window:
6. In the “design” section of your workspace, type in the following content:
This is my paragraph tag.
This is my class selector.
This ID selector overrides my class and paragraph selectors.
III. REVIEW FOR HOW TO SAVE A CSS FILE AnD DEFInIng RULES
1. Look at your screen. In the upper right-hand corner, there should be a panel called “CSS Styles”. It
looks like this:
In the upper right-most corner of that panel, click and
hold on this icon.
And drag down to “new”. now, you should get a win-
dow that looks like this:
4. 2. You are adding a new CSS rule to your document. Do the following: 4
- Selector Type: select “Tag” (we’ll making Classes and IDs after).
- Tag: click and hold the two arrows to the right of the field. Drag down to select “p”.
You are defining the “p” (paragraph) tag.
- Define in: select “(new Style Sheet File)”
- click “Ok”
3. Save your styles before defining any rules. name your CSS file: “class_id_selectors_2.css” and save it
in your “CSS_tutorial_2” folder. You will only have to do this once. The next time we add a rule, it will
be much easier.
4. Once your “class_id_selectors_2.css” is saved, a window will automatically pop up. Save it with the
following definitions (Only set the following rules for the type category. Don’t worry about the other
categories yet).
5. 5. now you should have a <p> defined in your style sheets window. now, highlight the text you wrote 5
in the design window. At the bottom, in the properties window, select the “format” pulldown menu at
the far upper left and select “paragraph”. This makes all your text formatted with the <p> tag.
Look in the code view—your html should look like this:
<body>
<p>This is my paragraph tag.</p>
<p>This is my class selector.</p>
<p>The ID selector overrides my class and paragraph selectors.</p>
</body>
</html>
And the design view should look like this:
now let’s start applying classes and IDs to this content.
IV. CREATIng RULES FOR CLASSES
1. In the CSS window, underneath properties, click on the page + icon. (new CSS rule) Select “class”
radial button (at the top) and name the new rule “p_class”. Make sure that the bottom radial button
reads as “define in: class_id_selectors_2.css”.
6. 2. In the CSS rules definition window, select OnLY the following: (right now we are only going to 6
change the weight and the color of the font.) Click ok.
3. In the design view, highlight the text that reads “This is my class selector.” In the properties window,
look to the far left to the pulldown menu that reads “Format: Paragraph”. To the right of that menu is
another pulldown menu that reads “Style.” In the “style” pulldown menu you should now see an op-
tion to select “p_class”. Once you have selected it, see your text change to bold and a dark purple color.
notice how your class selector changed the color and weight of the text, but nOT the font! This is
because we didn’t change the font... it automatically picks up on the specifications of the original <p>
tag you defined, unless you define it otherwise. This is the beauty of cascading style sheets! (You can
always go back and change the font, border, color, etc. etc...)
7. 4. Let’s take a look at what your html is doing here: 7
<body>
<p>This is my paragraph tag.</p>
<p class=”p_class”>
This is my class selector.
</p class>
<p>The ID selector overrides my class and paragraph selectors.</p>
</body>
</html>
Here’s what the html mark-up is saying: this class belongs to the <p> tag, and it’s called “p_class”. All
the text in between belongs to the <p> tag, but apply the class properties to it.
5. Here’s what your CSS file should look like:
@charset “UTF-8”;
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #993300;
}
.p_class {
font-weight: bold;
color: #663366;
}
It makes sense, correct? notice the class definition begins with a “.” now let’s move on to IDs.
V. CREATIng RULES FOR IDs
1. In the CSS window, underneath properties, click on the page + icon. (new CSS rule) Select “Ad-
vanced: IDs, pseudo-class selectors” radial button (at the top) and name the new rule “#p_id”. Make
sure that the bottom radial button reads as “define in: class_id_selectors_2.css”.
8. 2. In the CSS rules definition window, select OnLY the following: (right now we are going to change 8
the font, case, and color.) Click ok.
3. In the design view, highlight the text that reads “This is my class selector.” Look in the properties
window, to the pulldown menu “Style.” notice there is no option to select “#p_id”... This is because
you can only use an ID once! Let’s write the mark-up for this, as it’s not easy to apply this change in
the Dreamweaver interface.
In your html mark-up, key in the following (in pink):
<body>
<p>This is my paragraph tag.</p>
<p class=”p_class”>
This is my class selector.</p class>
<p id=”p_id”>
The ID selector overrides my class and paragraph selectors.</p id>
</body>
</html>
You are telling the <p> tag that this ID belongs to it, and it’s called “p_id”. All the text in between
belongs to the <p> tag, but applies the ID properties to it. You can only use this once in your
document. Here’s what your text looks like now:
9. 4. Here’s what your CSS file should look like: 9
@charset “UTF-8”;
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #993300;
}
.p_class {
font-weight: bold;
color: #663366;
}
#p_id {
font-family: Georgia, “Times New Roman”, Times, serif;
text-transform: uppercase;
color: #006633;
}
notice the following:
- the ID definition begins with a “#”
- the ID it doesn’t define the type size. This information from the original <p> tag.
- the semi-colon (;) after each rule.
next, we will move onto divs. Divs are containers. This is where things really get exciting as you are
able to define “chunks” for your layout!
