---
tags: COMP-1850
---
<style>
.markdown-body h1:first-of-type {
margin-top: 24px;
}
.markdown-body h1 {
margin-top: 64px;
}
.markdown-body h1 + h2 {
margin-top: 32px;
}
.markdown-body h2 {
margin-top: 48px;
}
.markdown-body h3 {
color: cornflowerblue;
}
.exercise {
font-size: 150%;
font-weight: bold;
color: rgb(227,112,183);
}
.note {
color: red;
font-weight: bold;
}
.box {
height: 100px;
width: 100px;
}
#div1, #div3, #div8, #div11, #div14 {
background-color: pink;
}
#div2, #div4, #div9, #div12, #div15 {
background-color: lightblue;
}
#div10, #div13, #div16 {
background-color: bisque;
}
#div3, #div4 {
display: inline-block;
}
#box-example, #box-example * {
border: 1px solid black;
}
#p1, #p3 {
background-color: pink;
}
#p2, #p4 {
background-color: lightblue;
}
.paragraph {
border: 1px solid black;
padding: 40px;
}
.markdown-body .paragraph-m {
border: 1px solid black;
margin: 40px;
}
.box-lavender {
background-color: lavender;
margin-bottom: 10px;
}
#div5 {
border: 10px solid hotpink;
}
#div6 {
border: 10px solid hotpink;
border-radius: 30px;
}
#div7 {
border: 10px solid hotpink;
border-radius: 50%;
}
#div9 {
position: relative;
left: 100px;
}
#div12 {
position: relative;
left: 50px;
bottom: 50px;
}
#div13 {
position: relative;
left: 100px;
bottom: 100px;
}
#container {
height: 300px;
position: relative;
background-color: darkseagreen;
}
#div14, #div15, #div16 {
position: absolute;
}
#div14 {
top: 0;
left: 0;
}
#div15 {
top: 0;
right: 0;
}
#div16 {
bottom: 0;
right: 0;
}
#container2 {
height: 300px;
background-color: lightblue;
}
#div17 {
position: fixed;
right: 20px;
bottom: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
#container3 {
height: 300px;
background-color: lightblue;
}
#div18 {
position: sticky;
top: 100px;
border-radius: 50%;
background-color: rgb(255,200,200,0.5);
}
</style>

# COMP 1850 Lesson Four

## Review

### Rules, Selectors, and Specificity

CSS (Cascading Style Sheets) is made up of ==rules==. A rule consists of a selector, with pairs of properties and values

h1 {
    color: red;
}

Multiple rules can be applied to the same element, and in any case where properties are redeclared, the browser chooses which value to apply based on its ==specificity==.

If the specificity is the same, the _last_ declared value is used:

<h1 class="heading" id="page-title"></h1>

h1 { /* element selector, specificity 001 */
    color: red;
}
h1 { /* element selector, specificity 001 */
    color: blue;
}
/* the h1 is colored blue */

If the specificities are different, the _highest_ specificity is used regardless of order:

#page-title { /* id selector, specificity 100 */
    color: green;
}
.heading { /* class selector, specificity 010 */
    color: red;
}
h1 { /* element selector, specificity 001 */
    color: blue;
}
/* the h1 is colored green */

### CSS Colors

Colors in CSS can be specified in four ways:

h1 { 
    color: blue; /* 'named' color */
    color: #0000ff; /* hex color */
    color: rgb(0, 0, 255); /* rgb color */
    color: rgba(0, 0, 255, 1.0); /* rgb with transparency */
}

### Font properties

CSS provides many properties for modifying the appearance of text:

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    line-height: 1.2; /* space between lines */
    letter-spacing: 0px; /* space between letters */
    text-align: left;
    text-decoration: none; /* or underline */
}

## Basic Page Layout

By default, the browser stacks ==block-level== elements vertically and ==inline-level== elements horizontally. `<div>` is an example of a generic block-level element, but we can change its type with the `display` property.

First, an example of the default block-level behaviour:

HTML:
<div class="box" id="div1"></div>
<div class="box" id="div2"></div>

CSS:
.box {
    height: 100px;
    width: 100px;
}
#div1 {
    background-color: pink;
}
#div2 {
    background-color: lightblue;
}

<div class="box" id="div1"></div>
<div class="box" id="div2"></div>
<br>

Next, an example of the behaviour when we change the display type to inline:

HTML:
<div class="box" id="div3"></div>
<div class="box" id="div4"></div>

CSS:
.box {
    height: 100px;
    width: 100px;
}
#div3 {
    background-color: pink;
}
#div4 {
    background-color: lightblue;
}
#div3, #div4 {
    display: inline-block; /* see note below! */
}

<div class="box" id="div3"></div>
<div class="box" id="div4"></div>
<br>
<br>

<p class="note">NOTE! inline-level elements *cannot* be assigned a width or height, so in the above example we needed to use a special display type called 'inline-block'. The inline-block display type allows elements to be laid out horizonally but still accept width and height values

## CSS Box Model

Every element in HTML is rendered by the browser as being inside an invisible box, e.g.:

<ul id="box-example">
<li>List item 1</li>
<li>List item 2</li>
</ul>

The properties of this box affect:

- how large the element is
- how close the element is to neighbouring elements
- the color and size of borders around the element
- the background color of an element

At the center of the box is the ==content== (text, image, etc.). Surrounding the content is ==padding==, then ==border==, and finally ==margin==.
<br>


### Padding and Margin

The following two examples show the difference between increasing the values of padding and margin.

First, an example of adding padding to a paragraph:

HTML:
<p id="p1" class="paragraph">Paragraph 1</p>
<p id="p2" class="paragraph">Paragraph 2</p>

CSS:
#p1 {
    background-color: pink;
}
#p2 {
    background-color: lightblue;
}
.paragraph {
    border: 1px solid black;
    padding: 40px;
}

<p id="p1" class="paragraph">Paragraph 1</p>
<p id="p2" class="paragraph">Paragraph 2</p>
<br>

Next, an example of adding an equivalent amount of margin to a paragraph:

HTML:
<p id="p3" class="paragraph-m">Paragraph 1</p>
<p id="p4" class="paragraph-m">Paragraph 2</p>

CSS:
#p1 {
    background-color: pink;
}
#p2 {
    background-color: lightblue;
}
.paragraph-m {
    border: 1px solid black;
    margin: 40px;
}

<p id="p3" class="paragraph-m">Paragraph 3</p>
<p id="p4" class="paragraph-m">Paragraph 4</p>

Note how the background color does not extend into the margin, how the margin pushes other elements further away, and how the size of the element is not increased.

### Borders

Borders can vary in width, and style, and can have rounded corners

HTML:
<div class="box box-pink" id="div5"></div>
<div class="box box-pink" id="div6"></div>
<div class="box box-pink" id="div7"></div>

CSS:
.box {
    height: 100px;
    width: 100px;
}
.box-blue {
    background-color: lavender;
    margin-bottom: 10px;
}
#div5 {
    border: 10px solid hotpink;
}
#div6 {
    border: 10px solid hotpink;
    border-radius: 30px;
}
#div7 {
    border: 10px solid hotpink;
    border-radius: 50%;
}

<div class="box box-lavender" id="div5"></div>
<div class="box box-lavender" id="div6"></div>
<div class="box box-lavender" id="div7"></div>
<br>

### Dimensions

Widths and heights of elements can be specified in several ways in CSS.

_Fixed_ sizes can be declared using pixels (px), rems (rem) or ems (em) with the following example properties and values:

div {
    width: 100px; /* fixed width */
    height: 100px; /* fixed height */
}

_Flexible_ (i.e. the size changes depending on the size of the screen or the size of the parent element) sizes can be declared using percentages (%), screen width (vw), or screen height (vh) using the following example properties and values:

div {
    min-width: 100px; /* flexible width, minimum 100px */
    min-height: 100px; /* flexible height, minimum 100px */
    max-width: 100px; /* flexible width, maximum 100px */
    max-height: 100px; /* flexible height, maximum 100px */
    width: 50%; /* flexible width, 50% of parent element */
    height: 10vh; /* flexible height, 10% of the viewport height */
}

Note that these properties can be combined in useful ways. For example, a minimum _and_ maximum width could be defined such that the element's width is flexible within given boundaries.

In general, __flexible dimensions should be preferred to fixed dimensions wherever possible__ to avoid layout breaking at different device sizes. This is a key element of [Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design).

<span class="note">Note:</span> You may find the 'alternative' box model described here: [Alternative Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_alternative_css_box_model) beneficial, as it requires fewer calculations to understand at what width and height an element will be rendered when padding and borders have been applied.

## Positioning

The browser uses _normal flow_ to position elements on the page (stacking vertically for block-level elements, stacking horizontally for inline-level elements), but we can modify this placement using the `position` property in CSS.

### Relative Position

With ==relative== position, elements are still placed according to the normal flow, but we can _offset_ them in any direction and by any amount.

HTML:
<div class="box" id="div8"></div>
<div class="box" id="div9"></div>
<div class="box" id="div10"></div>

CSS:
.box {
    height: 100px;
    width: 100px;
}
#div8 {
    background-color: pink;
}
#div9 {
    position: relative;
    left: 100px;
    background-color: lightblue;
}
#div10 {
    background-color: bisque;
}

<div class="box" id="div8"></div>
<div class="box" id="div9"></div>
<div class="box" id="div10"></div>
<br>

HTML:
<div class="box" id="div11"></div>
<div class="box" id="div12"></div>
<div class="box" id="div13"></div>

CSS:
.box {
    height: 100px;
    width: 100px;
}
#div11 {
    background-color: pink;
}
#div12 {
    position: relative;
    left: 50px;
    bottom: 50px
    background-color: lightblue;
}
#div13 {
    position: relative;
    left: 100px;
    bottom: 100px;
    background-color: bisque;
}

<div class="box" id="div11"></div>
<div class="box" id="div12"></div>
<div class="box" id="div13"></div>

When elements are positioned and overlap other elements, we can control the front-to-back placement using the `z-index` property – see an interactive demo here: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

### Absolute Position

With ==absolute== position, elements are removed from the normal flow completely and can be offset relative to the body, or the nearest positioned ancestor element (as in the example below).

HTML:
<div id="container">
    <div class="box" id="div14"></div>
    <div class="box" id="div15"></div>
    <div class="box" id="div16"></div>
</div>

CSS:
.box {
    height: 100px;
    width: 100px;
}
#container {
    position: relative;
    height: 300px;
    background-color: darkseagreen;
}
#div14 {
    background-color: pink;
    left: 0;
    top: 0;
}
#div15 {
    position: absolute;
    right: 0;
    top: 0;
    background-color: lightblue;
}
#div16 {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: bisque;
}

<div id="container">
<div class="box" id="div14"></div>
<div class="box" id="div15"></div>
<div class="box" id="div16"></div>
</div>

### Fixed (and Sticky) Position

Similar to absolute positioning, ==fixed== position is removed from the normal flow but maintains its position when the page is scrolled.

HTML:
<div id="container2">
    <div id="div17">Back to top</div>
</div>

CSS:
#container2 {
    height: 300px;
    background-color: lightblue;
}
#div17 {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: pink;
}

<div id="container2">
<div id="div17">Back to top</div>
</div>
<br>

Note that in this example the `position: relative;` declaration has been removed from the parent element - because of this the 'Back to top' div is now offset relative to the _entire page_, useful when we are scrolling and need an element to always stay in view!

Similar to relative positioning, ==sticky== position keeps an element in the normal flow, but allows it to _become fixed_ when a certain scroll offset has been reached

HTML:
<div id="container3">
    <div id="div18"></div>
</div>
<br>

CSS:
.box {
    height: 100px;
    width: 100px;
}
#container3 {
    height: 300px;
    background-color: lightblue;
}
#div18 {
    position: sticky;
    top: 100px;
    border-radius: 50%;
    background-color: rgb(255,200,200);
}

<div id="div18" class="box"></div>
<br>

---
<!--

<span class="exercise" id="a4a">Assignment 4a: In-Class Layout Practice </span>

Submit an HTML page with the following features:

1. A page height of 1000px or greater
2. A header that is fixed to the top of the page (does not move when the page is scrolled)
3. A menu inside the header with three links (of your choice) that are laid out horizontally
4. A paragraph of text with flexible width, no wider than 500px, but displays correctly (text does not disappear off-screen) at smaller browser widths
5. At least one element with some combination of padding, margin, and border added
6. At least one absolutely positioned element placed _inside_ of a relatively positioned element

Your submission for part a should consist of one HTML file and one CSS file. Zip these files together and upload them with the name firstname-lastname-assignment4a.zip (where firstname and lastname are your actual first and last names)

<span class="exercise" id="a4b">Assignment 4b: Layout Practice </span>

Begin by downloading the assignment4.zip file from the Learning Hub and extracting it (double-click on Mac, right-click and extract on Windows).

You should now have a folder called comp1850-assignment3. Inside this folder you will find a file called assignment3.html (complete with all the necessary markup), and images named question1.png through question5.png.

Your task is to create a single CSS file and all the rules necessary to recreate the layouts shown in the solution images. Make sure that your layouts look as close as possible to the provided images.

IMPORTANT NOTES:

- You cannot add/remove or modify any HTML elements - you will be able to achieve all the given layouts using positioning (relative, absolute) and the display property.
- You may use any of the display properties discussed in this weeks class EXCEPT for display: none
- Pay special attention to the borders around each question and how elements are positioned in relation to them

Your submission should consist of just the CSS file. Zip this file and upload it with the name firstname-lastname-assignment4.zip (where firstname and lastname are your actual first and last names)

## Tasks To Complete Before Next Class

- [ ] Complete [assignment 4a](#a4a)
- [ ] Complete [assignment 4b](#a4b)
-->

---