Introductory Guide To Web Development (2)

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

⁠

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>

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>

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

}

</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 = "#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>

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.