Articles from Jinal Desai .NETExam 70-480 CSS32013-01-19 14:01:28 Jinal DesaiThe article is targeted for Microsoft Certifi...
li:nth-child(1) { color:red; } //Index is 0 based not 1 based, so it fetches second childelementli:nth-child(2n+3) { } //3...
Font Propertiesfont-style : normal | italique | obliquefont-variant : normal | small-capsfont-weight : normal | bold | bol...
{ visibility : visible | hidden }{ white-space : normal | pre | nowrap | pre-wrap | pre-line | inherit }{ overflow : visib...
-ms-flex-pack : distribute; //manage space between child flex elements}{ display : -ms-flexbox;-ms-flex: 1 0 auto; //1=rel...
{ transform: scale(2) translate (50px 50px) rotate(10deg); }// 50px=down and 50px=right.someClass {transition:all 1s;}.som...
Upcoming SlideShare
Loading in...5
×

Exam 70 480 CSS3 at Jinal Desai .NET

506

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
506
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Exam 70 480 CSS3 at Jinal Desai .NET

  1. 1. Articles from Jinal Desai .NETExam 70-480 CSS32013-01-19 14:01:28 Jinal DesaiThe article is targeted for Microsoft Certification exam 70-480, the CSS3 describedin the article is limited to the exam point of view only.SelectorsElement 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 withSelector Chainingtable, ul { color:red; } //all tabl and ul elementsdiv table, div ul { color:red; } //all table and ul elements which are inside divPseudo Element Selectorsp::first-letter { color:red; } //Apply style to first character of every paragraphp::first-line { color:red; } //Apply style to first line of every paragraphp:hover { color:red; } //Apply style when hover on every paragraphCombinatorsCombinators are simple selectors in your css, which when combined it targets togroup 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 Div1ul + div { } //Immediate succeeding div siblings of all ulPseudo Classesli:first-child { color:red; }
  2. 2. li:nth-child(1) { color:red; } //Index is 0 based not 1 based, so it fetches second childelementli:nth-child(2n+3) { } //3rd child elementli: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+301 1 4 - - 313 5 8 4 3 225 9 12 8 8 137 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 elementsli:nth-of-type(even) { } //applies style to all even elementsli:nth-last-child(-n+4) { } //applies style to the last four list items in any list,//be it ordered or unorderedli:nth-last-of-type(2) { } //applies style to the elements that are followed by//n-1siblings with the same element name in the document treeColor PropertiesThere 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 Propertiestext-decoration : overline | underline | line-throughtext-transform : none | lowercase | uppercase | capitalizetext-shadow : 2px 2px gray //2px down, 2px righ and color=graytext-shadow : 2px 2px 2px gray //2px down, 2px right, 2px blur and color=graytext-shadow : 0 0 10px red //0 down and 0 right means not going in specific direction//shadow will go in every directiontext-shadow : 2px 2px 2px red, 4px 4px 4px green, n number//shadow can have multiple parameters separated by comma//to apply multiple shadowtext-shadow : -2px 2px -2px red, 4px -4px -4px green//-sign for going in reverse direction
  3. 3. Font Propertiesfont-style : normal | italique | obliquefont-variant : normal | small-capsfont-weight : normal | bold | bolder | light | lighter | #//# can be any number between 100-900 where 100 is lighter and 900 bolderfont-size : {length} //1px, 1pt, 1cm, 0.5inline-height : {length} //for making space between the linesfont-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. 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 borderGradients{ 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.10background-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%, blue25%, green 40%, red 60%, purple 80%, white 100%); /* IE10+ */background-image: -o-radial-gradient(center center, circle contain, black 0%, blue25%, 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;}FlexboxIt is giving control over it’s child elements.{ display : -ms-flexbox;
  5. 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; }GridGrid 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. 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.ReferencesImpressive Websw3 schoolsMicrosoft Virtual Academy

×