anup.bishnoi@nagarro.com
If you know how to use it
Or google when you don't
Prefix google queries with "mdn":
<style>
#unique-id {
color: darkred;
}
.class-name {
color: darkslateblue;
}
</style>
<span id="unique-id">
There's this text.
</span>
<span class="class-name">
And then there's this.
</span>
Don't use # (id) selectors,
Always use . (class) selectors.
<style>
.blue {
color: darkslateblue;
}
.big {
font-size: 2em;
}
.blue.big {
text-align: center;
}
</style>
<div class="big"> Big text </div>
<div class="blue"> Blue text </div>
<div class="blue big">
Big, Blue text.<br>And centered too!
</div>
Multiple classes on one element.
<style>
.item { color: darkslateblue; }
.container > .item { color: darkred; }
</style>
<div class="item"> Item outside. </div>
<div class="container">
<div class="item">
Item one level inside.
</div>
<div>
<div class="item">
Item two levels inside.
</div>
</div>
</div>
Child selector: .a > .b
<style>
.item { color: darkslateblue; }
.container .item { color: darkred; }
</style>
<div class="item"> Item outside. </div>
<div class="container">
<div class="item">
Item one level inside.
</div>
<div>
<div class="item">
Item two levels inside.
</div>
</div>
</div>
Descendant selector: .a .b
<style>
div { color: darkslateblue; }
div[data-attr] { color: darkred; }
div[data-attr=specific] { font-size: 1.5em; }
div[data-attr~=contains] { text-align: center; }
</style>
<div>Normal div element</div>
<div data-attr="someValue">
With some attribute value
</div>
<div data-attr="specific">
With the specific attribute
</div>
<div data-attr="contains a specific part">
Contains attribute value<br>
in space-separated form
</div>
Attribute Selector: .a[attribute=value]
<style>
li:first-child {
color: darkred;
}
li:nth-child(3) {
color: darkslateblue;
}
li:nth-child(even) {
background: peachpuff;
}
li:last-child {
font-size: 1.4em;
}
</style>
<ul>
<li class="item">First and Red</li>
<li class="item">Even</li>
<li class="item">Blue and Third</li>
<li class="item">Big and Even</li>
</ul>
Pseudo Selectors:
:nth-child,
:nth-of-type,
:hover, etc.
<style>
li:first-child { color: darkred; }
li:first-child + li + li {
color: darkslateblue;
}
li:first-child + li,
li:first-child + li + li + li {
background: peachpuff;
}
li:first-child + li + li + li {
font-size: 1.4em;
}
</style>
<ul>
<li class="item">First</li>
<li class="item">Second</li>
<li class="item">Third</li>
<li class="item">Fourth (and last)</li>
</ul>
Sibling selector: .a + .b
When you're fighting Internet Explorer (< 9)
<style>
.bar {
color: white;
text-align: center;
border-bottom: 1px solid white;
}
.name { background: steelblue; }
.hex { background: #4682B4 }
.rgb { background: rgb(70, 130, 180); }
.percent {
background: rgb(27%, 51%, 71%);
}
</style>
<div class="name bar"> steelblue </div>
<div class="hex bar"> # 46 82 B4 </div>
<div class="rgb bar"> rgb(70, 130, 180) </div>
<div class="percent bar"> rgb(27%, 51%, 71%) </div>
#8CF translates to #88CCFF
<style>
.bar { color: black; }
.name { background: steelblue; }
.rgb { background: rgb(70, 130, 180); }
.light-div { opacity: 0.5; }
.light-color {
background: rgba(70, 130, 180, 0.5);
}
</style>
<div class="name light-div bar"> steelblue
</div>
<div class="rgb light-div bar"> rgb(70, 130, 180)
</div>
<div class="light-color bar"> rgba(70, 130, 180, 0.5)
</div>
Opacity of an element ≠
Translucence of its background
<style>
#red {
color: darkred;
}
.blue {
color: darkslateblue;
}
span.blue {
color: darkgreen;
}
</style>
<div class="blue"> This is fine. </div>
<span id="red" class="blue">
But what color would this be?
</span>
<span class="blue"> And this? </span>
#unique-id greater than
div.class-name greater than
.class-name
<style>
.red { background: darkred; }
.red-imp {
background: darkred !important;
}
.blue { background: steelblue; }
</style>
<div class="bar red blue">
Red or Blue?
</div>
<div class="bar blue red">
Blue or Red?
</div>
<div class="bar blue red-imp">
Definitely Red
</div>
Order of assignment is important,
not usage.
Avoid !important at all costs.
<style>
.woman { background: steelblue; color: #f2f2f2; }
.man { background: teal; color: #f2f2f2; }
.man:before { content: "Man: "; color: white; }
.woman:before { content: "Woman: "; color: white; }
.woman.talk:after {
content: "Please, do it for me!" !important;
}
</style>
<div class="woman talk bar">
I want to play for No. 21.
</div>
<div class="man talk bar">
We don't have enough cash for that.
</div>
<div class="woman talk bar">
Then I want another drink.
</div>
Only text content allowed.
<style>
body { font-size: 1em; }
.bar { background: steelblue; }
.rem { font-size: 2rem; }
.px { font-size: 32px; }
.percent { font-size: 200%; }
.em { font-size: 2em; }
</style>
<div class="rem bar">
<div class="rem">2rem -> 2rem = 2rem</div>
</div>
<div class="px bar">2em (1em ~ 16px)</div>
<div class="percent bar">200% (1em = 100%)</div>
<div class="em bar">
<div class="em">2em -> 2em = 4em</div>
</div>
Prefer rem ("root em"), relative to root.
Available everywhere except I E 8..
<style>
.block { display: block }
.inline { display: inline }
</style>
<span>Some text on one line,</span>
<span>and some more right after.</span>
<hr>
<div>Text in div,</div>
<div>doesn't keep on the same line.</div>
<hr>
<div class="inline">Hey! This div</div>
<div class="inline">is weird!</div>
<hr>
<span class="block">And look at this span,</span>
<span class="block">it broke!</span>
block makes a box,
inline runs like text.
<style>
.bar { background: darkred; }
.remove { display: none; }
.hidden { visibility: hidden; }
.transparent { opacity: 0; }
</style>
<div class="bar remove">
This won't show.
</div>
<div class="bar hidden">
This only takes space.
</div>
<div class="bar transparent">
This hides right under your nose.
</div>
display: none removes from layout,
visibility: hidden
renders only dimensions,
opacity: 0 just makes it transparent.
<style>
.cape { top: 30px; }
.superman { top: 60px; }
.tights { top: 220px; }
</style>
<div class="wrap">
<div class="cape center-it">
cape
</div>
<div class="superman center-it">
superman
</div>
<div class="tights center-it">
tights
</div>
</div>
Default stacking order is
order of appearance in HTML.
<style>
.cape { z-index: 10; }
.superman { z-index: 100; }
.tights { z-index: 10000; }
.wrap { z-index: 2; position: relative; }
.tight-wrap { z-index: 1; position: relative; }
</style>
<div class="wrap">
<div class="cape center-it"> cape
</div>
<div class="superman center-it"> superman
</div>
</div>
<div class="tight-wrap">
<div class="tights center-it"> tights
</div>
</div>
Each z-index creates
a new stacking context
<style>
div {
width: 100%;
padding: 20px;
border: 30px solid steelblue;
}
</style>
<div>
Box with 100% width takes more than 100%
</div>
width means width of content,
padding,
margin,
border excluded.
It was never right.
<style>
* { box-sizing: border-box; }
div {
width: 100%;
padding: 20px;
border: 30px solid steelblue;
}
</style>
<div>
Now, width calculation includes padding & border
</div>
Available in all browsers today.
<style>
.box { margin: 40px; color: white; }
.first { background: #ccc; }
.second { background: #bbb; }
.third { background: #aaa; }
.fourth { background: #999; }
.fifth { background: #555; }
</style>
<div class="first box">
<div class="second box">
<div class="third box">
<div class="fourth box">
<div class="fifth box">
Banana<br><br><br>
</div>
</div>
</div>
</div>
</div>
Adjacent vertical margins collapse
and leave only the larger one.
<style>
.box { margin: 25px; color: white; padding: 1px; }
.first { background: #ccc; }
.second { background: #bbb; }
.third { background: #aaa; }
.fourth { background: #999; }
.fifth { background: #555; }
</style>
<div class="first box">
<div class="second box">
<div class="third box">
<div class="fourth box">
<div class="fifth box">
Banana<br><br><br>
</div>
</div>
</div>
</div>
</div>
Unless you set padding or border
<style>
.einstein { position: relative; }
.box { border: 2px solid darkred; }
.big { width: 180px; height: 150px; }
.down-right { top: 20px; left: 200px; }
.bottom-right { right: 0; bottom: 0; }
</style>
<div class="einstein box big down-right">
Einstein a bit down and left out.</div>
<div class="einstein box">
Einstein right<br> where he belongs.</div>
<div class="einstein box big bottom-right">
Einstein can't fall.</div>
Setting position: relative moves
element relative to its normal position.
<style>
.newton { position: absolute; }
.box { border: 2px solid darkred; }
.big { width: 180px; height: 150px; }
.down-right { top: 20px; left: 200px; }
.bottom-right { right: 0; bottom: 0; }
</style>
<div class="newton box big down-right">
Newton matches Einstein.</div>
<div class="newton box">
Newton back to start.</div>
<div class="newton box big bottom-right">
Newton goes all the way down.</div>
absolute moves element relative to
the closest ancestor with position.
<style>
.blue-box {
width: 100px;
height: 100px;
background: steelblue;
border: 2px solid white;
color: white;
}
.left { float: left; }
.right { float: right; }
.clear-left { clear: left; }
.clear-both { clear: both; }
</style>
<div class="blue-box">normal</div>
<div class="blue-box left">left</div>
<div class="blue-box right">right</div>
<div class="blue-box left">stacked</div>
<div class="blue-box left">another</div>
<div class="blue-box clear-both">normal</div>
Better use a library for clearing floats.
<style>
body { font-size: 1em; }
.blue-box { position: absolute; border: 0; }
.second { top: 100px; left: 100px; }
.third {
-webkit-transform: translateX(200px);
}
.fourth {
-webkit-transform: translate(300px, 100px);
}
.fifth {
-webkit-transform: translate3d(400px, 0, 0);
}
</style>
<div class="first blue-box"> default </div>
<div class="second blue-box"> left </div>
<div class="third blue-box"> translateX </div>
<div class="fourth blue-box"> translate </div>
<div class="fifth blue-box"> translate3d </div>
translate3d() ensures hardware acceleration.
<style>
.blue-box { position: absolute; border: 0; }
.first {
-webkit-transform: translate(50px, 100px)
rotate(45deg);
}
.second {
-webkit-transform: translate(150px, 200px)
rotate(45deg);
}
.third {
-webkit-transform: translate(250px, 100px)
rotate(45deg);
}
</style>
<div class="center-area">
<div class="first blue-box"></div>
<div class="second blue-box"></div>
<div class="third blue-box"></div>
</div>
rotateZ() is the same as rotate()
<style>
.roof { width: 40px; height: 130px; }
.roof.left {
-webkit-transform: translate(120px, 65px) skewX(-40deg);
}
.roof.right {
-webkit-transform: translate(250px, 65px) skewX(40deg);
}
.base {
-webkit-transform: translate(130px, 175px);
width: 150px; height: 170px;
}
</style>
<div class="hut center-area">
<div class="left roof empty-box"></div>
<div class="right roof empty-box"></div>
<div class="base empty-box"></div>
</div>
Whatever is not specified in transform,
takes the default value 0.
<style>
body { -webkit-perspective: 400; }
.hut {
-webkit-transform: rotateY(-30deg);
}
</style>
<div class="hut center-area">
<div class="left roof empty-box"></div>
<div class="right roof empty-box"></div>
<div class="base empty-box"></div>
</div>
-webkit-perspective needs to
be set on an outer element
<style>
body { -webkit-perspective: 400; }
.hut {
-webkit-transform: rotateY(-30deg);
-webkit-transition: -webkit-transform 30s ease;
-webkit-transform-style: preserve-3d;
}
</style>
<div class="hut center-area">
<div class="left roof empty-box"></div>
<div class="right roof empty-box"></div>
<div class="base empty-box"></div>
</div>
<script>
setTimeout(window.rotateHut, 500);
</script>
Try setting rotateY() on the hut directly.
You can put the transition on all as well.
<style>
body { -webkit-perspective: 800px; }
.bird-plane {
position: absolute; width: 666px; height: 300px;
-webkit-transform: translate3d(-100px, 40px, 550px) scale(0.33);
}
</style>
<div class="hut center-area">
<div class="bird-plane"></div>
<div class="left roof empty-box"></div>
<div class="right roof empty-box"></div>
<div class="base empty-box"></div>
</div>
<script> setTimeout(window.rotateHut, 500); </script>
preserve-3d becomes important
when actually dealing with 3d.
<style>
body { -webkit-perspective: 800px; }
@-webkit-keyframes buzz {
from { opacity: 1; background: steelblue; }
50% { opacity: 0.5; background: orange; }
to { opacity: 1; background: steelblue; }
}
.base, .roof {
-webkit-animation: buzz 1s infinite;
}
</style>
<div class="hut center-area">
<div class="bird-plane"></div>
<div class="left roof empty-box"></div>
<div class="right roof empty-box"></div>
<div class="base empty-box"></div>
</div>
<script> setTimeout(window.rotateHut, 500); </script>
Any number of animations can be run
simultaneously on an element.
Now you know why.
Only adds features on top of regular CSS.