recursal/MDN huggingface dataset:
CSS first steps overview
========================

CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

#### Looking to become a front-end web developer?

 We have put together a course that includes all the essential information you need to
 work towards your goal.


**Get started**

Prerequisites
-------------

Before starting this module, you should have:

1. Basic familiarity with using computers and using the Web passively (i.e. looking at it, consuming the content.)
2. A basic work environment set up, as detailed in Installing basic software, and an understanding of how to create and manage files, as detailed in Dealing with files.
3. Basic familiarity with HTML, as discussed in the Introduction to HTML module.

**Note:** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides
------

This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.

What is CSS?

**CSS** (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is with a simple syntax example and also covers some key terms about the language.

Getting started with CSS

In this article, we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.

How CSS is structured

Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.

How CSS works

We have learned the basics of CSS, what it is for, and how to write simple stylesheets. In this article, we will take a look at how a browser takes CSS and HTML and turns that into a webpage.

Assessments
-----------

The following assessment will test your understanding of the CSS basics covered in the guides above.

Styling a biography page

With the things you have learned in the last few articles, 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.
How to add a shadow to text
===========================

In this guide you can find out how to add a shadow to any text on your page.

Adding shadows to text
----------------------

In our guide to adding a shadow to boxes, you can find out how to add a shadow to any element on your page. However, that technique only adds shadows to the element's surrounding box. To add a drop shadow to the text inside the box you need a different CSS property — `text-shadow`.

The `text-shadow` property takes a number of values:

* The offset on the x-axis
* The offset on the y-axis
* A blur radius
* A color

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.

**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 for visitors who have difficulty with low-contrast text.
How to highlight the first paragraph
====================================

In this guide you can find out how to highlight the first paragraph inside a container.

Styling the first paragraph
---------------------------

You would like to make the first paragraph larger and bold. You could add a class to the first paragraph and select it that way, however using a pseudo-class selector is more flexible — it means that you can target the paragraph based on its location in the document, and you won't have to manually move the class if the source order changes.

Using a pseudo-class
--------------------

A `pseudo-class` acts as if you have applied a class; however, rather than using a class selector CSS selects based on the document structure. There are a number of different pseudo-classes that can select different things. In our case we are going to use `:first-child`. This will select the element that is the first-child of a parent.

You can try changing `:first-child` to `:last-child` in the live example above, and you will select the last paragraph.

Whenever you need to target something in your document, you can check to see if one of the available `pseudo-classes` can do it for you.

See also
--------

* The `pseudo-classes` reference page.
* Learn CSS: Pseudo-classes and pseudo-elements.
How to highlight the first line of a paragraph
==============================================

In this guide you will find out how to highlight the first line of text in a paragraph, even if you don't know how long that line will be.

Styling the first line of text
------------------------------

You would like to make the first line of a paragraph larger and bold. Wrapping a `<span>` around the first line means that you can style it however, if the first line becomes shorter due to a smaller viewport size, the styled text will wrap onto the next line.

Using a pseudo-element
----------------------

A `pseudo-element` can take the place of the `<span>`; however, it is more flexible — the exact content selected by a pseudo-element is calculated once the browser has rendered the content, so it will work even if the viewport size changes.

In this case we need to use the `::first-line` pseudo-element. It selects the first formatted line of each paragraph, meaning that you can style it as you require.

**Note:** All pseudo-elements act in this way. They behave as if you had inserted an element into the document, but they do so dynamically based on the content as it displays at runtime.

Combining pseudo-elements with other selectors
----------------------------------------------

In the example above, the pseudo-element selects the first line of every paragraph. To select only the first line of the first paragraph, you can combine it with another selector. In this case, we use the `:first-child` `pseudo-class`. This allows us to select the first line of the first child of `.wrapper` if that first child is a paragraph.

**Note:** When combining pseudo-elements with other selectors in a complex or compound selector, the pseudo-elements must appear after all the other components in the selector in which they appear.

See also
--------

* The `pseudo-elements` reference page.
* Learn CSS: Pseudo-classes and pseudo-elements.
How to fill a box with an image without distorting it
=====================================================

In this guide you can learn a technique for causing an HTML image to completely fill a box.

Using object-fit
----------------

When you add an image to a page using the HTML `<img>` element, the image will maintain the size and aspect ratio of the image file, or that of any HTML `width` or `height` attributes. Sometimes you would like the image to completely fill the box that you have placed it in. In that case you first need to decide what happens if the image is the wrong aspect ratio for the container.

1. The image should completely fill the box, retaining aspect ratio, and cropping any excess on the side that is too big to fit.
2. The image should fit inside the box, with the background showing through as bars on the too-small side.
3. The image should fill the box and stretch, which may mean it displays at the wrong aspect ratio.

The `object-fit` property makes each of these approaches possible. In the example below you can see how different values of `object-fit` work when using the same image. Select the approach that works best for your design.
How to highlight a paragraph that comes after a heading
=======================================================

In this guide you can find out how to highlight a paragraph that comes directly after a heading.

Styling the first paragraph after a heading
-------------------------------------------

A common pattern is to style the first paragraph in an article differently to the ones that come after it. Usually this first paragraph will come right after a heading, and if this is the case in your design you can use that combination of elements to target the paragraph.

The next-sibling combinator
---------------------------

CSS has a group of CSS Selectors which are referred to as **combinators**, because they select things based on a combination of selectors. In our case, we will use the next-sibling combinator. This combinator selects an element based on it being next to another element. In our HTML we have a h1 followed by a `<p>`. The `<p>` is the next sibling of the `<h1>` so we can select it with `h1 + p`.

See also
--------

* Learn CSS: Selectors.
* Learn CSS: Combinators.
How to make a box semi-transparent
==================================

This guide will help you to understand the ways to make a box semi-transparent using CSS.

Change the opacity of the box and content
-----------------------------------------

If you would like the box and all of the contents of the box to change opacity, then the CSS `opacity` property is the tool to reach for. Opacity is the opposite of transparency; therefore `opacity: 1` is fully opaque—you will not see through the box at all.

Using a value of `0` would make the box completely transparent, and values between the two will change the opacity, with higher values giving less transparency.

Changing the opacity of the background color only
-------------------------------------------------

In many cases you will only want to make the background color itself partly transparent, keeping the text and other elements fully opaque. To achieve this, use a `<color>` value that has an alpha channel, such as `rgb()`. As with `opacity`, a value of `1` for the alpha channel value makes the color fully opaque. Therefore, `background-color: rgb(0 0 0 / 50%);` will set the background color to 50% opacity.

Try changing the opacity and alpha channel values in the below examples to see more or less of the background image behind the box.

**Note:** Take care that your text retains enough contrast with the background in cases where you are overlaying an image; otherwise you may make the content hard to read.

See also
--------

* Applying color to HTML elements using CSS.
How to center an item
=====================

In this guide you can find out how to center an item inside another element, both horizontally and vertically.

Center a box
------------

To center one box inside another using CSS you will need to use CSS box alignment properties on the parent container. As these alignment properties do not yet have browser support for block and inline layout you will need to make the parent a flex or grid container to turn on the ability to use alignment.

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

**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 `justify-content` and `align-items`.

See also
--------

* Box alignment in Flexbox
* Box alignment in Grid layout
How to add a shadow to an element
=================================

In this guide you can find out how to add a shadow to any box on your page.

Adding box shadows
------------------

Shadows are a common design feature that can help elements stand out on your page. In CSS, shadows on the boxes of elements are created using the `box-shadow` property (if you want to add a shadow to the text itself, you need `text-shadow`).

The `box-shadow` property takes a number of values:

* The offset on the x-axis
* The offset on the y-axis
* A blur radius
* A spread radius
* A color
* The `inset` keyword

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.

**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.

See also
--------

* The Box shadow generator
* Learn CSS: Advanced styling effects.
Using CSS generated content
===========================

This article describes some ways in which you can use CSS to add content when a document is displayed. You modify your stylesheet to add text content or images.

One of the important advantages of CSS is that it helps you to separate a document's style from its content. However, there are situations where it makes sense to specify certain content as part of the stylesheet, not as part of the document. You can specify text or image content within a stylesheet when that content is closely linked to the document's structure.

**Note:** Content specified in a stylesheet does not become part of the DOM.

Specifying content in a stylesheet can cause complications. For example, you might have different language versions of your document that share a stylesheet. If you specify content in your stylesheet that requires translation, you have to put those parts of your stylesheet in different files and arrange for them to be linked with the appropriate language versions of your document.

This issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures.

Examples
--------

### Text content

CSS can insert text content before or after an element, or change the content of a list item marker (such as a bullet symbol or number) before a `<li>` or other element with `display: list-item;`. To specify this, make a rule and add `::before`, `::after`, or `::marker` to the selector. In the declaration, specify the `content` property with the text content as its value.

#### HTML


```html
A text where I need to <span class="ref">something</span>
```


#### CSS


```css
.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference ";
}
```


#### Output

The character set of a stylesheet is UTF-8 by default, but it can also be specified in the link, in the stylesheet itself, or in other ways. For details, see 4.4 CSS style sheet representation in the CSS Specification.

Individual characters can also be specified by an escape mechanism that uses backslash as the escape character. For example, "\265B" is the chess symbol for a black queen ♛. For details, see Referring to characters not represented in a character encoding and Characters and case in the CSS Specification.

### Image content

To add an image before or after an element, you can specify the URL of an image file in the value of the `content` property.

This rule adds a space and an icon after every link that has the class `glossary`:

#### HTML


```html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
```


#### CSS


```css
a.glossary::after {
  content: " " url("glossary-icon.gif");
}
```
How to fade a button on hover
=============================

In this guide you can find out how to do a gentle fade between two colors when hovering over a button.

In our button example, we can change the background of our button by defining a different background color for the `:hover` dynamic pseudo-class. However, hovering over the button will cause the background-color to snap to the new color. To create a more gentle change between the two, we can use CSS Transitions.

Using transitions
-----------------

After adding the desired color for the hover state, add the `transition` property to the rules for the button. For a simple transition, the value of `transition` is the name of the property or properties you wish this transition to apply to, and the time that the transition should take.

For the `:active` and `:focus` pseudo-classes the `transition` property is set to none, so that the button snaps to the active state when clicked.

In the example the transition takes 1 second, you can try changing this to see the difference a change in speed makes.

**Note:** The `transition` property is a shorthand for `transition-delay`, `transition-duration`, `transition-property`, and `transition-timing-function`. See the pages for these properties on MDN to find ways to tweak your transitions.

See also
--------

* Using CSS transitions
Test your skills: Writing modes and logical properties
======================================================

The aim of this skill test is to assess whether you understand how to handle different text directions using writing modes and logical properties in CSS.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, the box is displayed with a horizontal writing mode. Can you add a line of CSS to change it so it uses a vertical writing mode with right to left text?

Your final result should look like the image below:

![A box with a vertical writing mode](/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks/mdn-writing-modes1.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, we want you to use logical properties to replace `width` and `height` in order to maintain the aspect ratio of the box as it is turned vertically.

Your final result should look like the image below:

![Two boxes one horizontal the other vertical](/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks/mdn-writing-modes2.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 3
------

In this task, we want you to use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right.

Your final result should look like the image below:

![Two boxes one horizontal one vertical with different margin, border and padding](/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks/mdn-writing-modes3.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
A cool-looking box
==================

* Previous
* Overview: Building blocks

In this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.

|  |  |
| --- | --- |
| Prerequisites: | 
 Before attempting this assessment you should have already worked
 through all the articles in this module.
  |
| Objective: | 
 To test comprehension of the CSS box model and other box-related
 features such as borders and backgrounds.
  |

Starting point
--------------

To get this assessment started, you should:

* Make local copies of the starting HTML and CSS — save them as `index.html` and `style.css` in a new directory.

 Alternatively, you could use an online editor such as CodePen, JSFiddle, or Glitch.
 You could paste the HTML and fill in the CSS into one of these online editors.

**Note:** If you get stuck, you can reach out to us in one of our communication channels.

Project brief
-------------

Your task is to create a cool, fancy box and explore the fun we can have with CSS.

### General tasks

* Apply the CSS to the HTML.
### Styling the box

We'd like you to style the provided `<div>`, giving it the following:

* A reasonable width for a large box, say around 200 pixels.
* A reasonable height for a large box, centering the text vertically in the process.
* Center the box horizontally.
* Center the text within the box.
* A slight increase in font size, to around 17-18 pixel computed style. Use rems. Write a comment about how you worked out the value.
* A base color for the design. Give the box this color as its background color.
* A contrasting color for the text and a black text shadow.
* A fairly subtle border radius.
* A 1-pixel solid border with a color similar to the base color, but a slightly darker shade.
* A linear semi-transparent black gradient that goes toward the bottom right corner. Make it completely transparent at the start, grading to around 0.2 opacity by 30% along, and remaining at the same color until the end.
* Multiple box shadows. Give it one standard box shadow to make the box look slightly raised off the page. The other two should be inset box shadows — a semi-transparent white shadow near the top left and a semi-transparent black shadow near the bottom right — to add to the nice raised 3D look of the box.
Hints and tips
--------------

* Use the W3C CSS Validator to catch and fix mistakes in your CSS.
Example
-------

The following screenshot shows an example of what the finished design could look like:

![A big red box with rounded corners. White text with drop shadow reads 'this is a cool box'.](/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box/fancy-box2.png)

* Previous
* Overview: Building blocks
Test your skills: Backgrounds and borders
=========================================

The aim of this skill test is to assess whether you understand backgrounds and borders of boxes in CSS.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Task 1
------

In this task, we want you to add a background, border, and some simple styling to a page header:

1. Give the box a 5px black solid border, with rounded corners of 10px.
2. Add a background image (use the URL `balloons.jpg`) and size it so that it covers the box.
3. Give the `<h2>` a semi-transparent black background color, and make the text white.

Your final result should look like the image below:

![Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background.](/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders/backgrounds-task1.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Task 2
------

In this task, we want you to add background images, a border, and some other styling to a decorative box:

* Give the box a 5px lightblue border and round the top left corner 20px and the bottom right corner 40px.
* The heading uses the `star.png` image as a background image, with a single centered star on the left and a repeating pattern of stars on the right.
* Make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this.

Your final result should look like the image below:

![Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.](/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders/backgrounds-task2.png)

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.