CSS allows for powerful styling and layout capabilities. The document demonstrates CSS capabilities through examples of color changes, hover effects, and responsive design layouts using only CSS. It encourages exploring CSS further to "make things, change them and play with them."

1. THE POWER OF CSS
By Aniket Pant / @aniket_pant

2. HELLO
^_^

3. FIRST THINGS FIRST

4. USE A MODERN BROWSER
A webkit browser like Chrome
or
something like Mozilla Firefox

5. LET'S START WITH A DEMO
Check the full screen result .
JavaScript HTML CSS Result
CHANGE MY COLOUR!
CHECK ME OUT!

6. ANOTHER SHORT DEMO
Check the full screen result .
JavaScript HTML CSS Result
Link #1
Link #2
Link #3

7. <lcas"wsm-it>
u ls=aeoels"
<i< he=#>ik#<a<l>
l>a rf""Ln 1/>/i
<i< he=#>ik#<a<l>
l>a rf""Ln 2/>/i
<i< he=#>ik#<a<l>
l>a rf""Ln 3/>/i
<i< he=#>ik#<a<l>
l>a rf""Ln 4/>/i
<u>
/l

8. .wsm-it{
aeoels
wdh 20x
it: 0p;
mri:0at !motn;}
agn uo iprat
.wsm-itl {
aeoels i
wdh 10x
it: 0p;
mri:1m pdig 02e;
agn e; adn: .5m
tx-lg:cne;
etain etr
bcgon:rb(,,,.)
akrud ga00005;
ls-tl:nn;
itsye oe
tasto:al02slna;}
rniin l .5 ier
.wsm-itl:t-ftp(n1:oe {bcgon:rylle }
aeoels inho-ye4+)hvr akrud oabu;
.wsm-itl:t-ftp(n3:oe {bcgon:#2D2 }
aeoels inho-ye4+)hvr akrud 3C3;
.wsm-itl:t-ftp(n2:oe {bcgon:oagrd }
aeoels inho-ye4+)hvr akrud rnee;
.wsm-itl:t-ftp(n:oe {bcgon:rb(6,,01;}
aeoels inho-ye4)hvr akrud ga3024,)
.wsm-itl:oe {
aeoels ihvr
mri-et 5p;
agnlf: 0x
clr #f;
oo: ff
tasto:al02slna;}
rniin l .5 ier
.wsm-itl a{
aeoels i
dsly bok
ipa: lc;
clr #f;
oo: ff
fn-ie 15m
otsz: .e;
tx-eoain nn;}
etdcrto: oe
.wsm-itl ahvr .wsm-itl afcs{clr #f }
aeoels i :oe, aeoels i :ou oo: ff

9. ANOTHER COOL THING YOU CAN MAKE
Check the full screen result .
JavaScript HTML CSS Result

10. <i i=fgr-pc"
dv d"iuesae>
<i cas"iuefgr-"<dv
dv ls=fgr iue1>/i>
<i cas"iuefgr-"<dv
dv ls=fgr iue2>/i>
<dv
/i>

11. .iue2{bxsao:0-p 5x0x#0 }
fgr- o-hdw 2x p p 00
.iue2hvr{
fgr-:oe
-o-rnfr:rtt(30e)
mztasom oae-6dg;
-stasom rtt(30e)
m-rnfr: oae-6dg;
--rnfr:rtt(30e)
otasom oae-6dg;
-ekttasom rtt(30e)
wbi-rnfr: oae-6dg;
bxsao:0-p 5x0x#0;
o-hdw 2x p p 00
tasom rtt(30e) }
rnfr: oae-6dg;
.iue1{bxsao:02x5x0x#0 }
fgr- o-hdw p p p 00
.iue1hvr{
fgr-:oe
-o-rnfr:rtt(6dg;
mztasom oae30e)
-stasom rtt(6dg;
m-rnfr: oae30e)
--rnfr:rtt(6dg;
otasom oae30e)
-ekttasom rtt(6dg;
wbi-rnfr: oae30e)
tasom rtt(6dg;}
rnfr: oae30e)
.iue{
fgr
fot lf;
la: et
hih:20x wdh 20x
egt 0p; it: 0p;
mri:3p;
agn 0x
-o-odrrdu:10;
mzbre-ais 0%
-o-rniin al02ses-not
mztasto: l .5 aei-u;
-ektbre-ais 10;
wbi-odrrdu: 0%
-ekttasto:al02ses-not
wbi-rniin l .5 aei-u;
bcgon:#000
akrud fff;
bre-ais 10;
odrrdu: 0%
tasto:al02ses-not }
rniin l .5 aei-u;
.iuehvr{
fgr:oe

12. “ Make things, change them and play with
them. ”

13. QUESTIONS?

14. THE END
BY ANIKET PANT / @ANIKET_PANT