diff --git a/files/en-us/learn/css/first_steps/getting_started/index.md b/files/en-us/learn/css/first_steps/getting_started/index.md index 2be3e2659a7cac1..966137b95bf40df 100644 --- a/files/en-us/learn/css/first_steps/getting_started/index.md +++ b/files/en-us/learn/css/first_steps/getting_started/index.md @@ -13,17 +13,9 @@ In this article, we will take a simple HTML document and apply CSS to it, learni Prerequisites: - Basic software installed, basic knowledge of - working with files, and HTML basics (study - Introduction to HTML.) + Basic software installed, basic knowledge of + working with files, and HTML basics (study + Introduction to HTML.) @@ -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. > diff --git a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md index 56103eda4ba5cae..64ad92f878afe6c 100644 --- a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md @@ -13,17 +13,9 @@ Now that you are beginning to understand the purpose and use of CSS, let's exami Prerequisites: - Basic software installed, basic knowledge of - working with files and HTML basics (study - Introduction to HTML). + Basic software installed, basic knowledge of + working with files and HTML basics (study + Introduction to HTML). @@ -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. @@ -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 @@ -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: @@ -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**. @@ -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, @@ -471,7 +463,7 @@ p { } ``` -**Add comments to your CSS.** +Try adding comments in your CSS. ## White space @@ -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 diff --git a/files/en-us/learn/css/first_steps/how_css_works/index.md b/files/en-us/learn/css/first_steps/how_css_works/index.md index a7c0a0f688b651b..ba774d84e12f79f 100644 --- a/files/en-us/learn/css/first_steps/how_css_works/index.md +++ b/files/en-us/learn/css/first_steps/how_css_works/index.md @@ -14,17 +14,9 @@ We have learned the basics of CSS, what it is for and how to write simple styles Prerequisites: - Basic software installed, basic knowledge of - working with files, and HTML basics (study - Introduction to HTML.) + Basic software installed, basic knowledge of + working with files, and HTML basics (study + Introduction to HTML.)