Skip to main content

HTML5 and CSS3 References

The following section contains references to latest HTML5, CSS3 and more…

HTML5 / XHTML Tags

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.


CSS3 Properties

The following section contains a complete list of visual properties belonging to the CSS3 specifications. All the properties are ordered alphabetically.

A
align-content
align-items
align-self
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
B
backface-visibility
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
C
caption-side
clear

CSS3 new attribute selectors

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.

[att^=val]

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>

Selector syntax

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.

Boxtest

Boxtest

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.

×

Hello!

താഴെ കാണുന്ന വാട്സാപ്പ് ഐക്കൺ ക്ലിക്ക് ചെയ്യുകയോ ഈ മെയിൽ ഐഡിയിലേക്ക് മെയിൽ അയക്കുകയോ ചെയ്യുക.

രാജേഷ് ഒടയഞ്ചാൽ

×
Verified by MonsterInsights