1. Css ( CASCADING STYLE SHEETs ) CSS Box Model

2. All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. Explanation of the different parts: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. Width and Height of an Element width:250px; padding:10px; border:5px solid gray; margin:10px;

3. CSS Box Model Example div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. Now the total width of this element is also 250px. Note: In this example we have added a DOCTYPE declaration (above the html element), so it displays correctly in all browsers.

4. CSS Border CSS Border Properties The CSS border properties allow you to specify the style and color of an element's border. Border Style Border Width p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three { border-style:solid; border-width:1px; } Some text. Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

5. Css border Border Color p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } A solid red border A solid green border Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

6. Css border Border - Individual sides In CSS it is possible to specify different borders for different sides. p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } 2 different border styles. The border-style property can have from one to four values. border-style:dotted solid double dashed; top border is dotted right border is solid bottom border is double left border is dashed border-style:dotted solid double; top border is dotted right and left borders are solid bottom border is double border-style:dotted solid; top and bottom borders are dotted right and left borders are solid border-style:dotted; all four borders are dotted

7. Css border Border - Shorthand property When using the border property, the order of the values are: border-width border-style border-color p { border:5px solid red; } This is some text in a paragraph.

8. CSS outline Property Definition and Usage An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". The outline shorthand property sets all the outline properties in one declaration. The properties that can be set, are (in order): outline-color, outline-style, outline-width. If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, p { border:1px solid red; outline:green dotted thick; } Note: IE8 supports the outline properties only if a !DOCTYPE is specified.

9. CSS Margin Margin The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. p { background-color:yellow; } p.margin { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; } This is a paragraph with no specified margins. This is a paragraph with specified margins.

10. CSS Padding Padding The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. Example p { background-color:yellow; } p.padding { padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } This is a paragraph with no specified padding. This is a paragraph with specified paddings.

11. CSS3 animation-direction Property Q. WAP for Animation direction property. Ans. 1. 2. 3. 4. div 5. { 6. width:100px; 7. height:100px; 8. background:red; 9. position:relative; 10. animation:myfirst 5s infinite; 11. animation-direction:alternate; 12. /* Firefox */ 13. -moz-animation:myfirst 5s infinite; 14. -moz-animation-direction:alternate; 15. /* Safari and Chrome */ 16. -webkit-animation:myfirst 5s infinite; 17. -webkit-animation-direction:alternate; 18. } 19. @keyframes myfirst 20. { 21. 0% {background:red; left:0px; top:0px;} 22. 25% {background:yellow; left:200px; top:0px;} 23. 50% {background:blue; left:200px; top:200px;} 24. 75% {background:green; left:0px; top:200px;} 25. 100% {background:red; left:0px; top:0px;} 26. } 27. @-moz-keyframes myfirst /* Firefox */ 28. { 29. 0% {background:red; left:0px; top:0px;} 30. 25% {background:yellow; left:200px; top:0px;} 31. 50% {background:blue; left:200px; top:200px;} 32. 75% {background:green; left:0px; top:200px;} 33. 100% {background:red; left:0px; top:0px;} 34. } 35. @-webkit-keyframes myfirst /* Safari and Chrome */ 36. { 37. 0% {background:red; left:0px; top:0px;} 38. 25% {background:yellow; left:200px; top:0px;} 39. 50% {background:blue; left:200px; top:200px;} 40. 75% {background:green; left:0px; top:200px;} 41. 100% {background:red; left:0px; top:0px;} 42. } 43. 44. 45. 46. Note: This example does not work in Internet Explorer and Opera. 47. 48. 49.

12. CSS counter-increment Property Definition and Usage The counter-increment property increments one or more counter values. The counter-increment property is usually used together with the counter-reset property and the content property. Example 1. 2. 3. 4. 5. body {counter-reset:section;} 6. h1 {counter-reset:subsection;} 7. h1:before 8. { 9. counter-increment:section; 10. content:"Section " counter(section) ". "; 11. } 12. h2:before 13. { 14. counter-increment:subsection; 15. content:counter(section) "." counter(subsection) " "; 16. } 17. 18. 19. 20. Note: IE8 supports these properties only if a !DOCTYPE is specified. 21. HTML tutorials 22. HTML Tutorial 23. XHTML Tutorial 24. CSS Tutorial 25. Scripting tutorials 26. JavaScript 27. VBScript 28. XML tutorials 29. XML 30. XSL 31. 32.

13. CSS display Property WAP to add two separate line in one single line? p {display:inline} These two paragraphs generates inline boxes, and it results in no distance between the two elements.