217 lines
6.2 KiB
Markdown
217 lines
6.2 KiB
Markdown
## Lecture 1 (13:00) - Intro to CSS
|
|
|
|
### Style Rules
|
|
|
|
- CSS associates rules with HTML elements
|
|
- These rules govern how content of specified elements should be displayed
|
|
- Selector - Indicates the element(s) the rule applies on
|
|
- Declaration - Indicates how said elements should be formatted
|
|
|
|
#### Example 1
|
|
|
|
```css
|
|
p {
|
|
font-family: Arial;
|
|
}
|
|
```
|
|
|
|
- `p` here is the selector - it indicates all `<p>` elements should be selected.
|
|
- `{ font-family: Arial; }` is the declaration - indicating that all selected elements should be styled in the font family of Arial.
|
|
|
|
#### Example 2
|
|
|
|
```css
|
|
h1, h2, h3 {
|
|
font-family: Arial;
|
|
color: yellow;
|
|
}
|
|
```
|
|
|
|
- Selector: `h1, h2, h3` are selected
|
|
- Declaration: `font-family: Arial; color: yellow;`. All text will be yellow Arial text.
|
|
|
|
### Using External CSS
|
|
|
|
- In the `<head>` of the HTML page, we can link a CSS file for the browser to use for the current page. It takes 3 attributes:
|
|
- **href** - path to CSS file
|
|
- **type** - the type of document being linked (`text/css`)
|
|
- **rel** - relationship to the HTML files (`stylesheet`)
|
|
|
|
#### Example
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Using External CSS</title>
|
|
<link rel="stylesheet" type="text/css" href="src/styles/style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Content Here -->
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
- The `<link />` element links a **stylesheet** of type **"text/css"** at location **"src/styles/style.css"**, relative to the HTML file.
|
|
|
|
### Using Internal CSS
|
|
|
|
- We can also include CSS directly in the HTML file using the `<style>` tag.
|
|
- This is usually done in the `<head>` element, but can also be done inline.
|
|
- Implementing CSS this way still requires a mime type to be defined ("text/css")
|
|
|
|
#### Example
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Using Internal CSS</title>
|
|
<style type="text/css">
|
|
body {
|
|
font-family: arial;
|
|
background-color: rgb(185,179,175);
|
|
}
|
|
h1 {
|
|
color: rgb(255,255,255);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Content Here -->
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
### Internal Vs External CSS
|
|
|
|
- When building a website with more than one page, external CSS should be used.
|
|
- Allows all pages to be similar & familiar.
|
|
- Avoids redundant code.
|
|
- Abstracts content from style.
|
|
- Allows entire site to be updated from a single file.
|
|
- CSS can be cached.
|
|
- Internal CSS is, in the majority of cases, bad practice. Under certain circumstances such as the following, it may be useful.
|
|
- Single page sites (still bad practice)
|
|
- One page requires additional / special rules
|
|
|
|
### CSS Selectors
|
|
|
|
| Selector | Matches | Example |
|
|
|-|-|-|
|
|
| Universal | All Elements | * { } |
|
|
| Type | Element Names | h1, h2 { } |
|
|
| Class | Class Names | h1.titlebar { } |
|
|
| ID | ID Attr. Value | \#introduction |
|
|
| Child | Direct Child Element | li>a { } |
|
|
| Descendant | (Nested) Child Element | p a { } |
|
|
| Adjacent Sibling | Direct Adjacent Element | h1+p { } |
|
|
| General Sibling | Non-Direct Adjacent Element | h1~p { } |
|
|
|
|
### Cascading
|
|
|
|
- If two or more rules apply to the same element we must be careful to ensure which rule will take precedence
|
|
- Last Rule
|
|
- Specificity
|
|
- Important
|
|
|
|
#### Last Rule
|
|
|
|
- If two selectors are identical, the last one will take precedence.
|
|
|
|
##### Example
|
|
|
|
```css
|
|
h1 {
|
|
font-family: Arial;
|
|
}
|
|
|
|
i {
|
|
color: green;
|
|
}
|
|
|
|
p {
|
|
font-size: 75%;
|
|
}
|
|
|
|
i {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
In this example, `i` would be coloured blue, since it is the last selector of `i` to appear in the stylesheet.
|
|
|
|
#### Specificity
|
|
|
|
- If one selector is more specific than the others, the more specific rule will take precedence over more general ones.
|
|
|
|
##### Example
|
|
|
|
```css
|
|
* {
|
|
color: blue;
|
|
}
|
|
|
|
p {
|
|
color: red
|
|
}
|
|
|
|
p#intro {
|
|
color: green;
|
|
}
|
|
```
|
|
|
|
In this example, `p#intro` text would be coloured green, even though `*` (all text) is coloured blue, and `p` is coloured red. This is due to `p#intro` being a smaller scope than the rest.
|
|
|
|
#### Important
|
|
|
|
- Adding `!important` after a property value will ensure that it is used over other values, even if it should be considered less specific, or not the last.
|
|
|
|
### Inheritance
|
|
|
|
- Certain properties will be inherited by most child elements to minimise redundant code and simplify stylesheets.
|
|
- `font-family` assigned at the `<body>` of an element will ensure any `<p>` elements have the same font family, unless specified otherwise.
|
|
- Other properties such as `border` or `background-color` are not inherited by default, but can be forced to do so by using a property value of `inherit`.
|
|
- `padding` is not inherited by default, but we can force this by typing `padding: inherit;`.
|
|
|
|
### CSS and Browsers
|
|
|
|
- Some browsers may not have the same CSS rules, and there are certain quirks between them.
|
|
- ex. Firefox does not have the same scrollbar rule as chromium / IE based browsers. Chromium browsers use `::-webkit` CSS code, which Firefox does not have, instead opting for just a `scrollbar-width` and `scrollbar-color` element.
|
|
- <https://browsershots.org> and <https://crossbrowsertesting.com> can both help to develop and debug these quirks.
|
|
|
|
### Defining Colour (Color)
|
|
|
|
#### RGB(A)
|
|
|
|
- We can specify an RGB(A) value with a function:
|
|
- `rgba(102, 205, 170, 0.2)`, where the values correspond to Red, Green, Blue and Alpha (transparency).
|
|
- All values are decimal converted to 8 bit binary positive integers, ranging from 0 to 255.
|
|
|
|
#### HSLA
|
|
|
|
- We can define colour by using HSLA too:
|
|
- `hsla(159.612, 51%, 60%, 0.2)`, where the values correspond to Hue, Saturation, Lightness and Alpha
|
|
|
|
#### Hex Codes
|
|
|
|
- We can specify hexadecimal RGB codes this way, using 2 characters for each channel.
|
|
- `#66CDAA32`, where `#RRGGBBAA` is used for RGBA, or `#RRGGBB` for RGB, we just convert from the decimal format of `rgba()`, to hexadecimal.
|
|
- All values are 2-bit hex values converted to 8-bit binary positive integers, ranging from 0 to 255.
|
|
- `#66CDAA32` - `rgba(102, 205, 170, 0.2)` - `hsla(159.612, 51%, 60%, 0.2)`
|
|
|
|
#### Colour Names
|
|
|
|
- In CSS, there are 140 hard coded colour names that can be found in several places.
|
|
- [MDN HTML Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords)
|
|
|
|
### CSS Property Overview
|
|
|
|
#### Color
|
|
|
|
- This property is used to change the foreground colour (text) inside an element
|
|
|
|
#### Background-color
|
|
|
|
- This property changes the background colour inside the box. If unset, this is set to transparent by default, using the browsers colour.
|