---
# System prepended metadata

title: COMP 1850 Lesson Three
tags: [COMP-1850]

---

---
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;
    }
</style>

# COMP 1850 Lesson Three


## Review

==Comments== can be used to document your code, or to temporarily hide elements from view. HTML comments are _multi-line_

```
<!--
This is an example of a comment

<h1>None of this is visible!</h1>
<img src="dog.jpg">
-->
```
<br>

HTML5 introduced several new ==semantic== elements, to help us give our documents additional structure and meaning. Those tags are:

* header - used near the top of the body to contain your page title and site navigation
* footer - used near the bottom of the body to contain additional navigation, copyright, and contact information
* main - used to contain the main page content
* aside - used to contain secondary content that is related to the main page content. Typically styled as a sidebar
* section - used to contain a logical section of content
* article - used to surround any self-contained content that could exist outside of the current page. Typically used for content that is distributed independently, like a social media post
* nav - used to contain any list of links. May be used in multiple places; the header and footer for example.

<br>

There are two basic types of ==lists== in HTML: ordered and unordered. For your markup to be valid, only list item elements may appear as direct children of either type of list.

For site navigation, i.e. the links that appear at the top of each page we create, an unordered list is typically used. The full markup may look something like the following example:

```
<header>
    <h1>Page Title</h1>
    <nav>
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            ...
        </ul>
    </nav>
</header>
```

The ==links== themselves are created with the anchor tag, an element that has a required "href" attribute to tell the browser where to navigate to:

```
<a href="www.bcit.ca">BCIT Homepage</a>
```

## Introduction to CSS

Now that we are familiar with the basic set of elements needed to markup text, lists, and links, we can start to change how our pages _look_.

CSS (Cascading Style Sheets) is the presentation layer of the web. It allows us to change the layout of our pages, add color, style text and other elements, and to a slight degree change how the page _behaves_

CSS is a different language to HTML, and requires a different file extension: .css

While technically possible to combine CSS and HTML into a single .html file, we are going to separate the two and place our styles into a .css file.

Once you have a .css file ready, it can be loaded into any HTML page using the `link` element:

```
<link rel="stylesheet" href="index.css"></link>
```

Note: the link element can be placed in several places throughout an HTML document, but for the time being we will place them in the `<head>`

Now that you a) have a .css file and b) a link tag in your head, load the page in the browser and use the Developer Tools to verify that it is loading correctly (in Chrome you can find this in the 'Sources' pane)


### Structure of a CSS file

CSS is made up of ==rules==, and rules are made up of:
1. Selectors
2. Properties
3. Values

Here is a generic example:

```css
selector {
	property: value
}
```

A ==selector== is how we specify _which_ element(s) we want to style. A ==property== is the aspect of the element we want to change (e.g. the _size_ of some text), and the ==value== is what we want to set the property to. 

Selectors can be HTML elements, classes (applied to multiple elements whenever common styling is needed), or ids (applied only to a single element for unique styling)

```css

in index.css:

div {

}
.special {

}
#site-title {

}

in index.html:

<div></div>
<p class="special"></p>
<h1 id="site-title"></h1>
```

Properties only accept certain types of values (some only accept numbers, some only accept quoted strings of text, etc.) and they all have default values! The browser applies its own default styling to all elements, which can be viewed in the Developer Tools (in Chrome you can find this in the 'Elements' pane)

## General Strategy for CSS

1. Identify the elements you need to style
2. Decide on a rule that will apply only to those elements – if you do not have a way of differentiating them from similar elements, look for a parent element or add classes/ids
3. Write a rule with your chosen selector and make sure it does not conflict with other rules, and does not unintentionally change the styling of other elements on the page
4. Refactor your CSS and try to eliminate redundant rules – the fewer rules, the better

Note: you can use the Developer Tools to test styles before committing rules to a stylesheet



## Cascade

Rules can override other rules – if two rules have the same ==weight==, then whichever is declared last takes precedence

```css
p {
    color: red;
}

p {
    color: blue;
}
```

The basic set of weights are as follows:

1. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before). __Weight 1__
2. Class selectors (e.g., .example), attribute selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover). __Weight 10__
3. ID selectors (e.g., #example). __Weight 100__

Rules with a heigher weight than other rules will take precedence regardless of order.

### The !important declaration

When an !important declaration is used after a value, this overrides any other declared values. Although technically !important has nothing to do with specificity, it interacts directly with it. 

More importantly (no pun intended), using !important is bad practice. It should be avoided because it breaks the natural cascading in your stylesheets, which in turn makes problems harder to fix.

## Multiple Selectors

Multiple selectors can be combined together to increase the weight:

```
div.special {

}
```

The above rule would only target divs with class "special", and has a weight of _11_ (1 for the element selector + 10 for the class)

Additionally, we can create a single rule that targets multiple elements by separating our selectors with commas:

```
h1, h2, p {
    color: red;
}
```

The above rule will change the text color of all h1, h2, and paragraph elements to red.


## Font Properties and Values

Fonts have several properties and values that can define their appearance:


### font-size

_Changes the size of the font_
_Possible values_: px, em, rem, %

__em__
* em is relative to the parent font-size (if current size is 12px, 1em = 12px, 1.5em = 16px)
* em can be scaled by zooming the page
* em are affected by their parent element's font size

e.g. if a page has default 16px size, and a div within the page has 12px size, 1em inside that div equals 12px, NOT 16px

__rem__

Similar to em, but always relative to root (html) font-size, and does not inherit from parent elements

__px__

Fixed pixel size, e.g. 16px 

__%__

Font sizes can be declared as a percentage of their parent (or root) font sizes 

e.g. if a page has default 16px size, and an element is declared 150%, it would end up as 16 * 1.5 = 24px

### font-family

_Changes the typeface_
_Possible values_: serif, sans-serif, cursive, Georgia, etc.  (these are fallbacks, left to right whichever is available first will be used)

### font-style

_Changes the style_
_Possible values_: normal (default), italic, oblique

### font-weight

_Changes the weight of the font_
_Possible values_: normal (default), bold, lighter, bolder, 100 - 900
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

### text-align

_Aligns the text horizontally_
_Possible values_: left (default), center, right


## Colors

Colors can be specified in multiple ways:

__hex__: e.g. #rrggbb (values of 0-f)
__named colors__: red, green, cornflowerblue https://htmlcolorcodes.com/
__rgb__: rgb(rrr ggg bbb) values of 0-255, optionally followed by a slash and value between 0 - 1 for opacity, e.g. rgb(255 0 0 / 0.5);

Use the color picker in the developer tools in Chrome!

### color

_Changes the color of text elements_
_Possible values_: any of the above color values

### background-color

_Adds a background color to any element_
_Possible values_: any of the above color values


## Lists

### list-style

_Changes the type of bullet prepended to an li_
_Possible values_: none, for others check developer tools


## Links

### text-decoration

_Affects the underline for link color_
_Possible values_: underline, none, dashed



## Block vs Inline Elements

Elements are either block or inline, but we can change the type using the 'display' property.

Possible values are: block, inline, inline-block, and more (later!)

---

<!--
<span class="exercise" id="a3">Assignment 3: Styling a page</span>

For assignment 3 you will be required to apply styles to an existing HTML page so that it matches a finished template.

Begin by downloading the assignment3.zip file from the Learning Hub (under Activities > Assignment 3). Inside the zip file you will find:

- a file named assignment3.html, pre-filled with some HTML markup
- a file named solution.png

Additionally you must create a new .css file (named index.css) and load it via a `<link>` tag in the head of the .html file.

In the .css file you must add all the rules necessary to get your page to match the provided solution.png image. For full marks you must meet the following criteria:

1. The HTML file __cannot be modified__, with the following exceptions:
    a. a link to index.css must be added in the head
    b. you may add the 'class' attribute to any element
    c. you may add the 'id' attribute to any element
2. All styles must be located in the index.css file, NOT in the .html file
3. Your css file must, at a minimum, contain:
    a. one rule that uses the _element_ selector
    b. one rule that uses the _class_ selector
    c. one rule that uses the _id_ selector

Tips for you:

1. Examine the solution carefully! The page, for instance, has a very light background color. You do not need to match it exactly, but there should be a background color present. 
2. The solution can be achieved using only the properties and values discussed in this lesson

For your submission, zip your .css and .html file and submit it to the assignment 3 dropbox as firstname-lastname-a3.zip (where firstname and lastname are your actual first and last names).
-->

## Optional Reading Before Next Class

- [Basic page layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow)
- [CSS Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
- [CSS Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position)

<!--

## Tasks To Complete Before Next Class

- [ ] Complete the [third assignment](#a3)
- [ ] (Optionally) complete the [readings](#Optional-Reading-Before-Next-Class)


---

-->
