The document provides an overview of CSS3 as it relates to the Microsoft certification exam 70-480, detailing various selectors, properties, and methods for styling elements. It covers selectors such as element, class, and id selectors, as well as combinators and pseudo-classes, in addition to properties for color, text, and layout management like flexbox and grid. The document also explains advanced techniques like animations, transitions, and handling visibility, with references to learning resources.

1. Articles from Jinal Desai .NET
Exam 70-480 CSS3
2013-01-19 14:01:28 Jinal Desai
The article is targeted for Microsoft Certification exam 70-480, the CSS3 described
in the article is limited to the exam point of view only.
Selectors
Element Selector: li { color: red; }
Class Selector: .fancyClass { color: red; }
Universal Selector: *.fancyClass { color: red; }
Combination of element selector and class selector to limit the scope: div
.fancyClass { color:red; }
Identifier Selector: #contactForm { color:blude; }
Attribute Selector []:
*[data-author] { color:red; } <div data-author></div>
*[data-author=”Dan Brown”]{ } <div data-author="Dan Brown"></div>
*[data-author*=Brown]{ }
<div data-author="Dan Brown"></div>
//*=contains
*[data-author^=Dan]{ }
<div data-author="Dan Brown"></div>
//^=starts with
*[data-author$=Brown]{ }
<div data-author="Dan Brown"></div>
//$=ends with
Selector Chaining
table, ul { color:red; } //all tabl and ul elements
div table, div ul { color:red; } //all table and ul elements which are inside div
Pseudo Element Selectors
p::first-letter { color:red; } //Apply style to first character of every paragraph
p::first-line { color:red; } //Apply style to first line of every paragraph
p:hover { color:red; } //Apply style when hover on every paragraph
Combinators
Combinators are simple selectors in your css, which when combined it targets to
group or individual elements.
#Div1 div { } //All the divs inside div with id Div1
#Div1 p { } //All the paragraphs inside div with id Div1
#Div1 > p { } //All the immediate paragraphs inside the div with id Div1
#Div1 ~ p { } //All the sibling paragraphs to the div with id Div1
ul + div { } //Immediate succeeding div siblings of all ul
Pseudo Classes
li:first-child { color:red; }

2. li:nth-child(1) { color:red; } //Index is 0 based not 1 based, so it fetches second child
element
li:nth-child(2n+3) { } //3rd child element
li:nth-of-type(2n+3) { }
//Following is reference for which element will be covered
//in applying styles based on particular expression, ie.
//for 2n+1 expression it will apply style to elements 1,3,5,7,9,11 (all odd elements)
n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
01 1 4 - - 3
13 5 8 4 3 2
25 9 12 8 8 1
37 13 16 12 13 -
49 17 20 16 18 -
5 11 21 24 20 23 -
li:nth-of-type(odd) { } //applies style to all odd elements
li:nth-of-type(even) { } //applies style to all even elements
li:nth-last-child(-n+4) { } //applies style to the last four list items in any list,
//be it ordered or unordered
li:nth-last-of-type(2) { } //applies style to the elements that are followed by
//n-1siblings with the same element name in the document tree
Color Properties
There are around 300 css properties to apply.
{ color:red; } //175 named colors are there
{ color:#0000FF; }
{ color:#00F; }
{ color:rgb(0,0,255); } //red, green and blue
{ color:rgba(0,255,0,0.5); } //a=opacity
{ color:hsl(0,50%,50%); } //hue, saturation and lightness
{ color:hsla(0,0,50%,0.7); } //a=opacity
{ opacity:0.5; } //fade color upto 50%
Basic Text Properties
text-decoration : overline | underline | line-through
text-transform : none | lowercase | uppercase | capitalize
text-shadow : 2px 2px gray //2px down, 2px righ and color=gray
text-shadow : 2px 2px 2px gray //2px down, 2px right, 2px blur and color=gray
text-shadow : 0 0 10px red //0 down and 0 right means not going in specific direction
//shadow will go in every direction
text-shadow : 2px 2px 2px red, 4px 4px 4px green, n number
//shadow can have multiple parameters separated by comma
//to apply multiple shadow
text-shadow : -2px 2px -2px red, 4px -4px -4px green
//-sign for going in reverse direction

3. Font Properties
font-style : normal | italique | oblique
font-variant : normal | small-caps
font-weight : normal | bold | bolder | light | lighter | #
//# can be any number between 100-900 where 100 is lighter and 900 bolder
font-size : {length} //1px, 1pt, 1cm, 0.5in
line-height : {length} //for making space between the lines
font-family : {fontname}
New way of defining font faces
@font-face {
font-family : “Arial123”;
src : url(“/fonts/Arial.woff”) format(woff);
}
//to use it
.arialFont {
font-family : Arial123;
}
How to define Columns?
{ columns : 8; }
{ columns : 100px 200px 100px 200px; }
Box Properties
{ margin : 10px; } //margin 10px in all directions
{ margin-left : 10px; }
{ margin-right : 10px; }
{ margin-top : 10px; }
{ margin-bottom : 10px; }
{ padding : 20px; } //padding 20px in all directions
{ padding-left : 20px; }
{ padding-right : 20px; }
{ padding-top : 20px; }
{ padding-bottom : 20px; }
{ border : 2px solid; }
{ border : 5px dotted red; }
{ border-left : 1px solid green; }
{ box-sizing : border-box; } //Includes border in total width defined for the content
{ -moz-box-sizing : border-box; } //For firefox
{ -webkit-box-sizing : border-box; } //For safari
{ box-sizing : content-box; } //Default behavior of width and height
{ box-sizing : inherit; }
Visibility
{ display : inline | block | inline-block | table | none }

4. { visibility : visible | hidden }
{ white-space : normal | pre | nowrap | pre-wrap | pre-line | inherit }
{ overflow : visible | hidden | scroll | auto }
{ overflow-x : visible; }
{ overflow-y : hidden; }
{ box-shadow : 10px 10px 5px #888888; }
{ border-radius : 5px; } //for rounded border
Gradients
{ background : linear-gradient(black, white); } //standard
{ background : -moz-linear-gradient(black, white); } //Firefox 3.6+
{ background : -webkit-linear-gradient(black, white); } //Safari 5.1+, Chrome 10+
{ background : -o-linear-gradient(black, white); } //opera 11.10
background-image: -webkit-radial-gradient(center center, circle contain, black 0%,
blue 25%, green 40%, red 60%, purple 80%, white 100%); /* New WebKit syntax */
background-image: -moz-radial-gradient(center center, circle contain, black 0%,
blue 25%, green 40%, red 60%, purple 80%, white 100%); //Firefox 3.6+
background-image: -ms-radial-gradient(center center, circle contain, black 0%, blue
25%, green 40%, red 60%, purple 80%, white 100%); /* IE10+ */
background-image: -o-radial-gradient(center center, circle contain, black 0%, blue
25%, green 40%, red 60%, purple 80%, white 100%); /* Opera (13?) */
Positioning
#div1 {
position:absolute;
top : 25px;
left : 50px;
z-index : 0;
}
#div2 {
position:relative;
top:25px;
left:50px;
z-index:1;
}
.centered {
display : table-cell;
min-height : 200px;
min-width : 200px;
text-align : center;
vertical-align : middle;
border:1px solid #ff4444;
}
Flexbox
It is giving control over it’s child elements.
{ display : -ms-flexbox;

5. -ms-flex-pack : distribute; //manage space between child flex elements
}
{ display : -ms-flexbox;
-ms-flex: 1 0 auto; //1=relative amount of flex, 0=size
-ms-flex: 2 0 auto; //2=double the size than previous one
}
{ display : -ms-flexbox;
-ms-flex-wrap : wrap;
}
#flexbox > div {
background-color : gray; }
#flexbox > div : nth-child(7) {
background-color : red; }
Grid
Grid Features
-Power of tables but implemented in CSS
-absolute rows and columns
-functional rows and columns
-spanning
-alignment
{ display: -ms-grid;
-ms-grid-columns:250px 250px;
-ms-grid-rows:250px 250px;
}
.grid > div > div : nth-child(2) {
-ms-grid-columns:2;
-ms-grid-rows:1;
}
.grid > div > div:nth-child(2) {
-ms-grid-row-span:2;
-ms-grid-column-span:3;
}
{ height:600px;
-ms-grid-rows:100px 1fr 2fr 100px;
width:400px;
-ms-grid-columns:100px 1fr 2fr;
}
We can also cascade flexbox inside flexbox or grid inside grid.
Transform, Transition and Animation
.grid div h2 {
-ms-grid-column-align: center;
-ms-grid-row-align: center;
}
.grid div:nth-of-type(2) h2 {
transform: scale(0.5);
}

6. { transform: scale(2) translate (50px 50px) rotate(10deg); }
// 50px=down and 50px=right
.someClass {
transition:all 1s;
}
.someClass {
border-radius:50%; }
.animations .pagetitle {
position: relative;
animation:drop-in 1s forwards;
}
@keyframes get-angry {
0% { box-shadow:0 0 1px 1px #000000; }
60% { color:#991100; }
70% { color:#FF0000; }
80% { color:#22DD22; }
100% { color:#100000; }
}
.animate-get-angry {
animation:get-angry 5s forwards; }
@keyframes drop-in {
0% { top: -100px; }
100% { top: 0px; }
}
Animation can also be triggered from javascript.
References
Impressive Webs
w3 schools
Microsoft Virtual Academy