CHAPTER 11 - Divs and Spans
WED 10/9/13
Yesterday you worked on divs on your CH10 Lounge class example.
TODAY let's try to change the color of the h2 and h3 in the #elixirs by
#elixirs h2{
color: blue;
}
#elixirs h3{
color: #d12c47;
}
What happens? Does this only effect the headers?
Also let's change the line-height to 1.6; for #elixirs
SPANS
Next let's look at <span> this element gives you a logical way to separate inline content in the same way <div> let's us create logical separation for block level content.
LOOK at the area about "who's playing" in your HTML
<ul>
<li>Buddha Bar, Claude Challe</li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Engima</li>
<li>Music for Airports, Brian Eno</li>
</ul>
Let's add <span> to help define the CD title from the artist
<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Engima</li>
<li>Music for Airports, Brian Eno</li>
</ul>
IN YOUR CSS
.cd { font-style: italic;}
.artist{ font-weight: bold;}
SAVE and run... what does it look like?
Finish for the rest of the CD's and Artists in your HTML file.
YOU SHOULD KNOW...WHAT'S THE DIFFERENCE?
SO WHY USE A "CLASS" or "ID"???? These are "hooks" for our HTML. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too.
ID's are unique
You should only use ID's once, but you can use classes over and over. This concept often basically goes in one ear and out the other because it sounds more like a good "rule of thumb" 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. But as a good programmer concerned about having an efficient website, this is more critical than you think, especially if you want it to be a valid HTML web site.
Classes are NOT unique
<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 other 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)
IN A NUTSHELL:
Barcodes and Serial Numbers Maybe a good analogy here is bar codes and serial numbers. Take an iPod in a store. On the packaging will be a bar code. This tells the store what the product is, so when it is scanned, the system knows exactly what the product is and what it costs. It might even be able to know what color it is or where it was kept in the store. All iPod of this same type have the exact same bar code on them.
The iPod will also have a serial number on it which is absolutely unique to any other iPod (or any other device) in the world. The serial number doesn't know the price. It could, but for the store this wouldn't be a very efficient way to store and use that data. Much easier to use the barcode, so that for example, if the price changed, you could just change the price for that bar code and not every individual serial number in your system.
This is much like ID's and Classes. Information that is reuseable should be kept in a class and information that is totally unique should be kept in an ID.
NEXT FOR YOUR ASSIGNMENT - USING THE CH10 LOUNGE
Let's change how our links appear.
The <a> element indicates "links" so we will use that in our CSS
in our CSS we will type the following:
a:link { color: pink;}
a:visited { color: red;}
a:hover{ color:yellow;}
SAVE and run... what does it look like?
Change the colors from those above. SAVE.
If you wanted to specify just for the links found in your elixirs div... #elixirs, you would code the following in your CSS.
#elixirs a:link { color: pink;}
#elixirs a:visited { color: red;}
#elixirs a:hover{ color:yellow;}
SAVE and run... then try the following...
#elixirs a:hover{
background: #f88396;
color:yellow;}
What happens? SAVE and run.
COMPRESS your folder and submit in EDMODO under CH11DIVS&SPANS
NEXT assignment for tomorrow...
Create: PERSON PROJECT
<div id="main"> This will have the main part of the information about your person, like the body of a paper.</div>
<div id="side"> This is something that would be on the side of your page. It might be something of interest. A story about the person. Fun facts, etc. </div>
<div id = "footer"> This would be a very brief conclusion. Nothing of great content but may have when you created the site or why. </div>
Yesterday you worked on divs on your CH10 Lounge class example.
TODAY let's try to change the color of the h2 and h3 in the #elixirs by
#elixirs h2{
color: blue;
}
#elixirs h3{
color: #d12c47;
}
What happens? Does this only effect the headers?
Also let's change the line-height to 1.6; for #elixirs
SPANS
Next let's look at <span> this element gives you a logical way to separate inline content in the same way <div> let's us create logical separation for block level content.
LOOK at the area about "who's playing" in your HTML
<ul>
<li>Buddha Bar, Claude Challe</li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Engima</li>
<li>Music for Airports, Brian Eno</li>
</ul>
Let's add <span> to help define the CD title from the artist
<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Engima</li>
<li>Music for Airports, Brian Eno</li>
</ul>
IN YOUR CSS
.cd { font-style: italic;}
.artist{ font-weight: bold;}
SAVE and run... what does it look like?
Finish for the rest of the CD's and Artists in your HTML file.
YOU SHOULD KNOW...WHAT'S THE DIFFERENCE?
SO WHY USE A "CLASS" or "ID"???? These are "hooks" for our HTML. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too.
ID's are unique
- Each element can have only one ID
- Each page can have only one element with that ID
You should only use ID's once, but you can use classes over and over. This concept often basically goes in one ear and out the other because it sounds more like a good "rule of thumb" 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. But as a good programmer concerned about having an efficient website, this is more critical than you think, especially if you want it to be a valid HTML web site.
Classes are NOT unique
- You can use the same class on multiple elements.
- You can use multiple classes on the same element.
<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 other 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)
IN A NUTSHELL:
Barcodes and Serial Numbers Maybe a good analogy here is bar codes and serial numbers. Take an iPod in a store. On the packaging will be a bar code. This tells the store what the product is, so when it is scanned, the system knows exactly what the product is and what it costs. It might even be able to know what color it is or where it was kept in the store. All iPod of this same type have the exact same bar code on them.
The iPod will also have a serial number on it which is absolutely unique to any other iPod (or any other device) in the world. The serial number doesn't know the price. It could, but for the store this wouldn't be a very efficient way to store and use that data. Much easier to use the barcode, so that for example, if the price changed, you could just change the price for that bar code and not every individual serial number in your system.
This is much like ID's and Classes. Information that is reuseable should be kept in a class and information that is totally unique should be kept in an ID.
NEXT FOR YOUR ASSIGNMENT - USING THE CH10 LOUNGE
Let's change how our links appear.
The <a> element indicates "links" so we will use that in our CSS
in our CSS we will type the following:
a:link { color: pink;}
a:visited { color: red;}
a:hover{ color:yellow;}
SAVE and run... what does it look like?
Change the colors from those above. SAVE.
If you wanted to specify just for the links found in your elixirs div... #elixirs, you would code the following in your CSS.
#elixirs a:link { color: pink;}
#elixirs a:visited { color: red;}
#elixirs a:hover{ color:yellow;}
SAVE and run... then try the following...
#elixirs a:hover{
background: #f88396;
color:yellow;}
What happens? SAVE and run.
COMPRESS your folder and submit in EDMODO under CH11DIVS&SPANS
NEXT assignment for tomorrow...
Create: PERSON PROJECT
- 1 MAIN FOLDER CALLED CH11Person
- 1 HTML page about a person
- 1 CSS page
- 1 folder for Images
- you must divide your HTML up into 4 areas using <div id>... header, main, side, footer
<div id="main"> This will have the main part of the information about your person, like the body of a paper.</div>
<div id="side"> This is something that would be on the side of your page. It might be something of interest. A story about the person. Fun facts, etc. </div>
<div id = "footer"> This would be a very brief conclusion. Nothing of great content but may have when you created the site or why. </div>
- Your page will have at least 250 words
- 2 pictures (one in the main area, 1 in the side area)
- 2 links to outside sites, that open in a new window, one of the two links MUST be in the side area
- background color, h1 and h2 color in the body and the side area must be different h1 and h2 than the rest of the areas
- The side area MUST be boxed with a border, picture in the background and color different from the rest of the page. SEE lounge in CH 10 for reference
- Links must change color using a:hover, etc. SEE above... side area link must be different than the other.
- The side area, must be 300px wide.
- You will also show your use of <span class> at least twice and use of using id or a class in another element like <p class> or <p id>
- Use at least quote or blockquote element
- WHEN you are done, make sure that your work is saved in a folder named CH11PERSON. We will be using this tomorrow, so do NOT worry about adding any floats or making your side area actually show up on the side.
Using Float
THURSDAY - 10/10, FRIDAY 10/11& MONDAY 10/13
chapter11_person.zip | |
File Size: | 161 kb |
File Type: | zip |
Using the CH11Person Project specifics above (from yesterday) you will create your own person web page. Please make sure that you read all the required elements.
THIS WILL BE DUE ON MONDAY. When you are done, compress and submit in EDMODO as CH11 PERSON PROJECT. If you get done before the end of the day on Friday, use this time o work on your Final project by creating CSS file(s) and putting divs, id's /classes in your work.
THIS WILL BE DUE ON MONDAY. When you are done, compress and submit in EDMODO as CH11 PERSON PROJECT. If you get done before the end of the day on Friday, use this time o work on your Final project by creating CSS file(s) and putting divs, id's /classes in your work.