jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-01-09 06:04:17 -05:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to ids and classes lesson (#62639)

Browse Source
This commit is contained in:
Giftea ☕
2025-10-09 21:55:23 +01:00
committed by GitHub
parent 02e4292f90
commit 4660bcd793
1 changed files with 76 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
curriculum/challenges/english/blocks/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
View File

@@ -5,15 +5,45 @@ challengeType: 19
dashedName: what-are-ids-and-classes
---
# --description--
# --interactive--
The `id` attribute adds a unique identifier to an HTML element. In this example, there is an `h1` element with an `id` of `title`:
The `id` attribute adds a unique identifier to an HTML element.
Here is an example of an `h1` element with an `id` of `title`.
Below the `h1` element, add an `h2` element with an `id` set to `"subtitle"`. You can write whatever text you like for the `h2` and you will see the changes in the preview window.
:::interactive_editor
```html
<h1 id="title">Movie Review Page</h1>
```
You can reference the `id` name of `title` within your JavaScript or CSS. Here's a CSS example referencing the `id` of `title` to change the text `color` to `red`:
:::
You can reference the `id` name of `title` within your JavaScript or CSS. Here's a CSS example referencing the `id` of `title` to change the text `color` to `red`.
**NOTE**: Some CSS has been provided for you in this interactive example. Don't worry about trying to understand the CSS code because you will learn more about that in future lessons. But if you want to see the text color change to blue, click on the `styles.css` tab in the editor and change the `color: red;` to `color: blue;`.
:::interactive_editor
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Review page Example</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h1 id="title">Movie Review Page</h1>
</body>
</html>
```
```css
#title {
@@ -21,6 +51,8 @@ You can reference the `id` name of `title` within your JavaScript or CSS. Here's
}
```
:::
The hash symbol (`#`) in front of `title`, tells the computer you want to target an `id` with that value. `id` names should not be used more than once, and they should always be unique. Another thing to note about `id` values, is that they cannot have spaces in them. Here is an example of applying the words `main` and `heading` to an `id` attribute value:
```html
@@ -29,29 +61,62 @@ The hash symbol (`#`) in front of `title`, tells the computer you want to target
Browsers will see this space as part of the `id` which will lead to unwanted issues when it comes to styling and scripting. `id` attribute values should only contain letters, digits, underscores, and dashes.
In contrast to the `id` attribute, the `class` attribute value does not need to be unique and can contain spaces. Here is an example of applying a class called `box` to a `div` element:
In contrast to the `id` attribute, the `class` attribute value does not need to be unique and can contain spaces.
Here is an example of applying a class called `box` to a `div` element.
```html
<div class="box"></div>
```
If you wanted to add multiple class names to an element, you can do so by separating the names by a space. Here is an updated example applying multiple classes to a `div` element:
If you wanted to add multiple class names to an element, you can do so by separating the names by a space. Here is an updated example applying multiple classes to a `div` element.
```html
<div class="box red-top"></div>
<div class="box red-box"></div>
```
To apply a set of styles to that `box` class, you can reference that class inside your CSS. Here is an example of setting `width`, `height`, and `border` properties to the element with the `class` name of `box`:
Here is an another example of applying multiple classes to multiple `div` elements.
**NOTE**: Some CSS has been provided for you in this interactive example. Don't worry about trying to understand the CSS code because you will learn more about that in future lessons. But if you wanted to change the color of the first and third boxes, click on the `styles.css` tab and change the `background-color: red;` to `background-color: black;`.
:::interactive_editor
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Colored boxes example</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="box red-box"></div>
<div class="box blue-box"></div>
<div class="box red-box"></div>
<div class="box blue-box"></div>
</body>
</html>
```
```css
.box {
width: 200px;
height: 200px;
border: 2px solid black;
width: 100px;
height: 100px;
}
.red-box {
background-color: red;
}
.blue-box {
background-color: blue;
}
```
The dot symbol (`.`) in front of `box`, tells the computer you want to target a `class` with that value. When the code runs, it will search through all of your HTML document to find all elements with that class name and apply those styles.
:::
So, to recap, when should you use an `id` versus a `class`? Classes are best used when you want to apply a set of styles to many elements. If you want to target a specific element, it is best to use `id` because those values need to be unique.