CSS for developers

Download CSS for developers

Post on 28-Jan-2015

447 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

In this presentation we will see the basics of CSS, few selectors from a developers perspective.

TRANSCRIPT

<ul><li> 1. CSS for DevelopersAnjaneyulu Reddy BEERAVALLIEmail: anji.t6@gmail.com Twitter: @_anji KNOLSKAPE Solutions Pvt Ltd</li></ul> <p> 2. CSS is a query language 3. .a { font-size: 12px;}SELECT aFROM domWHERE classname = a 4. Properties 5. Selectors - The 23 6. ** { margin: 0; padding: 0;}#container * { border: 1px solid black;} 7. xx - tagnamex { background-color: blue;} 8. #x#container { border: 1px solid black;} 9. .x.error { color: red;} 10. xySelect all `y` which are descendants of `x`li a { text-decoration: none;} 11. a:visited a:link":" - pseudo class elementsa:visited { color: red;}a:link { color: purple;} 12. x+yselect first `y` adjacent to `x`ul + p { color: red;} 13. x&gt;yselect all `y` which are direct children to `x`div#container &gt; ul { border: 1px solid black;}</p> <div> <ul><li> List Item<ul><li> Child </li></ul></li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul></div> <p> 14. x~yselect all `y` adjacent to `x`ul ~ p { color: red;} 15. x[attr]attribute selector: select all x which have attribute `title`a[title] { color: green;} 16. x[attr="z"]attribute selector: select all x which have attribute `attr`whose value is equal = za[href="www.google.com"] { color: green;}// multiple attributesa[href="www.google.com"][title="google"] { color: green;} 17. a[href*="tuts"]attribute selector: select all anchor tags which haveattribute `href` whose value contains the word `tuts`a[href*="tuts"] { color: green;} 18. a[href^="http"]attribute selector: select all anchor tags which haveattribute `href` whose value start with the word `http`a[href^="http"] { color: green;} 19. a[href$=".jpg"]attribute selector: select all anchor tags which haveattribute `href` whose value end with the word `.jpg`a[href$=".jpg"] { color: green;} 20. x:checkedUsed of radio buttons and checkboxes.input[type=radio]:checked { border: 1px solid black;} 21. x:afterA special pseudo class which can add content.clearfix:after {content: "";display: block;clear: both;visibility: hidden;height: 0;}.clearfix { display: inline-block;} 22. x:beforeA special pseudo class which can add content.clearfix:before {content: "";display: block;clear: both;visibility: hidden;height: 0;}.clearfix { display: inline-block;} 23. x:hoveraction pseudo classdiv:hover {background: #e3e3e3;} 24. x:not(selector)div:not(#container) {background: #e3e3e3;} 25. x:nth-child(n)1 based indexingli:nth-child(3) { color: red;}li:nth-child(4n) { color: red;} 26. x:nth-last-child(n)1 based indexing. begins at end of the collectionli:nth-last-child(3) { color: red;}li:nth-child(4n) { color: red;} 27. x:first-childul li:first-child { border-top: none;} 28. x:last-childul &gt; li:last-child { border-top: none;} 29. Questions? 30. Thank You </p>