Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Exam 70 480 CSS3 at Jinal Desai .NET

889 views

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
  • Be the first to comment

  • Be the first to like this

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

×