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

Formatting corrections #34365

Merged
merged 9 commits into from
Jun 25, 2024
16 changes: 4 additions & 12 deletions files/en-us/learn/css/first_steps/getting_started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,9 @@ In this article, we will take a simple HTML document and apply CSS to it, learni
<tr>
<th scope="row">Prerequisites:</th>
<td>
<a
href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
>Basic software installed</a
>, basic knowledge of
<a
href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"
>working with files</a
>, and HTML basics (study
<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"
>Introduction to HTML</a
>.)
<a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Basic software installed</a>, basic knowledge of
<a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, and HTML basics (study
<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.)
</td>
</tr>
<tr>
Expand Down Expand Up @@ -243,7 +235,7 @@ In the live example below, you can play with different values for the various st

We have removed the underline on our link on hover. You could remove the underline from all states of a link. It is worth remembering however that in a real site, you want to ensure that visitors know that a link is a link. Leaving the underline in place can be an important clue for people to realize that some text inside a paragraph can be clicked on — this is the behavior they are used to. As with everything in CSS, there is the potential to make the document less accessible with your changes — we will aim to highlight potential pitfalls in appropriate places.

> **Note:** you will often see mention of [accessibility](/en-US/docs/Learn/Accessibility) in these lessons and across MDN. When we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone.
> **Note:** You will often see mention of [accessibility](/en-US/docs/Learn/Accessibility) in these lessons and across MDN. When we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone.
>
> Your visitor may well be on a computer with a mouse or trackpad, or a phone with a touchscreen. Or they might be using a screen reader, which reads out the content of the document, or they may need to use much larger text, or be navigating the site using the keyboard only.
>
Expand Down
46 changes: 19 additions & 27 deletions files/en-us/learn/css/first_steps/how_css_is_structured/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,9 @@ Now that you are beginning to understand the purpose and use of CSS, let's exami
<tr>
<th scope="row">Prerequisites:</th>
<td>
<a
href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
>Basic software installed</a
>, basic knowledge of
<a
href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"
>working with files</a
> and HTML basics (study
<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"
>Introduction to HTML</a
>).
<a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Basic software installed</a>, basic knowledge of
<a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a> and HTML basics (study
<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>).
</td>
</tr>
<tr>
Expand Down Expand Up @@ -267,13 +259,13 @@ Setting CSS properties to specific values is the primary way of defining layout

CSS properties and values are case-insensitive. The property and value in a property-value pair are separated by a colon (`:`).

**Look up different values of properties listed below. Write CSS rules that apply styling to different HTML elements:**
Look up different values of properties listed below. Write CSS rules that apply styling to different HTML elements:

- **{{cssxref("font-size")}}**
- **{{cssxref("width")}}**
- **{{cssxref("background-color")}}**
- **{{cssxref("color")}}**
- **{{cssxref("border")}}**
- {{cssxref("font-size")}}
- {{cssxref("width")}}
- {{cssxref("background-color")}}
- {{cssxref("color")}}
- {{cssxref("border")}}

> **Warning:** If a property is unknown, or if a value is not valid for a given property, the declaration is processed as _invalid_. It is completely ignored by the browser's CSS engine.

Expand Down Expand Up @@ -332,11 +324,11 @@ The output from the above code looks like this:

{{EmbedLiveSample('Transform_functions', '100%', 200)}}

**Look up different values of properties listed below. Write CSS rules that apply styling to different HTML elements:**
Look up different values of properties listed below. Write CSS rules that apply styling to different HTML elements:

- **{{cssxref("transform")}}**
- **{{cssxref("background-image")}}, in particular gradient values**
- **{{cssxref("color")}}, in particular rgb and hsl values**
- {{cssxref("transform")}}
- {{cssxref("background-image")}}, in particular gradient values
- {{cssxref("color")}}, in particular rgb and hsl values

## @rules

Expand Down Expand Up @@ -364,11 +356,11 @@ body {

You will encounter other @rules throughout these tutorials.

**See if you can add a media query that changes styles based on the viewport width. Change the width of your browser window to see the result.**
See if you can add a media query that changes styles based on the viewport width. Change the width of your browser window to see the result.

## Shorthands

Some properties like {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("margin")}} are called **shorthand properties.** This is because shorthand properties set several values in a single line.
Some properties like {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("margin")}} are called **shorthand properties**. This is because shorthand properties set several values in a single line.

For example, this one line of code:

Expand Down Expand Up @@ -407,7 +399,7 @@ background-attachment: fixed;

Later in the course, you will encounter many other examples of shorthand properties. MDN's [CSS reference](/en-US/docs/Web/CSS/Reference) is a good resource for more information about any shorthand property.

**Try using the declarations (above) in your own CSS exercise to become more familiar with how it works. You can also experiment with different values.**
Try using the declarations (above) in your own CSS exercise to become more familiar with how it works. You can also experiment with different values.

> **Warning:** One less obvious aspect of using CSS shorthand is how omitted values reset. A value not specified in CSS shorthand reverts to its initial value. This means an omission in CSS shorthand can **override previously set values**.

Expand All @@ -419,7 +411,7 @@ CSS comments begin with `/*` and end with `*/`. In the example below, comments m

```css
/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
/* ---------------------------- */
body {
font:
1em/150% Helvetica,
Expand Down Expand Up @@ -471,7 +463,7 @@ p {
}
```

**Add comments to your CSS.**
Try adding comments in your CSS.

## White space

Expand Down Expand Up @@ -551,7 +543,7 @@ Do you see the spacing errors? First, `0auto` is not recognized as a valid value

You should always make sure to separate distinct values from one another by at least one space. Keep property names and property values together as single unbroken strings.

**To find out how spacing can break CSS, try playing with spacing inside your test CSS.**
To find out how spacing can break CSS, try playing with spacing inside your test CSS.

## Summary

Expand Down
14 changes: 3 additions & 11 deletions files/en-us/learn/css/first_steps/how_css_works/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,9 @@ We have learned the basics of CSS, what it is for and how to write simple styles
<tr>
<th scope="row">Prerequisites:</th>
<td>
<a
href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
>Basic software installed</a
>, basic knowledge of
<a
href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"
>working with files</a
>, and HTML basics (study
<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"
>Introduction to HTML</a
>.)
<a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Basic software installed</a>, basic knowledge of
<a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, and HTML basics (study
<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.)
</td>
</tr>
<tr>
Expand Down