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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Getting Better at CSS

Ähnlich wie Getting Better at CSS (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Getting Better at CSS