The following section contains references to latest HTML5, CSS3 and more…
The following section contains a complete list of standard tags belonging to the HTML5 and XHTML 1.0 specifications. All the tags are ordered alphabetically.
The following section contains a complete list of visual properties belonging to the CSS3 specifications. All the properties are ordered alphabetically.
CSS3 introduce 3 new selectors for the sub-string or matching attributes. they are [att^=val], [att$=val] and [att*=val]. these selectors coming under Sub-string Matching Attribute Selectors section.
This is the “begins with” selector. This selector allows for the selection of elements where a specified attribute begins with a specified string. example:
<pre>a[alt~=”Kerala”] { color:#00aa00; font-size:14px; border:1px solid #00aa00; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#afa }</pre>
<code>a[alt~=”Karnataka”] { color:#0000aa; font-size:14px; border:1px solid #0000aa; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#aaf }</code>
A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.
A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, “>”, and “+”. Whitespace may appear between a combinator and the simple selectors around it.
The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the rightmost simple selector.
One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.
Here is a sample div with class “boxtest”.
It has 20px border, 30px padding, and 300px width.
div.boxtest {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}
The total width including borders and padding should be 400px.
20+30+300+30+20 = 400
User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px.
300-20-30-30-20 = 200
The red and blue bars below are there for comparison. This div (including its borders) should be as wide as the blue bar.
Let’s start looking at the list:
