Getting Better at CSS

.item {
/* style it */
}
CSS
1
2

Cascade
The
( I T ’ S I N T H E N A M E )

1 I N L I N E
2 < H E A D > O F Y O U R H T M L
3 E X T E R N A L S T Y L E S H E E T
😱
😷
😎
3 Places Y O U C A N P U T C S S
<div style=“color: blue”>Text</div>
<head>
<style>
.item {
color: blue;
}
</style>
</head>
<link rel=“stylesheet type=“text/css” href=“styles.css” />

1 I N L I N E
2 < H E A D > O F Y O U R H T M L
3 E X T E R N A L S T Y L E S H E E T
3 Places Y O U C A N P U T C S S
<div style=“color: blue”>Text</div>
<head>
<style>
.item {
color: blue;
}
</style>
</head>
<link rel=“stylesheet type=“text/css” href=“styles.css” />
M O S T
L E A S T

StructureY O U R C S S F I L E
E L E M E N T S
h1
h2
h3
p
a
hr
P I E C E S /
C O M P O N E N T S
.social-media
.page-title
.read-more
L A Y O U T
.header
.nav
.main
.footer
P A G E S
.home
.about
.contact

R E D E F I N E /
E L E M E N T S

P I E C E S /
C O M P O N E N T S

Source-OrderO F C S S F I L E S

Atomic
Design
B R A D
F R O S T

Specificity
W H Y D O E S T H I S M A T T E R ?

C A L C U L A T I N G
Specificity
M O S T S P E C I F I C L E A S T S P E C I F I C
S T Y L E
A T T R I B U T E I D
C L A S S ,
P S E U D O - C L A S S
A T T R I B U T E E L E M E N T S
, , ,

Specificity
S T Y L E
C L A S S ,
, , ,
#footer ul.social-media li a
1 1 30

Specificity
<li style=“color: red;”>
S T Y L E
C L A S S ,
, , ,1 0 00

!Important
.item {
color: black !important;
}
A U T O M A T I C W I N
.another-item {
color: red !important;
}

In PracticeO V E R R I D I N G B A C K G R O U N D C O L O R
div {
background: black;
}
1000
1 : ELEMENT SELECTOR

div {
background: black;
}
1000
1 : ELEMENT SELECTOR
body div {
background: red;
}
2000
2 : TWO ELEMENT SELECTORS

body div {
background: red;
}
2000
2 : TWO ELEMENT SELECTORS
html body div {
background: white;
}
3000
3 : THREE ELEMENT SELECTORS

html body div {
background: white;
}
3000
3 : THREE ELEMENT SELECTORS
.item {
background: yellow;
}
0100
4 : CLASS SELECTOR

.item {
background: yellow;
}
0100
4 : CLASS SELECTOR
div.item {
background: black;
}
1100
5 : CLASS + ELEMENT SELECTOR

div.item {
background: black;
}
1100
5 : CLASS + ELEMENT SELECTOR
div.item:hover {
background: white;
}
1200
6 : ELEMENT + CLASS + PSEUDO-CLASS SELECTOR

div.item:hover {
background: white;
}
1200
6 : ELEMENT + CLASS + PSEUDO-CLASS SELECTOR
.item.item.item.item {
background: pink;
}
0∞00
7 : STACKED CLASSES

.item.item.item.item {
background: pink;
}
0∞00
7 : STACKED CLASSES
#item {
background: purple;
}
0010
8 : ID SELECTOR

#item {
background: purple;
}
0010
8 : ID SELECTOR
#item[class^=“i”]{
background: orange;
}
0110
9 : ID + ATTRIBUTE SELECTOR

#item[class^=“i”] {
background: orange;
}
0110
9 : ID + ATTRIBUTE SELECTOR
html body
div#item[class=“i”]:hover.spy{
background: black;
}
3310
10 : COMBINING

html body
div#item[class=“i”]:hover.spy{
background: black;
}
3310
10 : COMBINING
<div class="item" id="item"
style="background: black;”></div>0001
11 : INLINE STYLE

style="background: black;”></div>0001
11 : INLINE STYLE
div {
background: orange !important;
}
0001
12 : !IMPORTANT

div {
background: orange !important;
}
0001
12 : !IMPORTANT
style="background:
black !important;”></div>
0001
13 : !IMPORTANT ON AN INLINE STYLE

Keep in MindN E S T I N G C A U S E S P R O B L E M S
.header .nav ul > li > a

Keep in MindI D S A R E F R O W N E D U P O N
#nav ul > li > a

Pseudo SelectorsS P E C I F I C P I E C E O F A N I T E M
a:hover

Pseudo SelectorsS P E C I F I C P I E C E O F A N I T E M
a {
color: red;
}
a:hover {
text-decoration: underline;
}

input:focus {
background: yellow;
}
input:blur {
background: white;
}
input:hover {
border: 5px solid yellow;
}

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
<p>Another Paragraph</p>
</div>

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
</div>
UL:ONLY-OF-TYPE

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
</div>
LI:LAST-CHILD

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
</div>
DIV DIV:FIRST-OF-TYPE

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
</div>
DIV DIV:LAST-OF-TYPE

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
</div>
LI:NTH-CHILD(2)

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
</div>
P:NTH-OF-TYPE(2)

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
</div>
LI:NTH-CHILD(EVEN)

<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>abc</div>
<p>Paragraph</p>
<div>Item</div>
<p>Paragraph</p>
</div>
LI:NTH-CHILD(ODD)
LI:NTH-CHILD(ODD)

Parents
Siblings&C U S T O M R A D I O B U T T O N S
A N D C H E C K B O X E S

Getting Better at CSS

Recomendados

Recomendados

Más contenido relacionado

Similar a Getting Better at CSS

Similar a Getting Better at CSS (20)

Último

Último (20)

Getting Better at CSS