Skip to content
Gallery
Introductory Guide To Web Development (2)
Introductory Guide To Web Development
Share
Explore
Introductory Guide To Web Development

Session #5

In session #5 we covered CSS position properties and grouping CSS selectors to select more elements on our webpage. We also did a kahoot quiz summarizing the knowledge from the session
⁠
REVIEW: The CSS Box Model
A very important web development model that shows the structure of a webpage
⁠
BoxModel.png
⁠
⁠
Note: A this stage, you should know what each term in the box model means and can describe how it works in a webpage, just a checkpoint.
⁠
CSS Position Properties
CSS Position essentially defines the position of an element on the webpage
Three major types of CSS positions
Relative positioning: An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content won’t adjust to fit into any gap left by element.
⁠
Screen Shot 2022-04-02 at 12.03.04 PM.png
⁠
⁠
Absolute positioning: An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
⁠
Screen Shot 2022-04-02 at 12.04.25 PM.png
⁠
⁠
Fixed positioning: An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
⁠
Screen Shot 2022-04-02 at 12.04.17 PM.png
⁠
⁠
The “float” property
The float property is specifically used for wrapping elements in html around other elements
Most used for wrapping text around images in html
The float property takes in four parameters
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent
⁠
Screen Shot 2022-04-02 at 12.09.32 PM.png
⁠
⁠
It is important to note that CSS position properties are not required in every webpage, some webpage doesn’t even have it, but CSS position is a great tool if you do want to use it in your webpage
⁠
Grouping CSS Selectors
Multiple CSS classes
sometimes we just want one element on our webpage to be in two class groups and inherit the css properties from both groups
in web development, we can give one element multiple css classes. to do it, we just add a space after the first original class, then type your second class. pls see example below for how it works
.class1 {
color: red;
}
.class2 {
font-family: chalkduster;
}

--------------------------------------------------------

<p class = "class1 class2">Hello World</p>
<p class = "class2">Hey whats up!</p>
pls check out this video for more info:
https://www.youtube.com/watch?v=PZYwZxDcs78
⁠
⁠
Combining tag-name selectors with class selectors
sometimes in a class, we just want to style certain elements in the class with the same tag-name, and nothing else, we can combine tag tag-name selectors with class selectors
in web development, we do that by typing the tag-name you want to style, this will look for all the elements in your webpage with the same tag-name you typed in; then, without typing a space, complete the rest of the selector with how you would normally select a class (.classname)
p.same {
color: grey;
}

--------------------------------------------------------

<h1 class = "same">Hello World!</h1>
<p class = "same">Hello Paragraph!</p>
<p class = "same">Hello You!</p>
<p class = "same">Hello Caterpillars!</p>
<div class = "same">Yay a div!</div>
pls check out this video for more info:
https://www.youtube.com/watch?v=go9d5Ywqx2k
⁠
⁠
⁠
Coding Challenges
Here are some ways you can practice the skills you learned :)
Try the CSS layout 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>
<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;
}
</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

-->

<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>
<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-->
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.