Saturday, January 14, 2012

CSS3 Multiple Column Prperties with Example


With CSS3, you can create multiple columns for laying out text - like in newspapers!
The column-count property specifies the number of columns an element should be divided into:
The following multiple column properties are:
  • column-count
  • column-gap
  • column-rule

Browser Support

Internet Explorer does not yet support the multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.

Syntax:

Divide the text in a div element into three columns:
div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>multiple-column</title>
<style type="text/css">
body{ background:#66CCFF; width:700px; margin:0 auto; padding-top:20px}
div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
</style>
</head>
<body>
<div>
Browser support.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
Internet Explorer does not yet support the multiple columns properties.
</div>
</body>
</html>

CSS3 Specify the Gap between Columns:

  Syntax:

             Specify a 50 pixels gap between the columns:

div{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

  Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>gap-column</title>

<style type="text/css">

body{ background:#66CCFF; width:700px; margin:0 auto; padding-top:20px}

div

{

-moz-column-count:4; /* Firefox */

-webkit-column-count:4; /* Safari and Chrome */

column-count:4;

}

div

{

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

column-gap:40px;

}

</style>

</head>

<body>

<div>

Browser support.

Firefox requires the prefix -moz-.

Chrome and Safari require the prefix -webkit-.

Internet Explorer does not yet support the multiple columns properties.

</div>

</body>

</html>

CSS3 Column Rules:

The column-rule property sets the width, style, and color of the rule between columns.

Syntax:

div{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>column-rule</title>

<style type="text/css">

body{ background:#66CCFF; width:700px; margin:0 auto; padding-top:20px}

div

{

-moz-column-count:4; /* Firefox */

-webkit-column-count:4; /* Safari and Chrome */

column-count:4;

}

div

{

-moz-column-rule:10px outset green; /* Firefox */

-webkit-column-rule:10px outset green; /* Safari and Chrome */

column-rule:10px outset green;

}

</style>

</head>

<body>

<div>

Browser support.

Firefox requires the prefix -moz-.

Chrome and Safari require the prefix -webkit-.

Internet Explorer does not yet support the multiple columns properties.

</div>

</body>

</html>

New Multiple Columns Properties

Property
Description
column-count
Specifies the number of columns an element should be divided into
column-fill
Specifies how to fill columns
column-gap
Specifies the gap between the columns
column-rule
A shorthand property for setting all the column-rule-* properties
column-rule-color
Specifies the color of the rule between columns
column-rule-style
Specifies the style of the rule between columns
column-rule-width
Specifies the width of the rule between columns
column-span
Specifies how many columns an element should span across
column-width
Specifies the width of the columns
columns
A shorthand property for setting column-width and column-count
 

CSS Units:

Measurement Values

Unit
Description
%
percentage
in
inch
cm
centimeter
mm
millimeter
em
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex
one ex is the x-height of a font (x-height is usually about half the font-size)
pt
point (1 pt is the same as 1/72 inch)
pc
pica (1 pc is the same as 12 points)
px
pixels (a dot on the computer screen)


CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
Selector
Example
Example description
.class
.intro
Selects all elements with class="intro"
#id
#firstname
Selects the element with id="firstname"
*
*
Selects all elements
element
p
Selects all <p> elements
element,element
div,p
Selects all <div> elements and all <p> elements
element element
div p
Selects all <p> elements inside <div> elements

element>element
div>p
Selects all <p> elements where the parent is a <div> element
element+element
div+p
Selects all <p> elements that are placed immediately after <div> elements
[attribute]
[target]
Selects all elements with a target attribute
[attribute=value]
[target=_blank]
Selects all elements with target="_blank"
[attribute~=value]
[title~=flower]
Selects all elements with a title attribute containing the word "flower"
[attribute|=language]
[lang|=en]
Selects all elements with a lang attribute value starting with "en"
:link
a:link
Selects all unvisited links
:visited
a:visited
Selects all visited links
:active
a:active
Selects the active link
:hover
a:hover
Selects links on mouse over
:focus
input:focus
Selects the input element which has focus
:first-letter
p:first-letter
Selects the first letter of every <p> element
:first-line
p:first-line
Selects the first line of every <p> element
:first-child
p:first-child
Selects every <p> elements that is the first child of its parent
:before
p:before
Insert content before every <p> element
:after
p:after
Insert content after every <p> element
:lang(language)
p:lang(it)
Selects every <p> element with a lang attribute value starting with "it"
element1~element2
p~ul
Selects every ul element that are preceded by a p element
[attribute^=value]
a[src^="https"]
Selects every a element whose src attribute value begins with "https"
[attribute$=value]
a[src$=".pdf"]
Selects every a element whose src attribute value ends with ".pdf"
[attribute*=value]
a[src*="w3schools"]
Selects every a element whose src attribute value contains the substring "w3schools"
:first-of-type
p:first-of-type
Selects every p element that is the first p element of its parent
:last-of-type
p:last-of-type
Selects every p element that is the last p element of its parent
:only-of-type
p:only-of-type
Selects every p element that is the only p element of its parent
:only-child
p:only-child
Selects every p element that is the only child of its parent

:nth-child(n)
p:nth-child(2)
Selects every p element that is the second child of its parent
:nth-last-child(n)
p:nth-last-child(2)
Selects every p element that is the second child of its parent, counting from the last child

:nth-of-type(n)
p:nth-of-type(2)
Selects every p element that is the second p element of its parent
:nth-last-of-type(n)
p:nth-last-of-type(2)
Selects every p element that is the second p element of its parent, counting from the last child
:last-child
p:last-child
Selects every p element that is the last child of its parent
:root
:root
Selects the document’s root element
:empty
p:empty
Selects every p element that has no children (including text nodes)
:target
#news:target
Selects the current active #news element (clicked on a URL containing that anchor name)

:enabled
input:enabled
Selects every enabled input element
:disabled
input:disabled
Selects every disabled input element
:checked
input:checked
Selects every checked input element
:not(selector)
:not(p)
Selects every element that is not a p element
::selection
::selection
Selects the portion of an element that is selected by a user

No comments:

Post a Comment