624 lines
25 KiB
Markdown
624 lines
25 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
|
|
|
|
- |