Web Design, Lesson Plan: Classes and IDs

1,186 views
1,080 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,186
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide















  • Web Design, Lesson Plan: Classes and IDs

    1. 1. CSS: PART TWO Web Design Elective | The Scholars’ Academy
    2. 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. 3. Today We’re going to look at classes and IDs. We’ll also take a look at some basic CSS properties.
    4. 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. 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. 6. Classes in CSS You can throw classes around as much as you want. Also, pay attention to this: .yeehaw {color: red;}
    7. 7. Disconnecting the Dots The dot doesn’t appear in the HTML though. <h1 class=“yeehaw”>Hello!</h1> See, no dot.
    8. 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. 9. IDs in CSS Again, only once. Also, pay attention to this: #yeehaw {color: red;}
    10. 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. 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. 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. 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. 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. 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.

    ×