getting better at css
TRANSCRIPT
.item {/* style it */
}
CSS
.item {/* style it */
}
CSS
1
2
CascadeThe( 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
Structure Y O U R C S S F I L E
E L E M E N T S
h1h2h3pahr
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
L A Y O U T
P A G E S P E C I F I C
Source-Order O F C S S F I L E S
AtomicDesignB R A D
F R O S T
SpecificityW 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 GSpecificity
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
, , ,
C A L C U L A T I N GSpecificityS 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
, , ,#footer ul.social-media li a
1 1 30
C A L C U L A T I N GSpecificity
<li style=“color: red;”>
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
, , ,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
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
body div {background: red;
}2000
2 : TWO ELEMENT SELECTORS
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
body div {background: red;
}2000
2 : TWO ELEMENT SELECTORS
html body div {background: white;
}3000
3 : THREE ELEMENT SELECTORS
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
html body div {background: white;
}3000
3 : THREE ELEMENT SELECTORS
.item {background: yellow;
}0100
4 : CLASS SELECTOR
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
.item {background: yellow;
}0100
4 : CLASS SELECTOR
div.item {background: black;
}1100
5 : CLASS + ELEMENT SELECTOR
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.item {background: black;
}1100
5 : CLASS + ELEMENT SELECTOR
div.item:hover {background: white;
}1200
6 : ELEMENT + CLASS + PSEUDO-CLASS SELECTOR
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.item:hover {background: white;
}1200
6 : ELEMENT + CLASS + PSEUDO-CLASS SELECTOR
.item.item.item.item {background: pink;
}0∞00
7 : STACKED CLASSES
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
.item.item.item.item {background: pink;
}0∞00
7 : STACKED CLASSES
#item {background: purple;
}0010
8 : ID SELECTOR
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
#item {background: purple;
}0010
8 : ID SELECTOR
#item[class^=“i”]{background: orange;
}0110
9 : ID + ATTRIBUTE SELECTOR
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
#item[class^=“i”] {background: orange;
}0110
9 : ID + ATTRIBUTE SELECTOR
html body div#item[class=“i”]:hover.spy{
background: black;}
3310
10 : COMBINING
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
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
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 class="item" id="item" style="background: black;”></div>0001
11 : INLINE STYLE
div {background: orange !important;
}0001
12 : !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: orange !important;
}0001
12 : !IMPORTANT
<div class="item" id="item" 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
No Morethan4levelsdeep
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><p>Another 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><p>Another 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><p>Another 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><p>Another 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><p>Another 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><p>Another 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><p>Another 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><p>Another Paragraph</p>
</div>
LI:NTH-CHILD(ODD)
LI:NTH-CHILD(ODD)
ParentsSiblings&
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
BeforeAfter&
