diff --git a/Markdown/TheOdinProjectNotes.md b/Markdown/TheOdinProjectNotes.md index 8826520..f5e3d5d 100644 --- a/Markdown/TheOdinProjectNotes.md +++ b/Markdown/TheOdinProjectNotes.md @@ -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: ` The Odin Project Logo` - This loads the logo, if it can't then `The Odin Project Logo` is displayed +#### Div +- A `
` 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. -- \ No newline at end of file +## 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 + + +
Hello, World!
+
Hello, again!
+

Hi...

+
Okay, bye.
+``` +```CSS +/* styles.css*/ + +div { + color: white; +} +``` +- All three `
` elements would be selected, while the `

` would be left alone +#### Class Selectors +- These will select all elements within a given class +- A class is initialized within a `

` tag +```HTML + + +
+ Please agree to our terms of service. +
+``` +```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 + + +
My Awesome 90's Page
+``` +```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 `
` and `

` with the `subsection` class +```HTML +

+
Latest Posts
+

This is where a preview for a post might go.

+
+``` +- 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 +
+
Latest Posts
+

This is where a preview for a post might go.

+
+``` +```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: `
` can't be chained to `

` because it would create `` 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 + + +

+
+
+
+
+
+ +
+``` +```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
+- 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 `` 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 + + +
+
+
+``` +```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 + + +
+
+
+``` +```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 + + +
+
+
+
+
+``` +```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(`*`) \ No newline at end of file