Skip to content

Commit

Permalink
chore(css): Move CSS examples - Learn CSS, How To, Flexbox basics (#3…
Browse files Browse the repository at this point in the history 
…6661)

* chore(css): Move CSS examples - Getting started with CSS

* chore(css): Move CSS examples - How CSS is structured

* chore(css): Move CSS examples - Styling a biography page

* chore(css): Move CSS examples - How to add a shadow to an element

* chore(css): Move CSS examples - How to add a shadow to text

* chore(css): Move CSS examples - How to center an item

* chore(css): Move CSS examples - How to fill a box with an image without distorting it

* chore(css): Move CSS examples - How to highlight the first line of a paragraph

* chore(css): Move CSS examples - How to highlight the first paragraph

* chore(css): Move CSS examples - How to highlight a paragraph that comes after a heading

* chore(css): Move CSS examples - How to make a box semi-transparent

* chore(css): Move CSS examples - How to fade a button on hover

* chore(css): Move CSS examples - Basic concepts of flexbox

* chore(css): Move CSS examples - Controlling ratios of flex items along the main axis
  • Loading branch information
@bsmth
bsmth authored Nov 6, 2024
1 parent caff4a6 commit 4059070
Show file tree
Hide file tree
Showing 14 changed files with 907 additions and 64 deletions.
99 changes: 91 additions & 8 deletions files/en-us/learn/css/first_steps/getting_started/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Our starting point is an HTML document. You can copy the code from below if you
```

> [!NOTE]
> If you are reading this on a device or an environment where you can't easily create files, then don't worry — live code editors are provided below to allow you to write example code right here in the page.
> If you are reading this on a device or an environment where you can't easily create files, then don't worry — the live examples below have a "Play" button that allows you to edit the CSS & HTML code in the MDN Playground and see the combined results live.
## Adding CSS to our document

Expand Down Expand Up @@ -108,13 +108,38 @@ li {
}
```

Try this out in the interactive editor below (edit the code boxes) or in your local CSS document.
Try this out in the example below (click "Play") or in your local copy:

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}}
```html live-sample___started1
<h1>I am a level one heading</h1>

<p>
This is a paragraph of text. In the text is a <span>span element</span> and
also a <a href="http://example.com">link</a>.
</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>
```

```css live-sample___started1
h1 {
}

p {
}
```

{{EmbedLiveSample("started1", "", "240px")}}

## Changing the default behavior of elements

When we look at a well-marked up HTML document, even something as simple as our example, we can see how the browser is making the HTML readable by adding some default styling. Headings are large and bold and our list has bullets. This happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch. All modern browsers display HTML content by default in pretty much the same way.
When we look at a well-marked up HTML document, we can see how the browser is making the HTML readable by adding some default styling. Headings are large and bold and our list has bullets. This happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch. All modern browsers display HTML content by default in pretty much the same way.

However, you will often want something other than the choice the browser has made. This can be done by choosing the HTML element that you want to change and using a CSS rule to change the way it looks. A good example is `<ul>`, an unordered list. It has list bullets. If you don't want those bullets, you can remove them like so:

Expand Down Expand Up @@ -155,7 +180,7 @@ So far, we have styled elements based on their HTML element names. This works as

3. Save and refresh to see what the result is.

You can apply the class of `special` to any element on your page that you want to have the same look as this list item. For example, you might want the `<span>` in the paragraph to also be orange and bold. Try adding a `class` of `special` to it, then reload your page and see what happens.
You can apply the class of `special` to any element on your page that you want to have the same look as this list item. For example, you might want the `<span>` in the paragraph to also be orange and bold. Try adding a class of `special` to it, then reload your page and see what happens.

Sometimes you will see rules with a selector that lists the HTML element selector along with the class:

Expand Down Expand Up @@ -204,7 +229,34 @@ h1 + p {

The live example below includes the two rules above. Try adding a rule to make a span red if it is inside a paragraph. You will know if you have it right because the span in the first paragraph will be red, but the one in the first list item will not change color.

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
```html live-sample___started2
<h1>I am a level one heading</h1>

<p>
This is a paragraph of text. In the text is a <span>span element</span> and
also a <a href="http://example.com">link</a>.
</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
<li>Item <span>one</span></li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>
```

```css live-sample___started2
li em {
color: rebeccapurple;
}

h1 + p {
font-size: 200%;
}
```

{{EmbedLiveSample("started2", "", "340px")}}

> [!NOTE]
> As you can see, CSS gives us several ways to target elements, and we've only scratched the surface so far! We will be taking a proper look at all of these selectors and many more in our [Selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors) articles later on in the course.
Expand All @@ -231,9 +283,40 @@ a:hover {
}
```

In the live example below, you can play with different values for the various states of a link. We have added the rules above to it, and now realize that the pink color is quite light and hard to read — why not change that to a better color? Can you make the links bold?
In the example below, you can play with different values for the various states of a link. We have added the rules above to it, and now realize that the pink color is quite light and hard to read — why not change that to a better color? Can you make the links bold?

```html live-sample___started3
<h1>I am a level one heading</h1>

<p>
This is a paragraph of text. In the text is a <span>span element</span> and
also a <a href="http://example.com">link</a>.
</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>
```

```css live-sample___started3
a:link {
color: pink;
}

a:visited {
color: green;
}

a:hover {
text-decoration: none;
}
```

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 1000)}}
{{EmbedLiveSample("started3", "", "240px")}}

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.

Expand Down
28 changes: 20 additions & 8 deletions files/en-us/learn/css/first_steps/how_css_is_structured/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,16 +64,16 @@ p {
}
```

The `href` attribute of the {{htmlelement("link")}} element needs to reference a file on your file system. In the example above, the CSS file is in the same folder as the HTML document, but you could place it somewhere else and adjust the path. Here are three examples:
The `href` attribute of the {{htmlelement("link")}} element needs to reference a file on a file system. In the example above, the CSS file is in the same folder as the HTML document, but you could place it somewhere else and adjust the path. Here are three examples:

```html
<!-- Inside a subdirectory called styles inside the current directory -->
<!-- In a subdirectory called styles in the current directory -->
<link rel="stylesheet" href="styles/style.css" />

<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<!-- In a subdirectory called general, which is in a subdirectory called styles, in the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Go up one directory level, then inside a subdirectory called styles -->
<!-- Go back one directory level, then in a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />
```

Expand Down Expand Up @@ -169,9 +169,21 @@ p {

When you find CSS that you want to experiment with, replace the HTML `<body>` contents with some HTML to style, and then add your test CSS code to your CSS file.

As an alternative, you can also use the interactive editor below.
As an alternative, you can click "Play" on the example below to open a starting point in the MDN Playground:

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}
```html live-sample___experiment-sandbox
<p>Create your test HTML here</p>
```

```css live-sample___experiment-sandbox
/* Create your test CSS here */

p {
color: red;
}
```

{{EmbedLiveSample("experiment-sandbox")}}

Read on and have fun!

Expand All @@ -184,8 +196,8 @@ Each CSS rule starts with a selector — or a list of selectors — in order to
```css
h1
a:link
.many-things
#one-thing
.manythings
#onething
*
.box p
.box p:first-child
Expand Down
75 changes: 63 additions & 12 deletions files/en-us/learn/css/first_steps/styling_a_biography_page/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ page-type: learn-module-assessment

With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS to add your own style to them. This assessment gives you a chance to do that.

> [!NOTE]
> You can click "Play" in the live samples below to open the code in the MDN Playground, or you can copy and paste the code into your own IDE or an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
> If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
<table>
<tbody>
<tr>
Expand All @@ -28,18 +32,9 @@ With the things you have learned in the last few lessons you should find that yo
</tbody>
</table>

## Starting point

You can work in the live editor below, or you can [download the starting point file](https://github.com/mdn/css-examples/blob/main/learn/getting-started/biog-download.html) to work with in your own editor. This is a single page containing both the HTML and the starting point CSS (in the head of the document). If you prefer you could move this CSS to a separate file and link to it when you create the example on your local computer.

> [!NOTE]
> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
>
> If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
## Project brief

The following live example shows a biography, which has been styled using CSS. The CSS properties that are used are as follows — each one links to its property page on MDN, which will give you more examples of its use.
The following live sample shows a biography, which has been styled using CSS. The CSS properties that are used are as follows — each one links to its property page on MDN, which will give you more examples of its use.

- {{cssxref("font-family")}}
- {{cssxref("color")}}
Expand All @@ -49,7 +44,7 @@ The following live example shows a biography, which has been styled using CSS. T
- {{cssxref("font-style")}}
- {{cssxref("text-decoration")}}

In the interactive editor you will find some CSS already in place. This selects parts of the document using element selectors, classes, and pseudo-classes. Make the following changes to this CSS:
In the example, there is some CSS already in place which selects parts of the document using element selectors, classes, and pseudo-classes. Make the following changes to this CSS:

1. Make the level one heading pink, using the CSS color keyword `hotpink`.
2. Give the heading a 10px dotted {{cssxref("border-bottom")}} which uses the CSS color keyword `purple`.
Expand All @@ -69,6 +64,62 @@ You should end up with something like this image.

![Screenshot of how the example should look after completing the assessment.](learn-css-basics-assessment.png)

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}}
Here are HTML and CSS code blocks and the result of combining them:

```html live-sample___biog
<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
right at the coast of the Semantics, a large language ocean.
</p>

<p>
A small river named Duden flows by their place and supplies it with the
necessary regelialia. It is a paradisematic country, in which roasted parts of
sentences fly into your mouth.
</p>

<h2>Contact information</h2>
<ul>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>Web: <a href="http://example.com">http://example.com</a></li>
<li>Tel: 123 45678</li>
</ul>
```

```css live-sample___biog
body {
font-family: Arial, Helvetica, sans-serif;
}

h1 {
color: #375e97;
font-size: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 1px solid #375e97;
}

h2 {
font-size: 1.5em;
}

.job-title {
color: #999999;
font-weight: bold;
}

a:link,
a:visited {
color: #fb6542;
}

a:hover {
text-decoration: none;
}
```

{{EmbedLiveSample("biog", "", "400px")}}

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
33 changes: 32 additions & 1 deletion files/en-us/learn/css/howto/add_a_shadow/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,38 @@ The `box-shadow` property takes a number of values:

In the example below we have set the X and Y axes to 5px, the blur to 10px and the spread to 2px. I am using a semi-transparent black as my color. Play with the different values to see how they change the shadow.

{{EmbedGHLiveSample("css-examples/howto/box-shadow-button.html", '100%', 500)}}
```html live-sample___box-shadow-button
<div class="wrapper">
<button class="shadow">box-shadow</button>
</div>
```

```css hidden live-sample___box-shadow-button
.wrapper {
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}

button {
padding: 5px 10px;
border: 0;
border-radius: 5px;
font-weight: bold;
font-size: 140%;
background-color: #db1f48;
color: #fff;
}
```

```css live-sample___box-shadow-button
.shadow {
box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
}
```

{{EmbedLiveSample("box-shadow-button")}}

> [!NOTE]
> We are not using `inset` in this example, this means that the shadow is the default drop shadow with the box on top of the shadow. Inset shadows appear inside the box as if the content were pushed back into the page.
Expand Down
15 changes: 14 additions & 1 deletion files/en-us/learn/css/howto/add_a_text_shadow/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,20 @@ The `text-shadow` property takes a number of values:

In the example below we have set the x-axis offset to 2px, the y-axis offset to 4px, the blur radius to 4px, and the color to a semi-transparent blue. Play with the different values to see how they change the shadow.

{{EmbedGHLiveSample("css-examples/howto/text-shadow.html", '100%', 500)}}
```html live-sample___text-shadow
<div class="wrapper">
<h1>Adding a shadow to text</h1>
</div>
```

```css live-sample___text-shadow
h1 {
color: royalblue;
text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
}
```

{{EmbedLiveSample("text-shadow")}}

> [!NOTE]
> It can be quite easy to make text hard to read with text shadows. Make sure that the choices you make still leave your text readable and provide enough [color contrast](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) for visitors who have difficulty with low-contrast text.
24 changes: 23 additions & 1 deletion files/en-us/learn/css/howto/center_an_item/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,29 @@ To center one box inside another using CSS you will need to use [CSS box alignme

In the example below we have given the parent container `display: flex`; then set {{cssxref("justify-content")}} to center to align it horizontally, and {{cssxref("align-items")}} to center to align it vertically.

{{EmbedGHLiveSample("css-examples/howto/center.html", '100%', 700)}}
```html live-sample___center
<div class="wrapper">
<div class="box">center me!</div>
</div>
```

```css live-sample___center
.wrapper {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}

.box {
background-color: rgb(69 164 181);
border-radius: 5px;
padding: 10px;
color: #fff;
}
```

{{EmbedLiveSample("center", "", "220px")}}

> [!NOTE]
> You can use this technique to do any kind of alignment of one or more elements inside another. In the example above you can try changing the values to any valid values for {{cssxref("justify-content")}} and {{cssxref("align-items")}}.
Expand Down
Loading

0 comments on commit 4059070

Please sign in to comment.