Skip to content
Introductory Guide To Web Development
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>
<body>
<!--
HTML LINKS!
Will bring you from one place to another in the WWW
Two Types of Links:
- External Link: Bring the user from one webpage to a totally different webpage
- Internal Link: Bring the user from one part of the webpage to another part of the SAME webpage
Both types of links use the <a> tag
-->
<!--
HTML TABLES!
- regular table seen every table, like in MC Word
- with rows and columns
- used to hold data, schedule, information, and more...
- A lot of tags that make up an HTML table, memorization
-->
<!--
HTML GROUPING TAGS
- <span>: inline text tag
- <div>: block grouping tag
IMPORTANT
- HTML grouping tags don't do anything on its own, only with CSS will it have usage
-->
<!--
CSS POSITIONING
- How we move and place elements on a webpage
- Absolute, fixed, relative
-->
<!--
DECENDANT SELECTORS
- Combination of the three main types of selectors
- Relies heavily to parent-child relationships
-->
<!--
CSS PSEUDO CLASSES & SELECTORS
- Used to define a special state of an element
- A pseudo class...
* Style an element whenever a user hovers over it
* Style visited and unvisited links on a webpage
* Style an element whenever it gets focused
-->
<h1 id = "mainTitle">The Animals On Planet Earth</h1>
<p id = "introPara">Welcome to this <span id = "redWord">bootiful</span> animals webpage! Made by Jacob! Enjoy! :)</p>
<h3>Table Of Contents:</h3>
<ul class = "TOC">
<li><a href = "#catHead">Cats</a></li>
<li><a href = "#dogHead">Dogs</a></li>
<li><a href = "#pigHead">Pigs</a></li>
<li><a href = "#cowHead">Cows</a></li>
<li><a href = "#rabbitHead">Rabbits</a></li>
<li><a href = "#chickenHead">Chickens</a></li>
<li><a href = "#butterHead">Butterflies</a></li>
<li><a href = "#dolphinHead">Dolphins</a></li>
<li><a href = "#sharkHead">Sharks</a></li>
</ul>
<hr>
<!--VARIATION 1: TABLE-->
<table id = "firsttable">
<thead id = "firsthead">
<tr>
<th class = "firstCol">Animal</th>
<th>Color</th>
<th>Where Originated</th>
<th>More Info</th>
</tr>
</thead>
<tbody id = "firstbody">
<tr>
<td class = "firstCol">Cats</td>
<td>Orange & Gray</td>
<td>North America</td>
<td>2 meals a day</td>
</tr>
<tr>
<td class = "firstCol">Dogs</td>
<td>Orange & Gray</td>
<td>North America</td>
<td>2 meals a day</td>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.