770 lines
31 KiB
Markdown
770 lines
31 KiB
Markdown
# The Odin Project
|
||
## How to ask good programming questions
|
||
- Be very specific and patient
|
||
- use screenshots when available
|
||
- ask questions directly instead of asking to ask ie. "are there any java experts around?"
|
||
|
||
## Git
|
||
### Set up Git
|
||
- Set username and email
|
||
```
|
||
git config --global user.name "username"
|
||
git config --global user.email "email"
|
||
```
|
||
- If using GitHub, change branch from 'master' to 'main'
|
||
```
|
||
git config --global init.defaultBranch main
|
||
```
|
||
- Enable colorful output with git
|
||
```
|
||
git config --global color.ui auto
|
||
```
|
||
- Set default branch reconciliation behavior to merging
|
||
```
|
||
git config --global pull.rebase false
|
||
```
|
||
- Verify the config
|
||
```
|
||
git config --get user.name
|
||
git config --get user.email
|
||
```
|
||
### Create an SSH Key for repos
|
||
- SSH keys are good for avoiding retyping credentials every time
|
||
- Check to see if there is an existing ssh key
|
||
```
|
||
ls ~/.ssh/id_ed25519.pub
|
||
```
|
||
- if nothing appears, then there is no key and one needs to be made
|
||
- Create ssh key
|
||
```
|
||
ssh-keygen -t ed25519 -C <youremail>
|
||
```
|
||
- press enter when asked for what location to store it unless you have a specific location
|
||
- add a passphrase and retype it
|
||
### Link SSH key to Git
|
||
- Find the ssh key input on GitHub or repository website of your choice
|
||
- Click on new ssh key and give it a name and leave the window open for the next steps
|
||
- Copy the public SSH key
|
||
```
|
||
cat ~/.ssh/id_ed25519.pub
|
||
```
|
||
- Paste the key into your settings, it should start with ```ssh-ed25519``` and end with your email
|
||
### Change git repository remote
|
||
```
|
||
git remote set-url origin https://'username':'password'@repositorylink
|
||
```
|
||
### Using Git
|
||
- Check git version by using `git --version`
|
||
- After creating a new repository you can clone it to your current directory by using ``` git clone <repolink>```
|
||
- After the cloning, check the url with ```git remote -v```
|
||
- Use ```git status``` to check the status of the current files within your directory
|
||
- To commit to the repo you can use ```git commit -m "Add helloworld.txt"```
|
||
- Confirm with ```git status```
|
||
- You can use ```git log``` to view the most recent commits
|
||
- After creating a file you can use ```git add <filename>``` to add that specific file or ```git add .``` to add all files within the directory that are not on the repo
|
||
- We can push the changes to the cloud repository with ```git push origin main```, origin being the remote location and *main* being the branch to upload to
|
||
- Make sure to only push working code
|
||
#### Git Best Practices
|
||
- Atomic commits
|
||
- A commit that includes changes related to only one feature or task of your program.
|
||
- Easily reversible if the commit causes breaking changes
|
||
- Enables you to write more specific commit messages
|
||
#### Changing the Git Commit Message Editor
|
||
- Typing ```git config --global core.editor "code --wait"``` into the terminal will give you the option to use either ```git commit -m <your message here>``` or ```git commit``` without anything extra.
|
||
#### When to Commit
|
||
- These are best made when you think is a good time to take a **snapshot** of your current project
|
||
- Never commit code that isn't working to the main branch if it was working before
|
||
- It is considered best practice to commit every time you have a meaningful change in the code
|
||
- Creates a trail to show how you got to the current iteration of the code
|
||
- Useful for when looking back to when the project feature was working to compare what you've changed
|
||
|
||
## HTML And CSS Introduction
|
||
- What is HTML?
|
||
- Stands for **Hypertext Markup Language**
|
||
- It's the raw data that a webpage is built out of. Includes:
|
||
- text
|
||
- links
|
||
- cards
|
||
- lists
|
||
- buttons
|
||
- What is CSS?
|
||
- Stands for **Cascading Style Sheets**
|
||
- It's the styling of the HTML page
|
||
- Controls colors
|
||
- Controls Positioning of text and font
|
||
- HTML and CSS are ***not*** programming languages, technically speaking because they only present information and are not used to compute any logic
|
||
- JavaScript would be a programming language that leverages both HTML and CSS
|
||
### [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and Tags
|
||
- HTML defines the structure and content of webpages.
|
||
- HTML elements are used to create:
|
||
- paragraphs
|
||
- headings
|
||
- lists
|
||
- images
|
||
- links
|
||
- Elements are simply pieces of content wrapped in opening and closing tags
|
||
- Another way to define them is *containers for content*
|
||
- Paragraph is `<p> </p>`
|
||
- Some tags do not require a closing tag
|
||
- line break is `<br>` or `<br />`
|
||
- image insert would be `<img />` or `<img>`
|
||
- There many tags, looking at documentation for most of them is standard [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
|
||
- [Intro to HTML Video 3:42](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&ab_channel=KevinPowell)
|
||
### HTML Boilerplate
|
||
- All HTML docs have the same basic structure that needs to be in place before anything useful can be done.
|
||
- [index.html](/OdinProject/html-boilerplate/index.html)
|
||
#### The DOCTYPE
|
||
- Every HTML page starts with a doctype declaration
|
||
- The purpose of it is to tell the browser what version of HTML it should use to render the document(current being HTML5)
|
||
- HTML5 Doctype is `<!DOCTYPE html>`
|
||
- The doctypes for older version of HTML were more complicated
|
||
- Example of doctype for HTML4
|
||
```
|
||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||
```
|
||
#### HTML Element
|
||
- Now we need to provide an `<html>` element. More commonly known as the *root element* of the document
|
||
- root means that every other element in the document will be a descendant of that one
|
||
- The `lang` attribute specifies the language of the text content in that element
|
||
- primarily used for improving accessibility of the webpage
|
||
- `en` is used for English
|
||
- The `<head>` element is where important meta-information about our webpages and items required for our webpages to render correctly in the browser
|
||
- inside of the `<head>` element, there should not be any element that displays content on the webpage
|
||
#### The Charset Meta Element
|
||
- The meta tag for the charset encoding of the webpage in the head element: `<meta charset="utf-8">`
|
||
- The encoding ensures that the webpage will display special symbols and characters from different languages correctly in the browser
|
||
#### Title Element
|
||
- Should go in the head of an HTML doc `<title>My First Webpage</title>`
|
||
- It's used to give webpages a human-readable title which is displayed in our webpages' browser tab
|
||
- The default title for a webpage is it's filename, in this case `index.html`
|
||
- This is a security risk as you wouldn't want the internet to know what any of your files are named or how they are placed within the project directory
|
||
- Also would make it difficult for the end user to remember what tab it is if they have multiple open
|
||
```HTML
|
||
<!DOCTYPE>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>My First Webpage</title>
|
||
</head>
|
||
</html>
|
||
```
|
||
#### Body Element
|
||
- All content will be displayed to users inside of this tag
|
||
```HTML
|
||
<!DOCTYPE>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>My First Webpage</title>
|
||
</head>
|
||
|
||
<body>
|
||
</body>
|
||
</html>
|
||
```
|
||
#### Viewing HTML Files in the Browser
|
||
- You can drag and drop an HTML file into the browser and it will open up the page
|
||
- You can also use a preview extension that will open a browser window
|
||
- In Ubuntu you can use the command `google-chrome index.html` to open it as well
|
||
- Using `<h1>` for the heading can render out a title on the page
|
||
```HTML
|
||
<!DOCTYPE>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>My First Webpage</title>
|
||
</head>
|
||
|
||
<body>
|
||
<h1>Hello World!</h1>
|
||
</body>
|
||
</html>
|
||
```
|
||
- **VSCode can generate the entire boilerplate by entering `!` into a blank `.html` document**
|
||
### Working With Text
|
||
#### Paragraphs
|
||
- If text is not preceded by a `<p>`, then it will all clump together as one large body of text
|
||
- 
|
||
- 
|
||
#### Headings
|
||
- These use the `<hx>` tag where `x` is the number that changes the font
|
||
- `<h6>` is the smallest font
|
||
- 
|
||
#### Strong Element
|
||
- The `<strong>` tag makes text **bold**
|
||
- It also marks text as important semantically
|
||
- This affects tools like screen readers for visual impairments
|
||
- It will change the tone of the voice for the content within the `<strong>` tag
|
||
```HTML
|
||
<strong>Showing bolded wording</strong>
|
||
```
|
||
- 
|
||
#### Em Element
|
||
- The `<em>` tag makes text italic and also emphasises in text to speech
|
||
- 
|
||
#### Nesting and Indentation
|
||
- Elements are nested for legibility
|
||
- Also known as parent/child/sibling elements
|
||
- Similar to braces for code
|
||
```HTML
|
||
<html>
|
||
<head>
|
||
</head>
|
||
<body>
|
||
<p>Lorem ipsum dolor sit amet.</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
- 
|
||
#### HTML Comments
|
||
- Comments are not visible when the page is rendered
|
||
- Useful for reading page format when performing maintenance
|
||
- Comments are written with `<!-- -->`, where the comment is inside the whitespace
|
||
```HTML
|
||
<h1> View the html to see the hidden comments </h1>
|
||
|
||
<!-- I am a html comment -->
|
||
|
||
<p>Some paragraph text</p>
|
||
|
||
<!-- I am another html comment -->
|
||
```
|
||
- 
|
||
### Lists
|
||
- Lists are one of the most commonly usedd elements/data structures because they neatly organize many items
|
||
#### Unordered Lists
|
||
- The order is random or irrelevant, then using an unordered list is the right choice
|
||
- It's created by using the `<ul>` tag, with each element inside of the list using the `<li>` tag
|
||
```HTML
|
||
<ul>
|
||
<li>Item 1</li>
|
||
<li>Item 2</li>
|
||
<li>Item 3</li>
|
||
</ul>
|
||
```
|
||
- 
|
||
#### Ordered Lists
|
||
- Useful when the order of the list matters
|
||
- It's created by using the `<ol>` tag instead with the same `<li>` elements inside of it
|
||
```HTML
|
||
<ol>
|
||
<li>Item 1</li>
|
||
<li>Item 2</li>
|
||
<li>Item 3</li>
|
||
</ol>
|
||
```
|
||
- 
|
||
### Links and Images
|
||
- Links allow for the chaining of other HTML pages on the web
|
||
- Create an `index.html` file and use it so link other pages within the [odin-links-and-images](/OdinProject/odin-links-and-images/index.html) directory
|
||
#### Anchor Elements
|
||
- The anchor element is denoted by the `<a>` tag
|
||
- It creates a link with a separate page and routes towards it
|
||
- Requires an HTML attribute in order to complete the link
|
||
- This link is known as a reference, `<a href="https://www.theodinproject.com/about">click me</a>`
|
||
- the `href` attribute is what highlights text in blue to show that it is linked to an address
|
||
- Links work for anything that has a web address, this includes:
|
||
- photos
|
||
- documents
|
||
- pdfs
|
||
- html pages
|
||
- videos
|
||
#### Absolute and Relative Links
|
||
- Most links are one of two things:
|
||
- Links to pages on other websites
|
||
- Links to pages on our own website
|
||
- Absolute Links
|
||
- Links to pages on other websites, in order to link you need the full address of the destination
|
||
- Example: `protocol://domain/path`, `www.https://youtube.com/home`
|
||
- Relative Links
|
||
- Links to other pages within our own website, or internal links
|
||
- These links do not include the domain name since it is within the same domain
|
||
- Relative links consist of the **file path** instead of the web address
|
||
- Links are created the same whether absolute or relative, the `href` tag is what controls the anchor binding
|
||
- Proper file management recommends to have a separate directory for `pages` within the project
|
||
- The proper way to direct an anchor to a subdirectory is by using `./` in the path
|
||
- This tells the anchor to start looking for the **file/directory relative to the `current` directory of where the `index.html` is located**
|
||
#### A Metaphor
|
||
- The domain name `town.com` is a city
|
||
- The directory where the website is located would be similar to a museum `/museum`
|
||
- Each page on your website could be considered a room, in this case a room within the museum `/museum/movie_room.html` or `/museum/coffee_shop.html`
|
||
- Relative links like `./shop/coffee_shop.html` are directions from the current room (movie_room)
|
||
- Absolute link would be the full directions to the room from entering the town
|
||
- Ex: `https://town.com/museum/shops/coffee_shop.html`
|
||
#### Images
|
||
- HTML uses the `<img>` tag in order to embedd images into the page, does not require a closing tag
|
||
- These images can be added with Absolute or relative links Ex: `<img src="https://www.theodinproject.com/mstile-310x310.png">`
|
||
- 
|
||
#### Parent Directories
|
||
- In order to navigate to the parent directory when linking, you should use `../` relative to the current directory
|
||
#### Alt attribute
|
||
- images also have an alt attribute
|
||
- 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
|
||
#### Assignment
|
||
- Iteration 1: Initial Structure
|
||
- Within the `odin-recipes` directory, create an `index.html` file
|
||
- Fill it out with the usual boilerplate HTML and add an `h1` heading "Odin Recipes" to the body
|
||
- Iteration 2: Recipe Page
|
||
- Create a new directory within the `odin-recipes` directory and name it `recipes`
|
||
- Create a new HTML file within the `recipes` directory and name it after the recipe it will contain.
|
||
- Ie. `lasagna.html`
|
||
- Include an `h1` heading with the recipe's name as its content
|
||
- Back in the `index.html` file, add a link to the recipe page you just created
|
||
- Use an anchor
|
||
- Iteration 3: Recipe Page Content
|
||
- An Image of the finished dish under the `h1` heading
|
||
- Under the image, it should have an appropriately sized "Description" heading followed by a paragraph or two describing the recipe
|
||
- Under the description, add an "Ingredients" heading followed by an **unordered list** of the ingredients needed for the recipe.
|
||
- Finally, under the ingredients list, add a "Steps" heading followed by an **ordered list** of the steps needed for making the dish
|
||
- Iteration 4: Add More Recipes
|
||
- 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(`*`) 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).
|
||
|