CSS3 Examples

CSS CLEAR

Written by jon on 9:12 AM This property specifies whether the current element allows floated elements occuring earlier in the document to float along its sides. The values for this property indicate which sides of the element do not allow floating elements. If the current element has any floating sub-elements, the property does not apply to them.

Example

address { clear: both } <address style=”clear: both”>some test</address>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none No restriction is made on floating element placement behavior. left The current element is shifted such that the top edge of the top margin is below the bottom edge of any left-floated elements previously occuring in the document. right The current element is shifted such that the top edge of the top margin is below the bottom edge of any right-floated elements previously occuring in the document. both The current element is shifted such that the top edge of the top margin is below the bottom edge of any floated elements previously occuring in the document.

CSS FLOAT

Written by jon on 9:09 AM Floating elements are elements whose rendering boxes are shifted to the left or right side of the current line. Content boxes that follow are rendered along the side of the floated element; down the right side of elements floated to the left, and down the left side of elements floated to the right. This property controls this floating behavior, specifying an element float to the left, right, or not at all. For correct rendering, a floated element needs to have an intrinsic or assigned ‘width’ value.

Example

img.test { float: left } <img src=”image.gif” mce_src=”image.gif” style=”float: left”>Some floating text.

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none The element box is not floated. left The current element box will be floated to the left. Subsequent content flows around it to the right, starting at the top of the element box If this value is given, the ‘display' property for the current element is ignored, unless it has the value ‘none'. right The current element box will be floated to the right. Subsequent content flows around it to the left, starting at the top of the element box If this value is given, the ‘display' property for the current element is ignored, unless it has the value ‘none'.

CSS POSITION

Written by jon on 9:06 AM This property determines whether normal, relative or absolute positioning methods are used to render the current element box.

Example

h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px } <h2 style=”display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px”>text</h2>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. static This is the default positioning scheme, where elements are rendered in order, as they appear in the document flow. The ‘top', ‘left', ‘right' and ‘bottom' properties have no effect if this value is set. relative The element's normal document flow position is calculated as if the element had a ‘position' value of 'static'. It is then offset from this position according to the ‘top' and ‘left' properties. Any elements that come after this element will be laid out as if the element had not been offset (a phantom height and width for the element is reserved in the normal document flow.) absolute This specifies that the element box be absolutely positioned using the ‘top', ‘left', ‘right' and ‘bottom' properties. These values use the element box's containing block as origin. Absolutely positioned elements do NOT exist in the normal document flow like relatively positioned elements are - elements that follow will flow as if the absolutely positioned element does not exist. fixed This value behaves like ‘absolute' in all respects, but additionally, the positioned element box is fixed with respect to a reference point. In scrolling media, it is in reference to some fixed point on the screen; in paged media (printing) it will be in reference to a point on the page. The positioned element will not move with respect to that stationary point (eg, it will not moved when, say, the screen is scrolled.)

CSS VISIBILITY

Written by jon on 9:05 AM This property controls whether the content of an element box is rendered (including the borders and backgrounds.) If an element box is invisible it still affects document layout as if it were visible (to prevent an element box from affecting layout, the ‘display’ property should be set to ‘none’.)

Example

p { visibility: hidden } <p style=”visibility: hidden”>content</p>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. visible The element box is visible. hidden The element box is invisible (completely transparent to content beneath), but still affects document layout flow as if it were visible. collapse Unless this value is used in the context of table rows or columns, it will have the same effect as ‘hidden'. In the context of tables, spanned cells may be clipped and reacts similar to ‘display: none' for the table element. hide The element box is invisible (completely transparent to content beneath), but still affects document layout flow as if it were visible. show The element box is visible.

CSS DISPLAY

Written by jon on 10:41 AM This property specifies the type of rendering box used for an element. In a language such as HTML where existing elements have well-defined behavior, default ‘display’ property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. In languages where display behavior is not defined (like XML), the default value is ‘inline’.
In addition to the many different allowed display box types, one other value, “none”, allows the display of an element to be turned off; all child elements also have their display turned off. The document is rendered as though the element did not exist in the document tree. This value allows for powerful capabilities, but should be used with caution.

Example

p { display: block } <p style=”display: block”>content</p>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none This value turns off the display of an element (it has no effect on layout); all child elements also have their display turned off unconditionally. The document is rendered as though the element did not exist in the document tree. To render an element box's dimensions in the document formatting scheme, yet have its contents be invisible, see the ‘visibility' property. inline This causes the element to generate one or more inline element boxes. block This causes the element to generate a block element box. inline-block Introduced in CSS 2.1. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element would.) list-item This causes the element to generate a block box for the content and a separate list-item inline box. marker This causes an additional marker box to be generated along with the content box. Generated content using the :before and :after pseudo-elements with this display value will place content in the marker box. If a marker is used with another type of element, the value is treated as “in-line.” The position of the marker will lie outside the block box. compact Depending on context, this value for the display property creates either an in-line or block level rendering box. In each case different CSS properties may apply to the compact element. In a block level context, the compact element is rendered in the left or right margin of the block element. The compact element participates in line-height calculations for the current line, and the ‘vertical-align' property value is relative to the block element. run-in Depending on context, this value for the display property creates either an in-line or block level rendering box. In each case different CSS properties may apply to the run-in element. Properties for the run-in element are inherited from its parent element in the document tree, not from the block element box it participates in. [table-header-grouptable-footer-group] These values cause the element to behave like the corresponding THEAD and TFOOT HTML table elements which these values take their name from. table These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table' value does not have a direct mapping in HTML. inline-table These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table' value does not have a direct mapping in HTML. table-caption These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table' value does not have a direct mapping in HTML. table-cell These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table' value does not have a direct mapping in HTML. table-rowtable-row-group These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table' value does not have a direct mapping in HTML. table-columntable-column-group These values cause the element to behave like the corresponding HTML table element which these values take their name from. The ‘inline-table' value does not have a direct mapping in HTML.