HOWTOlabs CSS
Cascading Style Sheets and HTML Style

Related

Elsewhere

[ edit ]

Almost all HTML tags can have style attributes that can be changed.

<div style="margin-bottom: 2em;">This is a test</div>

Style: Display

1
2
style="display: inline;"
inline means no line break, item will be left justified against previous item
1
2
style="display: block;"
block means a 'line break' is placed before the item
1
2
style="display: none;"
none, browser hides it - acts like a HTML comment (i.e. if you look at page source you can still see it)
Style: Visibility

style="visibility: hidden;"
Invisible!
web browser hides it, but unlike display: none it still takes up space on the page

Other values include visible and collapse (same as hidden unless element is a table row or column).

Style: Float

style="float: right;"
Often used to allow a <div> so that other content wraps around it . Placing many floated elements next to each other means web browser will dynamically jiggle them around to fit the width of the window.

style="clear: both;"
This directive tells web browser to reset floated elements from this point forward.

Style: Position

style="position: relative;"
On its own this directive doesn't appear to do anything useful.

style="position: absolute;"
However, placing a absolute <div> inside a relative <div> is handy way to align elements to the sides or top of the relative <div> container.