Introductory Guide To Web Development (2)

Explore

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

⁠

https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator⁠

⁠

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 :)

Try the CSS specificity quiz found on KHAN ACADEMY, it should run through all the content we covered in the past two sessions.

(You can find the quiz by clicking here)⁠

⁠

Raw Code: All About Animals Webpage

Note ~ the following code is not indented correctly due to copy paste issues,

<!DOCTYPE html>

<head>

<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

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.