Notes for Kyle's lecture

In case you want to use some of the same styles repeatedly, you can create classes to hold them, which can then be applied to any other tag that you want. e.g.

/* in your CSS */
.red { color: red; }

<!-- in your HTML -->
<h1 class="red">This will appear red.</h1>

<p class="red">This will also appear red.</p>

<p>But this is a normal paragraph, without the "red" class applied, 
so the text wouldn't appear red.</p>

You can also apply multiple classes to a single element.

/* in your CSS */
.red { color: red; }
.graybg { background-color: gray; }

<!-- in your HTML -->
<h1 class="red graybg">this will have red text with a gray background.</h1>

IDs are like classes, except that you may only use them once in your HTML document. This makes them appropriate for designating unique sections, like a navigation section. Classes are declared with a period (.red) while IDs are declared with a pound sign (#navi). To reference an ID in your HTML, you would use the ID parameter (<div id="navi"> </div>).

All elements in HTML can be either be displayed as "inline" elements or "block" elements. An inline element is an element that takes up only as much space as the content requires. Examples of inline elements that you already know would be images and links.

A block element will, by default, fill the amount of space it is given horizontally, while only taking as much as it needs vertically. You may give a block element specific width and height sizes, whereas you cannot with an inline element. Examples of block elements that you already know are p, h1-h6, lists.

Now to add to your tag vocabulary: span and div. These two are generic container tags that do not do anything visually by default and are used specifically for people to apply classes and IDs with, in case they need to apply styles to more than a particular set of tags. "span" is your generic inline element while "div" is your generic block element.

Let's say you have HTML that looks ... kinda like this.

<div id="redsection">
   <h1 class="title">A cool title</h1>
</div>

<div id="bluesection">
   <h1 class="title">Another cool title</h1>
</div>

So let's say I wanted the color of the h1 to be different between the two sections. But they're both named with the same class name. Instead of using two separate classes, you can access the specific title class and change it alone.

#redsection .title { color: white; }
#bluesection .title { color: silver; }

This code effectively targets the title class in the redsection and makes the font color white, where the title in the bluesection will be silver. You can do this with tags as well as classes (i.e. #redsection h1 { color: white; } ).

When elements are rendered in web browsers, they take the form of a box. The basic form of the box, from exterior to interior is margin -> border -> padding -> your content. See this diagram for further clarification: 2dboxmodel.

To change margin or padding, you can use the margin and padding properties.

h1 {
   margin: 20px;           /* applies 20px worth of space all around the box */
   border: 1px solid blue; /* applies a 1px solid blue border */
   padding: 10px;          /* applies 10px worth of space between the
                              content and the border */
}

p {
   margin: 5px 10px 7px 15px; 
              /* order of values refers to: top right bottom left */
   padding: 15px 20px; 
              /* or if you just do two values: top/bottom left/right */
}

What? Neither the avatar nor the text is extending out of the text box for me. There's supposed to be a min-height set on these post <div>s to prevent that from happening.

Also, Kass does not need a sig. Nobody needs a sig :P

Max ...

... are you using IE?

[edit] Nevermind. Just checked in IE. Site actually looks okay. :P Dunno what your problem is, Max. >_>

I thought I told you guys I use Safari 1.3.2