Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Intro to CSS lesson: Fix markdown styling #27151

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions foundations/html_css/css-foundations/intro-to-css.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
### Introduction

In the previous lesson, you learned how to write the HTML that determines how a web page is structured. The next step is to make that structure look good with some _style_, which is exactly what CSS is for. In the next few lessons, we're going to focus on what we believe are some foundational CSS concepts, things that everyone should know from the beginning — whether they are just starting out or need a refresher.
In the previous lesson, you learned how to write the HTML that determines how a web page is structured. The next step is to make that structure look good with some *style*, which is exactly what CSS is for. In the next few lessons, we're going to focus on what we believe are some foundational CSS concepts, things that everyone should know from the beginning — whether they are just starting out or need a refresher.

### Lesson overview

Expand All @@ -19,7 +19,7 @@ At the most basic level, CSS is made up of various rules. These rules are made u
<div class="lesson-note" markdown="1">

#### Note

A `<div>` is one of the basic HTML elements. It is an empty container. In general, it is best to use other tags such as `<h1>` or `<p>` for content in your projects, but as we learn more about CSS you'll find that there are many cases where the thing you need is just a container for other elements. Many of our exercises use plain`<div>`s for simplicity. Later lessons will go into much more depth about when it is appropriate to use the various HTML elements.

</div>
Expand Down Expand Up @@ -160,7 +160,7 @@ We have two elements with the `subsection` class that have some sort of unique s
}
```

What `.subsection.header` does is it selects any element that has both the `subsection` _and_ `header` classes. Notice how there isn't any space between the `.subsection` and `.header` class selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one [type selector](#type-selectors).
What `.subsection.header` does is it selects any element that has both the `subsection` *and* `header` classes. Notice how there isn't any space between the `.subsection` and `.header` class selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one [type selector](#type-selectors).

This can also be used to chain a class and an ID, as shown below:

Expand Down Expand Up @@ -280,7 +280,7 @@ These properties work in conjunction with the height and width attributes in the

### Adding CSS to HTML

Now that we've learned some basic syntax, you might be wondering _how_ to add all this CSS to our HTML. There are three methods to do so.
Now that we've learned some basic syntax, you might be wondering *how* to add all this CSS to our HTML. There are three methods to do so.

#### External CSS

Expand Down Expand Up @@ -316,7 +316,7 @@ A note on file names: `styles.css` is just what we went with as the file name he
A couple of the pros to this method are:

1. It keeps our HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
2. We only need to edit the CSS in _one_ place, which is especially handy for websites with many pages that all share similar styles.
1. We only need to edit the CSS in *one* place, which is especially handy for websites with many pages that all share similar styles.

#### Internal CSS

Expand All @@ -342,7 +342,7 @@ Besides these differences, the syntax is exactly the same as the external method
</body>
```

This method can be useful for adding unique styles to a _single page_ of a website, but it doesn't keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
This method can be useful for adding unique styles to a *single page* of a website, but it doesn't keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.

#### Inline CSS

Expand All @@ -356,24 +356,26 @@ Inline CSS makes it possible to add styles directly to HTML elements, though thi

The first thing to note is that we don't actually use any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, we have the `style=` attribute, with its value within the pair of quotation marks being the declarations.

If you need to add a _unique_ style for a _single_ element, this method can work just fine. Generally, though, this isn't exactly a recommended way for adding CSS to HTML for a few reasons:
If you need to add a *unique* style for a *single* element, this method can work just fine. Generally, though, this isn't exactly a recommended way for adding CSS to HTML for a few reasons:

- It can quickly become pretty messy once you start adding a _lot_ of declarations to a single element, causing your HTML file to become unnecessarily bloated.
- It can quickly become pretty messy once you start adding a *lot* of declarations to a single element, causing your HTML file to become unnecessarily bloated.
- If you want many elements to have the same style, you would have to copy and paste the same style to each individual element, causing lots of unnecessary repetition and more bloat.
- Any inline CSS will override the other two methods, which can cause unexpected results. (While we won't dive into it here, this can actually be taken advantage of.)

### Assignment

<div class="lesson-content__panel" markdown="1">

1. Go to our [CSS exercises repository](https://github.com/TheOdinProject/css-exercises) and read the README. Then, once you know how to use the exercises, navigate to the `foundations` directory. Review each README file prior to completing the following exercises in order:
1. Go to our [CSS exercises repository](https://github.com/TheOdinProject/css-exercises) and read the README. Then, once you know how to use the exercises, navigate to the `foundations` directory. Review each README file prior to completing the following exercises in order:

- `01-css-methods`
- `02-class-id-selectors`
- `03-group-selectors`
- `04-chain-selectors`
- `05-descendant-combinator`

Note: Solutions for these exercises can be found in the `solution` folder of each exercise.

</div>

### Knowledge check
Expand Down