first commit
This commit is contained in:
Boris
@@ -0,0 +1,216 @@
|
||||
## 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.
|
||||
Reference in New Issue
Block a user