/* Global Styles */
html, body {
properties
}
/*Site Structure */
#containerDivs {
properties
}
/*Custom Classes */
.hugeText {
properties

}

There is no “right” or “wrong” way to organize your code as long as it works, but it does make development a lot easier.  It’s also nice to be able to go back to your code two weeks later and quickly figure out where things are.

Try to get in the habit of properly indenting code as well.

1.Theory

1.1 The “Box” Model

Everything in an HTML page is considered an element.  Text, divs, paragraphs, etc. are all elements and can be manipulated using CSS. Each element also contains an invisible “box” model which surrounds it.  The box is divided into various inner boxes.  The outermost box is the margin, then the border, then the padding, then the actual element.

The offset is the total width / height of the box (margin, border, padding, and width / height all combined)- used mainly in javascript, but for simple html / css you shouldn’t have to worry about it.

Margin
Margin affects the spacing between elements (or between two “boxes”, as every element follows this box model).

Border

Border is the border around an element. 

Padding

Padding is the space between the actual element contents and the border.

2.Application

2.1 Displays
By default, most elements have their display property set to “block”.  There are many possible values, but the three most common ones are “block”, “inline”, and “none”.  The following is a full list of values:

inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none

For example ( display: block; )

The basic concept is this – block elements create a new line, inline elements don’t.

Block – What does a “block” element mean?  Basically an element that is a “block” element takes up an entire line, and any elements that follow it will be on a new line.  For example, a div is a “block” element by default and if you had coded two divs back to back in your code, they would each appear on a different line in the page – not next to each other.

Inline – Inline is, in essence, the opposite of block.  It is ‘in line’ with the content.  Many text based elements have their display property set to “inline” by default.  For example, the anchor tag ( <a> ) is a native inline element. <span> is also a common inline element. If you have a line of text with an <a> in the middle (or any other inline element), everything would be in line and not appear on a new line.  The downside to using inline elements, however, is that they will not be as flexible as block elements.  It’s best to use inline elements for content manipulation (adding links, making certain text appear bigger, changing the color of specific words, etc.).

None - None does what it says – if an element has a display of none, it simply won’t show up.

2.2 Floats
Float is a property that somewhat mimics the “display:inline” property, but lets an element maintain various properties that inline elements lose.  Floats enable block elements to appear next to each other, without creating a new line (sort of – I’ll explain the specifics soon).

A float has three properties.  Left, Right, and None.

For example ( float: left; )

Another important property that is tied with floats is the clear property.  It has values of left, right, and both.

If you do not have an element with a clear property after a floated element, there is the risk that every element after the floated element will continue to be floated.  A simple way to do this is to create a class called something like

.clearBoth {

clear: both;

}

For example, if I wanted to display a block of text with a floated image in it, I would float the image, display the text, then once I’m finished I would add

<div class=”clearBoth”></div>

This is not always necessary, and you could just as easily apply the clear property to the element following the end of the content you want floated, but I find it more convient and cleaner to use the above method.

Working with floats can be tricky, but there are many benefits to using them – for instance, they allow you to create a much more fluid layout than using fixed positioning.  The property values do what they sound like they should do.  An element with a float:left property will be floated to the “left” of the content. 

The most common example is an image within a block of text that resembles a newspaper article. The following image is an example of an image with float:left

The code is as simple as this

<img src=”gimp.png” style=”float:left”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tortor sem, elementum quis, ullamcorper in, gravida quis, eros. Sed libero turpis, semper vitae, elementum eget, tempor at, est. Phasellus eu justo……….

Notice how although the image is a block element, it floats to the left of the content.  This same concept can be applied to creating layouts.

You could create two divs with widths based on the size of the browser window but remain in relative position next to each.  There is one facet to creating layouts like this however.  If you simply float the second div to the right of the first one, since divs are block elements the second, right floated div would appear at the far right side of the page.  Not the effect we’re looking for.  We can easily fix this by setting both divs to have a float:left property. 

<div style=”background-color:#77dddd; float:left; height:20%; margin:5px; width:20%; “></div>
<div style=”background-color:#77dd77; float:left; height:20%; margin:5px; width:40%;”></div>

The best way to get a good grasp on floats (it took me forever) is to play around them.  At the end of the lesson there are examples that use floats. 
Working with floats can be frustrating, especially if you are developing in internet explorer.  I recommend using firefox to develop in so you know you are coding correctly, then fix whatever problems arise for internet explorer 6.

One of the biggest IE 6 issues with floats is that often times the content inside a floated element will be invisible.  This took me hours to figure out how to fix, and thankfully it’s a simple fix.  Sometimes IE6 does not correctly inherit or assign properties to elements it should. 

Problem: Content inside a floated element is invisible.  Happens frequently with floated elements within a floated element.
Solution: Apply “position:relative;” to both the floated element and the container element.  For example, if you have the following code

<div id=”containerDiv”>

<div id=”div1Left”>

Div 1

</div>

<div id=”div2Right”>

Div 2

</div>

</div>

“containerDiv”, “div1Left”, and “div2Right” should all have “position:relative” applied to them if any content within the divs is inivisble in IE6.

Another common issue is that floated divs do not always flow together the way you intend.  Specifically, a floated div inside a container div might not extend the container, so the div appears outside the container’s extends.  For example

(Note – this is not from the examples, this image is photoshoped for convenience) Notice how div1.1 extends past the div 1 container.  A simple way to fix this is to apply the “clear:both” property to a dummy div after the div1.1 and div1.2 code.  This will cause the container box to extend to the height of the tallest div.

A more clear example is as follows

This is directly from the examples so I won’t give you the solution here, but the concept is simple – add a <div style=”clear:both”> (or create a class that has “clear:both” and apply it to the div) and add the div in after whatever content you want floated.

3.Property Shorthand

Property Shorthand

Some properties have “shorthand” ways to define them.  Padding and margin are two great common examples of this.  You can define specific padding as padding-left, padding-right, etc. or condense it into one property

padding:5px 0px 5px 0px;

The way this works is fairly simple – the first value (“5px”) is the “top” value, the next value (“0px”) is the right value, the next value is the bottom value, and the final value is the left value.  The way I remember the order is that the values go clockwise. For example

padding:(1)5px (2)0px (4)5px (4)0px;

This shorthand can be condensed even further.  If you want the top and bottom or left and right values to be the same, you can do the following

padding: 5px 0px;

If the property is defined this way, the first number will represent the top and bottom values, and the second number will represent the left and right values.

This shorthand is not required, but I feel it makes your CSS code much cleaner, easier to read, and shorter.  Once you get used to it, it is a lot easier to quickly change a specific padding or margin value.  For example, you can simply change one number (margin: 0px 0px 0px 5px;) instead of creating an entire new (margin-left:5px;) property.

4.Exercises

4.1 Exercise 1
Goal
Create a simple page that will demonstrate the box model is action. 
Steps
1. Create three divs, each with a 20% width and each floated left.  Apply different background colors to each box using the shorthand background (not background-color, use background: code…) selector.  Put some dummy data in the div to see the various box model effects.
2.  Apply different margins, borders, and padding to each element to see how they interact.
3. If any of these properties cause the three divs to have a combined offset value of more than 100% width, then the divs will wrap to the next line.  To test this, apply a 40% width to one of the divs.
4.  Use shorthand values whenever you are able to.

Do this yourself.  If you get stuck, look at the following example for guidance
http://vasir.net/~erik/csslessons/lesson2/exercise1.html


Goal
Fix a float issue
Steps
1. Examine the following exercise and determine how to fix it so that the “new text after clear” will be below the two divs, as in the picture above.  Notice that the “height” has been removed from the first divs so that they are more fluid. If you get stuck, look at the answer for guidance.

Base exercise – http://vasir.net/~erik/csslessons/lesson2/exercise2.html
Answer – http://vasir.net/~erik/csslessons/lesson2/exercise2answer.html