CSS Heaven - Free XHTML, HTML5 & CSS Templates

CSS3 is the latest version of the Cascading Style Sheets standard for separating web content from web presentation for documents written in markup languages (e.g., HTML, XML, XHTML, etc.). CSS2, the current standard, exists as one huge document; CSS3 is split into modules, each of which is wending its own way through the W3C approval process.

Syntax

The syntax of CSS3 is still the same:

• – A style sheet is a list of rules.
• – A rule has one or more selectors, and one declaration block.
• – A declaration block, enclosed in square braces, is a list of declarations.
• – A declaration is a property ("Color") plus a value for that property ("Red").
• – A colon (:) sits between a property and a value; each declaration ends with a semi-colon (;).

Selectors in CSS3

A selector is a way to indicate to which markup element a rule or style will apply. The scope of a selector can be all elements of one type, or can depend on the relative positioning or nesting of the element.

CSS3 selectors can select upon a more specific level:

• – match on attribute
• – match on attribute values
• – partial matches on attribute values
• – position in a structure (pseudo-classes), such as the nth-child
• – URL-targeted elements
• – checkable pseudo-classes (i.e., radio buttons)

Pseudo-classes, preceded by a colon, are another way to identify a markup elements — sometimes, a pseudo-class (and a style) can be defined around a user action! An example is the special :hover pseudo-class that applies only when the screen cursor is moving over an element.

Some examples of a pseudo-class are:

– :link
– :visited
– :before

A pseudo-element, on the other hand, applies only to parts of an element:

– :first-line
– :first-letter

There are three new attribute selectors in CSS3:

1) element[too^="ear"]
Selector is an exact beginning match.
Example of match: too = "earn"

2) element[too$="ear"]
Selector is an exact ending match
Example of match: too="bear"

3) element[too*="ear"]
Selector contains the match.
Example of match: too="learning"

There are sixteen new pseudo-classes in CSS3 pertaining to the marked-up document itself:

1) :root
Root element of document

2) :nth-child(n)
Exact child element for n equals a number, or use a variable for n

3) :nth-last-child(n)
Exact child element counting back from the last, for n equals a number or a variable

4) :nth-of-type(n)
Exact sibling element with same type-name, for n equals a number or a variable

5) :nth-last-of-type(n)
Exact sibling element with same type-name counting back from the last, for n equals a number or a variable

6) :last-child
Last child element of parent

7) :first-of-type
First sibling element of type

8) :last-of-type
Last sibling element of type

9) :only-child
Element that is only child of parent

10) :only-of-type
Element that is only one of type

11) :empty
Element with no children

12) :target
Element targeted in URL

13) :enabled
Element(s) (if enabled)

14) :disabled
Element(s) (if disabled)

15) :checked
Checkable element that’s checked (e.g., a radio button)

16) :not(s)
Element does not match selector s

CSS3 Images

CSS3 will allow you to layer background images in a box, with the used of background-position, background-image, and background-repeat styles — the background color is best hosting underneath all the image layers. And there are some changes to existing background style properties:

1) background-repeat:space
The image is repeated evenly, without being clipped

2) background-repeat:round
The image is rescaled to fit x times, where x is an integer.

3) background-attachment:local
If there is a scroll bar, background scrolls with the content.

4) background
"Origin" and "Size" properties can be added to the background shorthand property.

There are also three new background style properties:

1) background-clip
Default clip is the border box, but can be changed to content box or padding box.

2) background-origin
Place background in content box, border box, or padding box.

3) background-size
Indicate size of background image — you can stretch small images to fit page.

CSS3 Borders

In addition to the existing CSS borders, CSS3 adds "image" borders, and borders with rounded corners. The new properties are:

1) border-radius
Specify a rounding value for all corners.

2) border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius
Specify a rounded corner for one or more corners.

3) border-image-source
Specify an image source file for the border.

4) border-image-slice
Specify the inward offsets from the image edge.

5) border-image-width
Specify the width for your image border.

6) border-image-outset
Specify the extent beyond the box of the image border.

7) border-image-stretch
Specify tiling or scaling of the image within the border.

8) border-image
Use this shorthand property for all image border properties.

9) box-decoration-break
When a page break or a line break breaks a box, this property can specify the padding and border elements at the break; also, a background can be split up between multiple boxes that are broken.

10) box-shadow
Shadows can be added to the edges of a box.

CSS3 Columns

There are twelve new properties that allow you to define your columns:

1) column-width
2) column-count
3) columns (the shorthand property where you can define either width or number)
4) column-gap
5) column-rule-color
6) column-rule-style (solid, double, dotted, etc.)
7) column-rule-width
8) column-rule (the shorthand property for rules)
9) break-before (this one, and the next two, define column behavior with line and page breaks)
10) break-after
11) break-inside
12) column-span (to specify space for headings that span columns)