Question of the day (NO GOOGLING):
What is the largest word you can spell using only the top row of the keyboard (qwertyuiop)? Why?
week 3

divs 101
In many respects the Div tag is very similar to the Span tag - it is used to impose the CSS onto the HTML. Think about Div as the structure of scaffolding upon which we hang the rest of the website. In technical terms the Span is an "inline" element and the div is a "block" element. Practically, this mean that a div is like a span with a <P> at the start and end of the tag. This css code makes a box with a black boarder. In the CSS it looks like this:

		
.boxarea{
	 border: 1px black solid;
	 background: white;
	 color: black;
	 font-family:  courier, serif;
	 font-size: 1.5em;
}
And in the html you would access it with the <div class="boxarea"> text or images to go into div </div>

this text is inside the boxarea div
here's a
simple site to see the div inside the CSS and the reference to it in the HTML.

Margins and Padding with Divs
A margin is the space around a div, Padding is the space between the edge of the div and where you want the content to start.

You can give one value to margin or padding and it is applied to each side equally. Otherwise you can be more specific and define different values to different sides.
.boxarea2{
	margin-left: auto;
	margin-right: auto; 
	text-align: center; 
	background: gray; 
	margin-top: 5px;
	margin-bottom: 5px;
	width:60%;
	border-width: 1px; 
	border-style: solid;
	border-color: pink;
	padding: 2%;
	font-size:.85em;
}   
	
This is the box that is created from the CSS code above.
You can center a div using "auto" on both both the left and right margin, note that you will need to define a width for this to work.
You can center the text within a div with "text-align: center;" in the CSS

Cool trick to see your DIVs in 3D


NOTE: This will only work in Firefox. "Is this really useful?", you may ask yourself, but you should tell yourself to shut up because look at how cool it is!

Drop Shaddow and rounded corners.

you can add a drop shadow and rounded corners if the browser supports CSS 3.
.rounded_shadow{ 
	background: green; 
	width: 200px; 
	height: 50px; 
	border-radius: 15px;
	box-shadow: 10px 10px 5px rgb(70, 100, 70);
	color: white;
	padding: 20px; 
}   
	
This is pretty awesome


This
is acutally
a round
div!

The ID Selector
So far we have been making classes, but there is another major kind of CSS selector called ID. Where a class can be used over and over, an ID should be used only once per page. ID's are generally used to created the scaffolding upon which the rest of the website is build.

To create an id in your css document use a #.

  #title{
	color: #959595:
	text-align: center;
	background-color: #f5989d; 
	font-size:30px;	
  }

	
You can access it in the html like this.
<div id= "title">
  Why Harry Potter is Boring
 </div>
Why Harry Potter is Boring

At this point ID and Class are interchangeable, but if you stick to the rules that ID are unique to a page and Classes are used multiple times you will be much happier. There are a couple reasons. First, and foremost will come when we begin doing Javascript, and secondly your code will not be compliant with more than one ID with the same name on a page. Lastly, there are new HTML 5 tags that break down the "div" into even more semantic definitions. But this will be fine for now.

Background Images

Background image, if not used correctly, can be horrible. Use them sparingly. In general you want a colour that will not interfere with the text, and an image that is not too large or distracting. Unless of course, annoying is what you're going for.
The background image will work in any CSS area including the body.
background-image: url('images/yourimage.jpg');

You can also use these attributes with the background.

default
repeat-x
repeat-y
no-repeat AND right top;

The Position atribute requires the background-repeat: no-repeat; as well. You could even use background-position:50% 50%; to position your image in the center of the div.

Positioning Boxes
Okay here's where it gets fun (complicated);
There are several ways to control how a div will appear on the screen. Mastering these combinations can get tricky, but it can also lead to more interesting layouts. You do this with the position attribute within the css.

float - means that other elements will "float" around the div. It is often used for images, but you use it with divs as well. If a Div has the atribute "float: left;" this means that other divs can "float" to the right of the div on the page.
The oposite of float is "clear". If a div is clear: left; that nothing will float to the left of that div. Mostly your find clear:both to be the most useful.
The following graphic has 2 classes, the first is centered red box, the 6 interior boxes are float:left
 
.redbox{
	border:2px solid red; 
	width: 624px; 
	height: 40px; 
	margin-left: auto; 
	margin-right: auto
} 

.blackbox{
	float: left; 
	border:2px solid black; 
	width: 80px; 
	height: 15px; 
	margin: 10px;
}

......
<div class="redbox"> 
<div class="blackbox"> </div>
<div class="blackbox"> </div>
<div class="blackbox"> </div>
<div class="blackbox"> </div>
<div class="blackbox"> </div>
<div class="blackbox"> </div>
</div>


css mug

The more you use CSS the funnier this gets

Experiment
Go to
samplediv3.html and copy the code. Experiment with changing attributes of the four divs. Try creating new ones. Put images in the background. Make boarder around your page that does not scroll. Make a page with a flame pattern that goes across the bottom of the website [hardcore!].

Verticle Alignment
Vertically aligning a div is actually a little tricky - it changes depending on the situation.
Situation 1. - you can put content inside a box and give that box a fixed hight. Also, you need to be able to "absolute position" the content. In this case you need a div inside a div. The parent div needs the positioning set to relative, with a defined height. In the child you set the position to absolute, the top to 50% and the height. The margin top you set to minus half the height.

Thanks to CSS 3 vertically aligning within a div is now super easy! The future is awesome. You still need a parent div that your new centered is sitting in, then you write your content in the new div. It takes advantage of the transform function which we will deal with more in the coming weeks.

// in the head section
<style >
		#parentbox{ 
			position:relative;
			height: 200px;
			background-color: lightblue;
		}
		.vert{
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
	</style>
// in the body section
	<div id="parentbox">
		<div class ="vert"> this is centered! </div> 
	</div>

this is centered inside the parent div!
and so is this!

External CSS

Open your profile page and copy all the CSS code that currently resided between the style tags.
open a new blank CSS document in Sublime and paste the CSS into this new document.
You do NOT need the style tags, just the CSS. Save this file into the same folder as the rest of your html as "style.css".

To link your html to the external CSS, insert this line between the head tags in your HTML.

<link rel="stylesheet" type="text/css" href="mystyle.css">   

As your website grows each HTML page will link to this external style sheet. This means changes to the style will effect the entire website.
Here's a simple page with an external CSS file. You can view the CSS source as well as the html to reconstruct the page.

Comments
In CSS the syntax to comment code is different than in html. It will become really convenient as you progress through this process.
/* this would be commented in css*/

Div help
These are good resources for understanding page layout.
css tricks
a visual walk through

presentation PARC

Homework
Apply divs to your website to make it awesome.
Surf your classmates sites and on your profile page link to two sites you trust, and two you don't.

Think about what you might want to do for an upcoming click through website. This will be the first big assignment.

First day at high school

My Boyfriend Came Back From the War

Note, this site has a nice CSS cheat sheet.

All too easy? Recreate this page