ImAlpha/OdinProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

finished specificity section of CSS

Browse Source
This commit is contained in:
Jacob Delgado 2023-04-05 01:15:10 -07:00
parent 342800de2f
commit 151d7e0278
1 changed files with 295 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

296
Markdown/TheOdinProjectNotes.md
View File

@ -302,6 +302,9 @@ git remote set-url origin https://'username':'password'@repositorylink
- Used to describe the image, helps with accessability and when the image itself can't be loaded
- Ex: ` <img src="https://www.theodinproject.com/mstile-310x310.png" alt="The Odin Project Logo">`
- This loads the logo, if it can't then `The Odin Project Logo` is displayed
#### Div
- A `<div>` is a basic HTMl element that intiates an empty container
- Commonly used to pair with css styling for certain portions of the page
### Recipes
- Project to build a basic recipe website
- Will have a main index page with links to a few recipes
@ -325,4 +328,295 @@ git remote set-url origin https://'username':'password'@repositorylink
- Add two more recipes with the identical page structures to the recipe page you've already created
- Don't forget to link to the new recipes on the index page
- Consider putting all the links in an *unordered list* so they aren't all on one line.
-
## CSS Foundations
### Basic Syntax
- Uses semicolons to signify the end of a declaration
- Uses the `property:value` pair format
### Selectors
- These are the HTML elements to which CSS rules apply
#### Universal Selector
- This selects elements of any type and the syntax for it is an asterisk
- Ex: every element should be in purple
```CSS
* {
color: purple;
}
```
#### Type Selectors
- A type selector is also referred to as an **element selector**
- Selects all elements of the given element type
```HTML
<!-- index.html -->
<div>Hello, World!</div>
<div>Hello, again!</div>
<p>Hi...</p>
<div>Okay, bye.</div>
```
```CSS
/* styles.css*/
div {
color: white;
}
```
- All three `<div>` elements would be selected, while the `<p>` would be left alone
#### Class Selectors
- These will select all elements within a given class
- A class is initialized within a `<div>` tag
```HTML
<!-- index.html -->
<div class="alert-text">
Please agree to our terms of service.
</div>
```
```CSS
/* styles.css*/
.alert-text{
color: red;
}
```
- The syntax for class selectors uses a **period** before the ***case-sensitive value*** of the class attribute
- Classes can be used multiple times if you want to have them in different areas of the webpage, but with the same styling
- multiple classes can be initialized with a space instead of a comma
- Ex: `class="alert-text severe-alert"` initializes both the `alert-text` and the `severe-alert` class
#### ID Selectors
- Similar to class selectors, select an element with the given ID instead of the class
```HTML
<!-- index.html -->
<div id="title">My Awesome 90's Page</div>
```
```CSS
/* styles.css*/
#title{
background-color: red;
}
```
- instead of a period, they use the **hastag** immediately followed the ***case-sensitive value*** of the ID attribute
- ID's should be used sparingly and good use cases for them are:
- changing something specific within a page
- links that redirect to a section on the current page
- Major difference between classes and IDs is that an element can only have **one ID**
- The ID cannot be repeated on a single page, so they are unique per html page
- The ID should not contain any whitespace at all
#### Grouping Selector
- If two groups share some of their stylings, then you can cut down on the amount of repetittion
```CSS
.read {
color: white;
background-color: black;
/* several unique declarations */
}
.unread {
color: white;
background-color: black;
/* several unique declarations */
}
```
- Both `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, we can **group them with a comma** to have only the unique declarations be separate
```CSS
.read,
.unread {
color: white;
background-color: black;
}
.read {
/* several unique declarations */
}
.unread {
/* several unique declarations */
}
```
- The advantage to grouping would be that if we want to ever change the `color` or `background-color`, then we can quickly change them within the single selector for the entire page
#### Chaining Selectors
- Another way to use selectors is to chain them as a list without any separation
- Ex: HTML `<div>` and `<p>` with the `subsection` class
```HTML
<div>
<div class="subsection header">Latest Posts</div>
<p class="subsection preview">This is where a preview for a post might go.</p>
</div>
```
- In order to only change the class with both `subsection` and `header`, then we chain the selectors
```CSS
.subsection.header{
color:red;
}
```
- `subsection.header` selects any element that has both the `subsection` ***and*** `header` classes.
- Works for all combinations of selectors except for [Type Selectors](#type-selectors)
- Can also be used to chain a class and an ID
```HTML
<div>
<div class="subsection header">Latest Posts</div>
<p class="subsection" id="preview">This is where a preview for a post might go.</p>
</div>
```
```CSS
.subsection.header {
color: red;
}
.subsection#preview {
color: blue;
}
```
- Notice how a class is chained to an ID by using their respective syntax of `.class#ID`
- Note: Does not work for chaining more than one type of selector
- It is also dependent on the type of element
- Ex: `<div>` can't be chained to `<p>` because it would create `<divp>` and it doesn't exist as an element
#### Descendant Combinator
- Allows for combining multiple selectors differently than either grouping or chaining them
- Shows the relationship between the selectors
- Four types of combinators
- The **descendant combinator** is represented in CSS by a single space between selectors
- Will only cause elements that ***match the last selector to be selected if they also have an ancestor***(parent, grandparent, etc) that matches the previous selector
- Ex: `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`, no matter how deep
```HTML
<!-- index.html -->
<div class="ancestor"> <!-- A -->
<div class="contents"> <!-- B -->
<div class="contents"> <!-- C -->
</div>
</div>
</div>
<div class="contents"></div> <!-- D -->
```
```CSS
/* styles.css */
.ancestor .contents {
/* some declarations */
}
```
- In this example only **B and C** will be selected because they are part of the `ancestor` class
- D is off on its own without the `ancestor` parent <div>
- There is no limit to the amount of combinators that could be used
- `.one .two .three .four` would be **valid**, but would only select the elements that contain the class `four` if it has an ancestor of `three` and if that has an ancestor of `two` and continues if it is all within the ancestor of `one`
#### Properties to Get Started With
- Color and Background-Color
- The `color` property sets an element's text color, while `background-color` sets the background color of an element
- Both properties can accept one of several kinds of values, here is a link for all [legal values](https://www.w3schools.com/cssref/css_colors_legal.php)
- Common value is a **keyword** such as an actual color name like `blue` or `transparent`
- Also accepts **Hex, RGB, and HSL** values like `#4f4f4f`
```CSS
p {
/* hex example: */
color: #1100ff;
/* rgb example: */
color: rgb(100, 0, 127);
/* hsl example: */
color: hsl(15, 82%, 56%);
}
```
#### Typography Basics and Text-Align
- `font-family` can be a single value or a comma-separated list of values that determine what fron an element uses
- A font name like `"DejaVu Sans"`(quotes are used for the whitespace between the words) or a generic font like `sans-serif`
- Browsers will go through the font list until it finds one that it can display and has access to
- Ex: `font-family: "DejaVu Sans", sans-serif;`
- The browser will attempt to display `"DejaVu Sans"`, if not found then it will fallback to `sans-serif`
- `font-size` will change the size and is denoted by a "px" value
- Ex: `font-size: 22px`
- `font-weight` affects the boldness of text, can be used with either the word "bold" or a numeric value for how bold it should be
- EX: `font-weight: bold` or `font-weight: 700`
- Numeric values **stay between 100 - 900**
- `text-align` will align text horizontally within an element
- Ex: `text-align: center`
#### Image Height and Width
- Images and videos can have their display adjusted
- By default, an `<img>` element's `height` and `width` values will be the same as the source image
- In order to keep the same aspect ratio a value of `auto` is used for the `height`, with a numeric `width` value to match
```CSS
img {
height: auto;
width: 500px;
}
```
- In this example if we had an image of **500px height** and **1000px width**, it would be readjusted to a height of **250px**
- Both elements should be included even if you are not changing them from the default values.
- If not included ***the image will take longer to load than the rest of the page*** contents and it will cause a sudden drastic shift in the page when it readjusts to the image
- By stating `height` and `width`, we can have the page reserve the area for the image with the rest of the page
#### The Cascade of CSS
- The cascade labels are what dictate how our page looks
- Browsers have default views for buttons and links, etc. and can vary from each browser
#### Specificity
- A CSS declaration that is more specific will take priority over less specific ones.
- Inline styles, have the highest specificity and therefore priority compared to selectors
- each selector has their own specificity hierarchy as well
- ID Selectors (most specific selector)
- Class Selectors
- Type Selectors(least specific)
- Specificity will only be taken into account when an element has multiple, conflicting declarations targeting it, like a tie-breaker
- When no declaration has a selector with a higher specificity, a larger amount of single selector will beat a smaller amount of that same selector
```HTML
<!-- index.html -->
<div class="main">
<div class="list subsection"></div>
</div>
```
```CSS
/* rule 1 */
.subsection {
color: blue;
}
/* rule 2 */
.main .list {
color: red;
}
```
- In the example above, both rules are using only class selectors, but rule 2 is more specific because it is using more class selectors, so the `color: red;` declaration would take priority
- Ex2:
```HTML
<!-- index.html -->
<div class="main">
<div class="list" id="subsection"></div>
</div>
```
```CSS
/* rule 1 */
#subsection {
color: blue;
}
/* rule 2 */
.main .list {
color: red;
}
```
- In the example above, the div would be *blue* because the `ID` takes priority
```HTML
<!-- index.html -->
<div class="main">
<div class="list">
<div id="subsection"></div>
</div>
</div>
```
```CSS
/* rule 1 */
.list #subsection {
background-color: yellow;
color: blue;
}
/* rule 2 */
.main .list #subsection {
color: red;
}
```
- 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(`*`)