1. CSS: PART TWO
Web Design Elective | The Scholars’ Academy

2. What you know
so far
How to create a basic page in HTML
and style it with CSS.
How to apply styles to every single
HTML file on a page.
Some basic styling techniques.

3. Today
We’re going to look at classes and IDs.
We’ll also take a look at some basic CSS properties.

4. Tomorrow
First Marking Period Project Due.
We’ll go over the nuts and bolts in moment.
First, let’s cover what we need to cover.

5. Classes and IDs
Classes let you apply a certain style only where you want it.
For example:
For the class, .yeehaw {color: red;}
<h1 class=“yeehaw”>Hello!</h1> would be
styled.
<h1>Hello!</h1> would not be styled.

6. Classes in CSS
You can throw classes around as much as you want.
Also, pay attention to this:
.yeehaw {color: red;}

7. Disconnecting the Dots
The dot doesn’t appear in the HTML though.
<h1 class=“yeehaw”>Hello!</h1>
See, no dot.

8. IDs
Kind of like classes, but you only use an ID once. You don’t
throw it around all willy-nilly like a class.
For the ID, #yeehaw {color: red;}
<h1 id=“yeehaw”>Hello!</h1> would be styled.
<h1>Hello!</h1> would not be styled.

9. IDs in CSS
Again, only once.
Also, pay attention to this:
#yeehaw {color: red;}

10. Why would I
ever use an ID?
Web designers use IDs to
differentiate different parts of their
layout.
For example, you may want your
footer text to be smaller than your
body text—or maybe a different color.

11. So, about those boxes
Go back to that last slide. No seriously, do it.
I didn’t tell you how to define sections of your layout.
The trick? The <div> tag.

12. DIVs
By itself, the DIV tag does nothing.
But it can be styled.
The <div> tag defines a division or a section in an HTML
document.

13. How to Use a DIV
Wrap them around each section:
<div id=”header”>…</div>
Then in your CSS:
#header {background-color: blue;}
Or something else that suits your fancy.

14. Getting Fancy
Remember how you could do this?
h1 {font-size: 200%;}
Well, you can get fancy with your DIVs.
#header h1 {font-size: 200%;}
#description h1 {font-size: 150%;}
The H1s in the header will be bigger than in the description.

15. Part Two of This
I’m going to make a video of me doing this hands-on.
I’ll post it to http://web.scholarsnyc.com/
Go watch it.