Lesson 6: Classes

Unit 1: HTML & CSS 
Lesson 6: Classes
Common Core Standards: RST.11-12.3
1-2 Day Lesson

Aim: How can we use classes to enhance HTML page layouts ?

Students will be able to:
  • Understand html classes.
  • Create a HTML webpage layout of European cites.
Mini Lesson: 

Lesson Question

  1. What are the two different types of element display ?
  2. How are block elements display?
  3. What are some examples of block elements?
  4. How are inline elements display?
  5. What are some examples of inline elements?

ID’s and Classes are “hooks”

We need ways to describe content in an HTML/XHTML document. The basic elements like<h1>, <p>, and <ul> will often do the job, but our basic set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and Classes. For example<ul id="nav">, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example a footer, where we might do something like this: <div id="footer">. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class="sidebar-box">.

These ID’s and Classes the “hooks” we need to build into markup to get our hands on them. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too. But what is the difference between them?

ID’s are unique

  • Each element can have only one ID
  • Each page can have only one element with that ID

When I was first learning this stuff, I heard over and over that you should only use ID’s once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good “rule of thumb” to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don’t seem to do anything different.

Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one. We’ll go over more reasons for uniqueness as we go on.

Classes are NOT unique

  • You can use the same class on multiple elements.
  • You can use multiple classes on the same element.

Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple “widgets”:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

You can now use the class name “widget” as your hook to apply the same set of styling to each one of these. But what if you need one of them to be bigger than the other, but still share all the other attributes? Classes has you covered there, as you can apply more than one class:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

No need to make a brand new class name here, just apply a new class right in the class attribute. These classes are space delimited and most browsers support any number of them (actually, it’s more like thousands, but way more than you’ll ever need).

Classing Block Elements

The HTML class attribute makes it possible to define equal styles for “equal” <div> elements:

Screen Shot 2015-11-04 at 2.17.10 PM

Example

Screen Shot 2015-11-04 at 2.17.59 PM

Classing Inline Elements

The HTML class attribute also makes it possible to define equal styles for “equal” <span> elements:

Screen Shot 2015-11-04 at 2.19.06 PM

NYC Gallery Page

  1. Create a webpage title NYC Gallery in H1 tags.
  2. Write about each the five boroughs of NYC.
    1. The title of each boroughs should be in h2 tags.
    2. The description of each borough in paragraph tags.
  3. Add one image of each borough.
  4. Add a list of 3-5 landmarks in each borough.
  5. Add a link to reference the city resource description

Here is your first city below:

Brooklyn

Brooklyn is the most populous of New York City’s five boroughs, with a Census-estimated 2,621,793 people in 2014.It is geographically adjacent to the borough of Queens at the western end of Long Island. Since 1896, Brooklyn has had the same boundaries as Kings County, the most populous county in the State of New York and the second-most densely populated county in the United States, after New York County (Manhattan).With a land area of 71 square miles (180 km2) and water area of 26 square miles (67 km2), Kings County is the fourth-smallest county in New York State by land area and third-smallest by total area, though it is the second-largest among New York City’s five boroughs. Today, if it were an independent city, Brooklyn would rank as the fourth most populous city in the U.S., behind only the other boroughs of New York City combined, Los Angeles, and Chicago.

 

Screen Shot 2015-11-04 at 2.43.29 PM

Screen Shot 2015-11-04 at 2.43.46 PM

Create a HTML & CSS website with the following:

  • images
  • headings
  • paragraphs
  • hyperlinks
  • background color
  • color paragraph text

HTML Structure Page Link HereScreen Shot 2015-11-04 at 1.42.30 PM

Video Tutorials

Summary: Discussion…..

How can we use classes to enhance HTML page layouts ?

Homework: 
Write a summary of todays lesson and activity in your google classroom journal.