feelin’ stylish

In this example, I've adjusted the style properties of many of the tags. View the source code!

greeking

Sometimes to mock up a design, designers will add fake copy (text). This copy is called "greeking", but ironically it often uses Latin words. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

the box model

Every rendered element is drawn within a "box". Here's an article that describes the ins and outs of the box model. It's important to understand these properties, which dictate the size of the box:

For a block element, the default width stretches out to the full width of its parent element, and the height stretches to contain its child elements. In-line elements stretch both width and height to accomodate their child elements.

Block elements can have a specified width and height. This paragraph has its width property set to 400px and its height property set to 50px. I've given the paragraph a background color so you can visualize its box model. Notice how the content spills out of the box if its specified height doesn't accomodate its inner content. Also, it forces other content to be rendered over/under this element. :(

whoops...

You can hide content that spills (or overflows) out of the box model by using the overflow style property. This paragraph is set to a height of 64px, and its overflow property is set to "hidden". Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A box's border setting allows us to add a border (duh). The border adds additional pixels OUTSIDE of the width/height. So if this paragraph has a specified width of 500px, and a border of 5px (on both sides), this element would take up 510px horizontally.

A box's padding property allows us to add pixels between the content and the border. Adding pixels to the padding pushes the border outward. This width of 500px, padding of 10px, and border of 5px make this box take up 530px horizontally.

A box's margin property allows us to add pixels outside of the border. This allows us to establish spacing between elements in our DOM. In my Chrome browser, <p> tags have default margins of 16px on top and bottom and 0px on the left and right. The margin pixels do not display the element's background styles. This paragraph has a margin of 20px on all sides.

For these properties we can provide multiple values.

centering content

How did I center this paragraph element? I set its left and right margin to "auto".

units

Note that there are several units available when designing a website. Here is an article about rem, vh, vw, vmin, vmax, and ex.

positioning

This element has its position property set to "relative". This is a trick that forces all child elements to be positioned relative to this element instead of the document body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This element is positioned absolutely so that it's left edge is 50px from the parent's left edge and it's top edge is 50px from the parent's top edge.
To control the layering of positioned elements, we can use the "z-index" property. These colored swatches have varying z-index properties.
The "left" property is negative in this element!
This element is positioned absolutely using its right and bottom edges.
This element is positioned absolutely using its right and top edges. It's positioned relative to the page. Resize the window!

floating content

Still from "Mr. Whiskers' Bad Fur Day" by LOLCAT Studios, llc.

Look at this cat picture! I've made it "float" to the right of the content. Regular content wraps around a floating element. It's pretty cool, but working with floating elements can be confusing. It'll take practice to figure out the correct techniques. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

cool divider

Any block tag can effectively create a row in your design, but how can we create columns? The secret is to make some floating block elements. This element is floating to the left, so other content will wrap around its right side. To create columns, I tell each column to float and I give them a fixed width. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Also, I've given the right column a 60px left margin so that the columns wouldn't be right up against each other. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

After floating elements, you'll always want an element to "clear" the floats. This makes it so that other content doesn't wrap around (or under) the floating element. This paragraph sets its clear property to "both". Here's an example of a floating element not being properly cleared:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.