mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
7cea32428e
* update to hooks * more class to function * cleanup * finish ts final * update html lesson * add lessons page * clean up * move getters into context * adding type * fix bug * step 5 cleanup * init final pass * text tweak * fix ternaries * readme cleanup * fixed root readme
51 lines
1.9 KiB
Markdown
51 lines
1.9 KiB
Markdown
# Step 1.2 - Introduction to CSS (Demo)
|
|
|
|
[Demo](../demo/) | [Exercise](../exercise/)
|
|
|
|
## CSS properties
|
|
|
|
Now that we've gone over adding HTML tags to the page, let's cover adding styles to those tags. We can do quite a lot with styles! We can change:
|
|
|
|
- Typography
|
|
- Colors
|
|
- Appearance (corners, borders, decorations)
|
|
- Layout
|
|
- Position
|
|
- Display format: inline vs block
|
|
- Animations
|
|
- and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
|
|
|
|
CSS styles are always written in `property: value` pairs (like `background: blue;`) and terminated with a semicolon.
|
|
|
|
## Applying CSS to an HTML file
|
|
|
|
CSS can be applied to HTML tags in three different ways.
|
|
|
|
1. Inline using an HTML tag's `style` attribute
|
|
- `<div style="background: blue; color: white;">Hello </div>`
|
|
2. Via a `<style>` tag in the HTML page
|
|
3. Through an external CSS file
|
|
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
|
|
|
|
## Targeting specific elements
|
|
|
|
Inline styles are always applied directly to the element you place them on, but `<style>` tags and external CSS files need a way to match elements with their respective style sets. This is done with **[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)**. When selectors are combined with CSS styles, we call this a **ruleset**.
|
|
|
|
CSS rulesets take on the following form:
|
|
|
|
```css
|
|
selector1,
|
|
selector2 {
|
|
property1: value1;
|
|
property2: value2;
|
|
}
|
|
```
|
|
|
|
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296):
|
|
|
|
<img src="https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/css-syntax.png"/>
|
|
|
|
A selector can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements.
|
|
|
|
Bonus: Check out the [Vocabs project](http://apps.workflower.fi/vocabs/css/en)
|