Skip to content
Try the CSS specificity quiz found on KHAN ACADEMY, it should run through all the content we covered in the past two sessions.
Session #6
In session #6, we covered the css descendants selector, css pseudo classes, and started talking about the importance of css specificity.
CSS Descendants Selector
You can review your knowledge with the css descendants selector by going to this link
CSS Pseudo Classes
You can review and learn more by checking out these two textbook excerpts
ch03-css_excerpt.pdf
230.1 kB
css_pseudo_classes.pdf
93 kB
CSS Selectors Cheatsheet
Below you can find a file full of every css selectors there are so far, majority of the selectors mentioned we have not and will not cover in our series.
CSS selectors cheatsheet.pdf
187.8 kB
Coding Challenges
Here are some ways you can practice the skills you learned :)
Raw Code: All About Animals Webpage
Note ~ the following code is not indented correctly due to copy paste issues,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animals</title>
<style>
body {
background: rgb(255, 252, 195);
margin-left: 13px;
margin-right: 13px;
}
h1 {
font-size: 60px;
font-family: Chalkduster;
text-align: center;
background-color: rgb(255, 127, 81);
border: rgb(161, 43, 0) 25px dotted;
margin-top: 10px;
}
#firsttable {
background-color: aqua;
}
#firsthead {
background-color: rgb(0, 92, 5);
color: rgb(255, 205, 4);
}
#firstbody {
background-color: rgb(142, 78, 0);
color: rgb(255, 142, 255);
}
th {
padding: 10px;
}
td {
padding: 10px;
}
#redWord {
color: red;
}
.catColor {
color: rgb(130, 0, 0);
}
#animalInfo {
background-color: rgb(255, 183, 249);
width: 700px;
height: 800px;
overflow: auto;
border: rebeccapurple 5px dashed;
padding: 5px;
}
#catHead {
position: relative;
text-align: center;
left: 8px;
}
#catImg {
position: relative;
left: 255px;
}
#dogStuff {
float: left;
}
#dogPara {
margin-left: 165px;
}
.catFont {
font-family: arial;
}
.firstCol {
font-family: chalkduster;
}
th.firstCol {
font-size: 20px;
}
ul.TOC li {
line-height: 30px;
}
</style>
</head>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.