CSS Variations

CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS 1, CSS 2, CSS 3, and CSS 4. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types, which were added in CSS 2.

CSS 1

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for

• Font properties such as typeface and emphasis
• Color of text, backgrounds, and other elements
• Text attributes such as spacing between words, letters, and lines of text
• Alignment of text, images, tables and other elements
• Margin, border, padding, and positioning for most elements
• Unique identification and generic classification of groups of attributes

The W3C no longer maintains the CSS 1 Recommendation.

CSS 2

CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998. A superset of CSS 1, CSS 2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.

The W3C no longer maintains the CSS 2 recommendation.

CSS 2.1

CSS level 2 revision 1, often referred to as "CSS 2.1", fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already-implemented browser extensions to the specification. In order to comply with the W3C Process for standardizing technical specifications, CSS 2.1 went back and forth between Working Draft status and Candidate Recommendation status for many years. CSS 2.1 first became a Candidate Recommendation on February 25, 2004, but it was reverted to a Working Draft on June 13, 2005 for further review. It returned to Candidate Recommendation on 19 July 2007 and then updated twice in 2009. However, since changes and clarifications were made, it again went back to Last Call Working Draft on 7 December 2010.

CSS 2.1 went to Proposed Recommendation on 12 April 2011. After being reviewed by the W3C Advisory Committee, it was finally published as a W3C Recommendation on 7 June 2011.

CSS 3

Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999.

Due to the modularization, different modules have different stability and statuses. As of June 2012, there are over fifty CSS modules published from the CSS Working Group., and four of these have been published as formal recommendations:

• 2012-06-19 : Media Queries
• 2011-09-29 : Namespaces
• 2011-09-29 : Selectors Level 3
• 2011-06-07 : Color

CSS 4

W3C started drafting CSS 4 on September 29, 2009. However, it is currently not supported by any major web browser.

HTML 5 Advantages

HTML5 adds many new syntactical features. These include the < video >, < audio >, < header > and < canvas > elements, as well as the integration of SVG content that replaces the uses of generic < object > tags. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as < section >, < article >, < header > and < nav > are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as < a > , < cite > and < menu > have been changed, redefined or standardized. The APIs and document object model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid documents so that syntax errors will be treated uniformly by all conforming browsers and other user agents.

201203 Aug CSS3 Media Queries Becomes Official W3C Recommendation, CSS4 Media Queries Takes Shape

CSS3 Media Queries, which allows the presentation of content to be tailored to a specific range of output devices, for example presenting a website differently depending on the screen size or aspect ratio of the device a visitor is using, has become one of the most talked about aspects of CSS3 in recent months, as the concept of responsive design has gained traction, largely as a result of the rapidly growing number of differing platforms (and screen resolutions) on which users now access the web, such as smart phones,  tablets and even internet enabled televisions.
Media Queries is only the fourth CSS3 module to reach the recommendation stage of development to date, and the first so far this year, joining the CSS3 Selectors, CSS3 Color and CSS Namespaces modules, which all became official W3C recommendations last year.

CSS4 Media Queries

Work has already begun on the next incarnation of the Media Queries module, CSS4 Media Queries, with the first editors draft made public earlier this year. Whilst the CSS3 Media Queries module focused largely on the ability to change the presentation of content for differing screen sizes and resolutions, CSS4 Media Queries looks set to tackle the variety of input methods and other capabilities of differing devices, and allow for differing presentation depending upon the device capabilities. So far, three new media features have been added to the specification, as follows:

• script
• pointer
• hover

The ‘script’ Media Feature

The ‘script’ media feature can be used to query whether or not ECMAscript (for example JavaScript or ActionScript) is supported on the current document. If the user agent supports ECMAscript, and that support is active for the current document the value must be 1. Otherwise, the value must be 0.
The specification also notes that future versions of the Media Queries specification may extend this feature to allow fine-grained detection of which script is allowed to run.
More information on the ‘script’ media feature can be found in section 4.14 of the editors draft here.

The ‘pointer’ Media Feature

The ‘pointer’ media feature can be used to query about the presence and accuracy of a pointing device such as a mouse.
The ‘pointer’ media query accepts the following values:

• ‘none’ – The input mechanism of the device does not include a pointing device.
• ‘coarse’ – The input mechanism of the device includes a pointing device of limited accuracy.
• ‘fine’ – The input mechanism of the device includes an accurate pointing device.

According to the specification, both ‘coarse’ and ‘fine’ indicate the presence of a pointing device, but differ in accuracy. A pointing device with which it would be difficult or impossible to reliably pick one of several small adjacent targets, for example a touch screen device, would qualify as ‘coarse’.
The specification provides the following example of a media query using the ‘pointer’ media feature:

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
input[type="checkbox"], input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
}

More information on the ‘pointer’ media feature can be found in section 4.15 of the editors draft here.

The ‘hover’ Media Feature

The ‘hover’ media feature can be used to query whether or not the primary pointing system used on the output device is capable of hovering. If it is, the value will be 1. Otherwise, the value will be 0.
If a device has multiple pointing devices, some of which support hovering and some of which do not, the specification recommends that the UA reports the hovering ability of the least capable of the primary pointing devices. For example, on a touch screen device the value of the ‘hover’ media query should be 0, even if an optional mouse (which is capable of hovering) is attached.
More information on the ‘hover’ media feature can be found in section 4.16 of the editors draft here.
As of yet there’s no browser support for the new CSS4 features, but we’ll let you know when it happens.

HTML 5

HTML5 is going to Rock....

HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block () and inline () elements, for example (website navigation block) and (usually referring to bottom of web page or to last lines of html code). Other elements provide new functionality through a standardized interface, such as the multimedia elements

The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML. It comes with a new introductory line that looks like an SGML document type declaration, , which enables standards-compliant rendering in all browsers that use "DOCTYPE sniffing".

HTML5 also incorporates Web Forms 2.0, another WHATWG specification.

New APIs

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs).[13] Existing document object model (DOM) interfaces are extended and de facto features documented. There are also new APIs, such as:

• The canvas element for immediate mode 2D drawing. See Canvas 2D API Specification 1.0 specification[14]
• Timed media playback
• Offline storage database (offline web applications). See Web Storage[15]
• Document editing
• Drag-and-drop
• Cross-document messaging[16]
• Browser history management
• MIME type and protocol handler registration.
• Microdata
• Not all of the above technologies are included in the W3C HTML5 specification, though they are in the WHATWG HTML specification.[17] Some related technologies, which are not part of either the W3C HTML5 or the WHATWG HTML specification, are
• Geolocation
• Web SQL Database, a local SQL Database.[18]
• The Indexed Database API, a indexed hierarchical key-value store (formerly WebSimpleDB).[19]
• The W3C publishes specifications for these separately.

It's just another post

Cloud computing is Internet-based computing, whereby shared resources, software, and information are provided to computers and other devices on demand, like the electricity grid.

Cloud computing is a paradigm shift following the shift from mainframe to client–server in the early 1980s. Details are abstracted from the users, who no longer have need for expertise in, or control over, the technology infrastructure "in the cloud" that supports them. Cloud computing describes a new supplement, consumption, and delivery model for IT services based on the Internet, and it typically involves over-the-Internet provision of dynamically scalable and often virtualized resources. It is a byproduct and consequence of the ease-of-access to remote computing sites provided by the Internet. This frequently takes the form of web-based tools or applications that users can access and use through a web browser as if it were a program installed locally on their own computer. NIST provides a somewhat more objective and specific definition here. The term "cloud" is used as a metaphor for the Internet, based on the cloud drawing used in the past to represent the telephone network, and later to depict the Internet in computer network diagrams as an abstraction of the underlying infrastructure it represents. Typical cloud computing providers deliver common business applications online that are accessed from another Web service or software like a Web browser, while the software and data are stored on servers. A key element of cloud computing is customization and the creation of a user-defined experience.

Most cloud computing infrastructures consist of services delivered through common centers and built on servers. Clouds often appear as single points of access for all consumers' computing needs. Commercial offerings are generally expected to meet quality of service (QoS) requirements of customers, and typically include SLAs.[9] The major cloud service providers include Microsoft, Salesforce, Amazon, Terremark, and Google.

Properties from CSS

Properties from CSS

Property Name	Type
background-color	color
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
bottom	length, percentage
clip	rectangle
color	color
crop css3-content will likely advance slower than this specification, in which case this definition should move there	rectangle
font-size	length, percentage
font-weight	font weight
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer

CSS 3 transition

Make Sure That You're Using Safari or Chrome When Viewing These Demos

this is a link

 a{color:#000;} a:hover{color:#f00;}

input.ourInputBox:focus{
-webkit-transition:background-color 0.5s linear; 
background:#CCC; }

this is a link

a.thebg{
color:#000; 
background:#f00; 
padding:5px; 
-webkit-border-radius: 5px; 

-webkit-transition-property:color, background; 
-webkit-transition-duration: 1s, 1s; 
-webkit-transition-timing-function: linear, ease-in;
} 
a.thebg:hover{color:#f00;
background:#000;}

#signpost{
	width:60px;
	height:196px;
	position:relative;
}

#signpost #post{
	width:79px;
	height:196px;
	z-index:2;
	position:relative;
}

#signpost #sign{
	height:46px;
	width:80px;
	position:absolute;
	top:10;
	left:60;
	-webkit-transform-origin:0 0;
	-webkit-transform: rotate(86deg);
	z-index:1;
	-webkit-transition:-webkit-transform 0.5s ease-in-out;
}
#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
}

#circles{
	width:180px; 
	height:180px;
	position:relative;
}
.outercircle{
	width:180px; 
	height:180px;
	position:absolute;
	z-index:1;
	top:0: 
	left:0;
}
#circles:hover .outercircle {
	-webkit-animation-name: spin;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 10s;
}	
@-webkit-keyframes spin {
from {
	-webkit-transform: rotate(0deg);
	}

to {
	-webkit-transform: rotate(360deg);

	}
}

.middlecircle{
	width:90px; 
	height:90px;
	position:absolute;
	z-index:3;
	top:45px; 
	left:45px;
}
#circles:hover .middlecircle{
	-webkit-animation-name: spinrev;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 5s;
}	
	
	
@-webkit-keyframes spinrev {
from {
	-webkit-transform: rotate(0deg);
	}

to {
	-webkit-transform: rotate(-360deg);

	}
}

CSS 3 Gradient

CSS3 Gradient Backgrounds

Linear Gradient (Top → Bottom)

Linear Gradient (Left → Right)

Linear Gradient (with Even Stops)

Linear Gradient (with Specified Arbitrary Stops)

Radial Gradient (Centered, Full Size)

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers

CSS 3 Brouser Suport

Browser support

CSS3 is not yet a W3C standard, but all the major browsers are already supporting many of the new features. Below is a reference off all the new CSS3 properties and their browser support:

Property	IE	Firefox	Chrome	Safari	Opera
alignment-adjust
alignment-baseline
animation		5
animation-name		5
animation-duration		5
animation-timing-function		5
animation-delay		5
animation-iteration-count		5
animation-direction		5
animation-play-state		5
appearance		3
backface-visibility
background-clip	9	4	10	5	10.5
background-origin	9	4	4	5	10.5
background-size	9	4	4	5	10.5
baseline-shift
bookmark-label
bookmark-level
bookmark-target
border-bottom-left-radius	9	4	5	5	10.5
border-bottom-right-radius	9	4	5	5	10.5
border-image				3
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-radius	9	4	5	5	10.5
border-top-left-radius	9	4	5	5	10.5
border-top-right-radius	9	4	5	5	10.5
box-decoration-break
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
box-shadow	9	4	10		10.5
box-sizing	8		9
color-profile
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
column-count
crop
dominant-baseline
drop-initial-after-adjust
drop-initial-after-align
drop-initial-before-adjust
drop-initial-before-align
drop-initial-size
drop-initial-value
fit
fit-position
float-offset
@font-face	9	3.6	4	3	10
font-size-adjust		2
font-stretch
grid-columns
grid-rows
hanging-punctuation
hyphenate-after
hyphenate-before
hyphenate-characters
hyphenate-lines
hyphenate-resource
hyphens
icon
image-orientation
image-resolution
@keyframes		4
inline-box-align
line-stacking
line-stacking-ruby
line-stacking-shift
line-stacking-strategy
mark
mark-after
mark-before
marks
marquee-direction
marquee-play-count
marquee-speed
marquee-style
move-to
nav-down					11.5
nav-index					11.5
nav-left					11.5
nav-right					11.5
nav-up					11.5
opacity	9	2	4	4	10
outline-offset					11
overflow-style
overflow-x	9	2
overflow-y	9	2
page
page-policy
perspective				5
perspective-origin
phonemes
punctuation-trim
rendering-intent
resize		4
rest
rest-after
rest-before
rotation
rotation-point
ruby-align
ruby-overhang
ruby-position
ruby-span
size
string-set
target
target-name
target-new
target-position
text-align-last
text-emphasis
text-height
text-justify	5
text-outline
text-overflow	5	7	4	4	10.6
text-shadow		3	4	4	10
text-wrap
transform	9	3.6
transform-origin	9	3.6
transform-style				5
transition		4
transition-property		4
transition-duration		4
transition-timing-function		4
transition-delay		4
word-break	5		8	3
word-wrap	5	3.6
voice-balance
voice-duration
voice-pitch
voice-pitch-range
voice-rate
voice-stress
voice-volume

Icon Explanations

	Supported by Internet Explorer
	Supported by Firefox
	Supported by Google Chrome
	Supported by Safari
	Supported by Opera

	Supported by Internet Explorer with the prefix -ms-
	Supported by Firefox with the prefix -moz-
	Supported by Google Chrome with the prefix -webkit-
	Supported by Safari with the prefix -webkit-
	Supported by Opera with the prefix -o-
	Supported by Opera with the prefix -xv-

For some properties you see the browser icon and a number:

9

4

4

5

10.5