Important concept: Some HTML tags are treated as "boxes", while others are treated as just text. What's the difference?

Example 1

Here's a div that is 200x200.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna.

Example 2

Here's a div that is 200x200. Why is this so much larger? Because it also has 10px padding and a 10px border.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna.

Example 3

These three divs have their display value set to the default (block).

First
Second
Third

Example 4

These three divs have their display value set to inline.

First
Second
Third

Example 5

This same is true with the H3 tags ... notice by default they are display:block;

This is an H3

This is an H3

This is an H3

Example 6

Notice what happens when we set these H3's to display:inline;

This is an H3

This is an H3

This is an H3

Example 7

This is how most people did layout prior to CSS Frameworks like 960, Blueprint, CSSGrid or Bootstrap. (I'm over-simplifying, but you get the idea.) Designers used a lot of float:left, float:right and divs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus.

In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.

My Blog


Before moving on, notice the hr tag in this example (above) has a style="clear:both;" applied. Use this to clear out of floated elements. Try removing the clear attribute to see what happens. By adding it back in, we are saying that both left and right sides should not be floated, so it will end up on its own "line". Other settings are: None, Both, Left, Right. This is used often when using a floating-div layout approach.

Example 8

border-style:none;
border-style:solid;
border-style:dotted;
border-style:dashed;
border-style:double;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;

Example 9

overflow:auto;

In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.

overflow:scroll;

In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.

overflow:hidden;

In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.

overflow:visible;

In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.

 

 

 

 

 

 

 

 

Example 10

Padding and Margin Examples

margin-left:50px;

Margin shortcut:

margin:[top] [right] [bottom] [left]

Example 11

Centered using magin-left:auto; and margin-right:auto;

Example 12

Here's padding set at 20px for all sides. I'll type enough information in to make it work on at least three of the sides.

Again, that shortcut is:

padding:[top] [right] [bottom] [left]

... and don't forget that padding ADDS to the overall dimensions of the content area.

Example 13

Rounded corners!
Rounded corners on top-left and bottom-right.

Example 14

Using the OUTLINE in addition to the border. Crazy, huh?

Example 15

You should not see this!

Example 16

cursor:auto;
cursor:crosshair;
cursor:default;
cursor:help;
cursor:move;
cursor:pointer;
cursor:text;
cursor:wait;
cursor:e-resize;
cursor:ne-resize;
cursor:nw-resize;
cursor:n-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:s-resize;
cursor:w-resize;

You can also use a custom cursor. It's risky business to do this, but if you choose to do it, better create a "stacked" list like so:

cursor:url(myCursor.cur), default;