Evolving Standards

CSS3 contains over 50 modules! Let's see!

Completed 😃

Color, Namespaces, Selectors, Media Queries

Stable 😐

Style Attributes

Testing 😉

Backgrounds and Borders, Image Values and Replaced Content, Marquee, Multi-column Layout, Speech, Values and Units, Mobile Profile, TV Profile

Refining 😛

Animations, Flexible Box Layout, Text, Fragmentation, Transforms, Transitions, Print Profile

Revising 😋

Conditional, Fonts, Paged Media, Basic User Interface, Writing Modes, CSSOM View

Exploring 😎

Cascading and Inheritance, Device Adaptation, Exclusions and Shapes, Generated Content for Paged Media, Grid Layout, (Grid) Template Layout, Line Grid, Lists Level, Positioned Layout, Presentation Levels, Regions, Tables, Selectors, Object Model, Compositing and Blending, Filter Effects, Masking, Box Alignment, Text Decoration, Intrinsic & Extrinsic Sizing, Counter Styles

Rewriting 😵

CSS Basic Box Model, Generated Content, Line Layout, Ruby, Syntax, Backgrounds and Borders

Abandoned 😥

Behavioral Extensions, Hyperlink Presentation, Grid Positioning

Find out more

www.w3.org/Style/CSS/current-work

Do it with <style>

<style>


</style>
						

Do it with <style>

<style>

/* Rules */

</style>
						

Do it with <style>

<style>

/* Rule */

#selector {

}

</style>
						

Do it with <style>

<style>

/* Rule */

#selector {
	property: value;
}

</style>
						

Do it with <style>

<style>

/* Rule */

#selector:pseudo-class {
	property: value;
}

</style>
						

Come On My Selector

New selectors in CSS3.

Sweet Child O' Mine

<style>

#big-box{
	background-color: gray;
}

.small-box{
	background-color: lightskyblue;
}
					
.small-box:first-child {			
	background-color: hotpink;
}

</style>
						

E:nth-child(n)

E:nth-last-child(n)

E:nth-of-type(n)

E:nth-last-of-type(n)

E:first-child

E:last-child

E:first-of-type

E:last-of-type

E:only-child

E:only-of-type

E:empty

To Be, or :Not() to Be

<style>

#big-box{ background-color: gray; }

.small-box{ background-color: lightskyblue; }

.small-box.left { float: left; }
.small-box.right { float: right; }
					
.small-box:not(.left) { background-color: hotpink; }

</style>