css for developers
DESCRIPTION
In this presentation we will see the basics of CSS, few selectors from a developers perspective.TRANSCRIPT
![Page 1: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/1.jpg)
CSS for Developers
Anjaneyulu Reddy BEERAVALLIEmail: [email protected]
Twitter: @_anjiKNOLSKAPE Solutions Pvt Ltd
![Page 2: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/2.jpg)
CSS is a query language
![Page 3: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/3.jpg)
.a {font-size: 12px;
}
SELECT aFROM domWHERE classname = 'a'
![Page 4: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/4.jpg)
Properties
![Page 5: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/5.jpg)
Selectors - The 23
![Page 6: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/6.jpg)
** {
margin: 0;padding: 0;
}
#container * {border: 1px solid black;
}
![Page 7: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/7.jpg)
x
x - tagname
x {background-color: blue;
}
![Page 8: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/8.jpg)
#x#container {
border: 1px solid black;}
![Page 9: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/9.jpg)
.x
.error {color: red;
}
![Page 10: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/10.jpg)
x y
Select all `y` which are descendants of `x`
li a {text-decoration: none;
}
![Page 11: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/11.jpg)
a:visited a:link
":<param>" - pseudo class elements
a:visited {color: red;
}
a:link {color: purple;
}
![Page 12: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/12.jpg)
x + y
select first `y` adjacent to `x`
ul + p {color: red;
}
![Page 13: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/13.jpg)
x > yselect all `y` which are direct children to `x`
div#container > ul {
border: 1px solid black;
}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
![Page 14: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/14.jpg)
x ~ y
select all `y` adjacent to `x`
ul ~ p {color: red;
}
![Page 15: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/15.jpg)
x[attr]
attribute selector: select all x which have attribute `title`
a[title] { color: green;}
![Page 16: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/16.jpg)
x[attr="z"]
attribute selector: select all x which have attribute `attr` whose value is equal = z
a[href="www.google.com"] { color: green;}
// multiple attributesa[href="www.google.com"][title="google"] {
color: green;}
![Page 17: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/17.jpg)
a[href*="tuts"]
attribute selector: select all anchor tags which have attribute `href` whose value contains the word `tuts`
a[href*="tuts"] { color: green;}
![Page 18: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/18.jpg)
a[href^="http"]
attribute selector: select all anchor tags which have attribute `href` whose value start with the word `http`
a[href^="http"] { color: green;}
![Page 19: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/19.jpg)
a[href$=".jpg"]
attribute selector: select all anchor tags which have attribute `href` whose value end with the word `.jpg`
a[href$=".jpg"] { color: green;}
![Page 20: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/20.jpg)
x:checked
Used of radio buttons and checkboxes.
input[type=radio]:checked { border: 1px solid black;}
![Page 21: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/21.jpg)
x:after
A special pseudo class which can add content
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; height: 0;}
.clearfix { display: inline-block;}
![Page 22: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/22.jpg)
x:before
A special pseudo class which can add content
.clearfix:before { content: ""; display: block; clear: both; visibility: hidden; height: 0;}
.clearfix { display: inline-block;}
![Page 23: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/23.jpg)
x:hover
action pseudo class
div:hover { background: #e3e3e3;}
![Page 24: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/24.jpg)
x:not(selector)div:not(#container) { background: #e3e3e3;}
![Page 25: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/25.jpg)
x:nth-child(n)1 based indexing
li:nth-child(3) { color: red;}
li:nth-child(4n) { color: red;}
![Page 26: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/26.jpg)
x:nth-last-child(n)1 based indexing. begins at end of the collection
li:nth-last-child(3) { color: red;}
li:nth-child(4n) { color: red;}
![Page 27: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/27.jpg)
x:first-childul li:first-child { border-top: none;}
![Page 28: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/28.jpg)
x:last-childul > li:last-child { border-top: none;}
![Page 29: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/29.jpg)
Questions?
![Page 30: CSS for developers](https://reader033.vdocuments.net/reader033/viewer/2022051110/54c7de604a795999488b45dd/html5/thumbnails/30.jpg)
Thank You