start of css assignment
This commit is contained in:
parent
b2b2e41ae2
commit
a04d305e29
@ -620,5 +620,151 @@ img {
|
||||
- In the example above, **rule 2 would take priority** because it is more specific
|
||||
- Because they both contain `#subsection`, rule2 `color: red;` takes priority with rule1 `background-color: yellow;` because there is no conflict for `background-color`
|
||||
- > Note: When comparing selectors, you may come across special symbols for the universal selector(`*`) as well as combinators (`+`, `~`, `>`, and an empty space). These symbols do not add any specificity to the elements
|
||||
- In the next example, there is a conflict with the `font-size`
|
||||
```CSS
|
||||
/* rule 1 */
|
||||
.class.second-class {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* rule 2 */
|
||||
.class .second-class {
|
||||
font-size: 24px;
|
||||
}
|
||||
```
|
||||
- both rule 1 and 2 have the same specificity
|
||||
```CSS
|
||||
/* rule 1 */
|
||||
.class.second-class {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* rule 2 */
|
||||
.class > .second-class {
|
||||
font-size: 24px;
|
||||
}
|
||||
```
|
||||
- Even though this one contains the `>` child combinator, it doesn't affect specificity, so there is no change
|
||||
```CSS
|
||||
/* rule 1 */
|
||||
* {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* rule 2 */
|
||||
h1 {
|
||||
color: orange;
|
||||
}
|
||||
```
|
||||
- Because `*` is a general child selector and no specificity, it loses priority to the `h1` type selector
|
||||
- In the case of multiple declarations having the same specificity, the **last CSS rule declaration is evaluated and applied**
|
||||
#### Inheritance
|
||||
- Refers to certain CSS properties that, when applied to an element, are inherited by that element's descendants, even if we don't explicitly write a rule for those descendants
|
||||
- Typography based properties(`color`, `font-size`, `font-family`, etc.) are usually inherited, while most other properties are not
|
||||
- The exception to this is when directly targeting an element, it always beats inheritance
|
||||
```HTML
|
||||
<!-- index.html -->
|
||||
|
||||
<div id="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
```
|
||||
```CSS
|
||||
/* styles.css */
|
||||
|
||||
#parent {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.child {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
- Even though the `parent` element has higher specificity because of the `ID` selector, the `child` element **would be blue** because that declaration directly targets it; while the `color: red` is only inherited from the `parent`
|
||||
#### Rule Order
|
||||
- The final tie-breaker for conflicts
|
||||
- The ***last defined*** rule will be the one to take priority if there are still conflicting rules after going through the previous steps
|
||||
```CSS
|
||||
/* styles.css */
|
||||
|
||||
.alert {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: yellow;
|
||||
}
|
||||
```
|
||||
- For an element that has both the `alert` and `warning` classes, the cascade would run through the other factors and find that there is still a conflict
|
||||
- In this case, the `.warning` rule was the last to be declared, so it would be the one to win the tie-breaker
|
||||
### Adding CSS to HTML
|
||||
#### External CSS
|
||||
- The most common method that involves creating a separate file for the CSS and linking it inside of an HTML's opening and closing `<head>` tags with a self-closing `<link>` element
|
||||
```HTML
|
||||
<!-- index.html -->
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
```
|
||||
```CSS
|
||||
/* styles.css */
|
||||
|
||||
div {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
- Using the `<link>` element inside of the `<head>` tag, we can then apply the `rel` and `href` attributes
|
||||
- The `href` attribute links directly to the CSS file location
|
||||
- The `rel` attribute is required, it specifies the relationship between the HTML file and the linked file
|
||||
- In the `styles.css` file, there is both a `div` and `p` stylized with curly braces
|
||||
- This is known as a ***declaration block***
|
||||
- Then any declarations are placed within the block
|
||||
- `color: white;` and `background-color: black;` are the two declarations
|
||||
- > Note: Most times the .css file is the same name as the .html file to limit any confusion as to what the file is referring to. Also `styles.css` may be the only CSS file for the entire website and having a naming convention for it makes it easier to find
|
||||
- The benefits of this method are:
|
||||
- It keeps out HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner for debugging
|
||||
- We only need to edit the CSS in ***one place***, which scales well for when you have many pages that are share similar styles within a website
|
||||
#### Internal CSS
|
||||
- Also known as *embedded CSS*, involves adding the CSS within the HTML file itself
|
||||
- With this method, you place all of the rules inside a pair of opening and closing `<style>` tags
|
||||
- These tags go in the `<head>` tags
|
||||
- Because it's directly within the same file, the `<link>` tag is not necessary
|
||||
```HTML
|
||||
<head>
|
||||
<style>
|
||||
div {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>...</body>
|
||||
```
|
||||
- This can cause the HTML file to get big, but it is useful when you want to add unique styles to a single page of a website
|
||||
#### Inline CSS
|
||||
- This method makes it possible to add styles directly to HTML elements
|
||||
- Not recommended as you would have to apply these rules to every element if you ever wanted to change multiple
|
||||
- Terrible at scale
|
||||
```HTML
|
||||
<body>
|
||||
<div style="color: white; background-color: black;">...</div>
|
||||
</body>
|
||||
```
|
||||
- There are no selectors because it's being directly applied to the content
|
||||
- It is useful though if you want to add a *unique* style for a **single** element
|
||||
### Assignment
|
||||
1. Go to our [CSS exercises repository](https://github.com/TheOdinProject/css-exercises), read the README, and only do the exercises in the `foundations` directory in the order they’re listed, starting with `01-css-methods` and ending with `06-cascade-fix`.
|
||||
2. Remember the Recipe page you created as practice from the previous lesson? Well, it’s rather plain looking, isn’t it? Let’s fix that by adding some CSS to it!
|
||||
1. How you actually style it is completely open, but you should use the external CSS method (for this practice and moving forward). You should also try to use several of the properties mentioned in the section above (color, background color, typography properties, etc). Take some time to play around with the various properties to get a feel for what they do. For now, don’t worry at all about making it look good. This is just to practice and get used to writing CSS, not to make something to show off on your resume, so feel free to go a little crazy for now.
|
||||
2. We haven’t covered how to use a custom font for the `font-family` property yet, so for now take a look at [CSS Fonts](https://www.w3schools.com/Css/css_font.asp) for a list of generic font families to use, and [CSS Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp) for a list of fonts that are web safe. Web safe means that these are fonts that are installed on basically every computer or device (but be sure to still include a generic font family as a fallback).
|
||||
|
||||
-
|
||||
1
odin-css-exercises/css-exercises
Submodule
1
odin-css-exercises/css-exercises
Submodule
@ -0,0 +1 @@
|
||||
Subproject commit a7693f4b800af2b8d4ffbf61779f4274c4902995
|
||||
Loading…
Reference in New Issue
Block a user