mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat: add css foundations block - the odin project (#49377)
* feat: add css foundations block - the odin project * feat: add first 7 questions * feat: introduce type selector question as first question * feat: add new exercise block * feat: introduce exercise 1 * feat: introduce exercise 2 * fix: add removed solutions * fix: add help category * fix: add placeholder description * fix: code block highlighting * fix: add optional chaining to tests * fix: second exercise * Apply Naomi's suggestions from code review Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> --------- Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com> Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
Sem Bauke
@@ -946,6 +946,14 @@
|
||||
"top-build-a-recipe-project": {
|
||||
"title": "Learn HTML Foundations by Building a Recipe Page",
|
||||
"intro": ["A description is to be determined"]
|
||||
},
|
||||
"top-learn-css-foundations": {
|
||||
"title": "Learn CSS Foundations",
|
||||
"intro": ["A description is to be determined"]
|
||||
},
|
||||
"top-learn-css-foundations-projects": {
|
||||
"title": "Learn CSS Foundations Projects",
|
||||
"intro": ["A description is to be determined"]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: The Odin Project
|
||||
superBlock: the-odin-project
|
||||
certification: the-odin-project
|
||||
---
|
||||
|
||||
## The Odin project
|
||||
|
||||
Description is to be determined
|
||||
@@ -43,6 +43,8 @@
|
||||
"data-structures": "JavaScript",
|
||||
"take-home-projects": "JavaScript",
|
||||
"top-learn-html-foundations": "HTML-CSS",
|
||||
"top-learn-css-foundations": "HTML-CSS",
|
||||
"top-learn-css-foundations-projects": "HTML-CSS",
|
||||
"top-build-a-recipe-project": "HTML-CSS",
|
||||
"rosetta-code": "JavaScript",
|
||||
"project-euler-problems-1-to-100": "JavaScript",
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "TOP Learn CSS Foundations Projects",
|
||||
"isUpcomingChange": true,
|
||||
"order": 3,
|
||||
"time": "",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "the-odin-project",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"63ee3f71381756f9716727ef",
|
||||
"CSS Foundations Exercise A"
|
||||
],
|
||||
[
|
||||
"63ee3fe4381756f9716727f0",
|
||||
"CSS Foundations Exercise B"
|
||||
],
|
||||
[
|
||||
"63ee3fe9381756f9716727f1",
|
||||
"CSS Foundations Exercise C"
|
||||
],
|
||||
[
|
||||
"63ee3ff1381756f9716727f2",
|
||||
"CSS Foundations Exercise D"
|
||||
],
|
||||
[
|
||||
"63ee3ff8381756f9716727f3",
|
||||
"CSS Foundations Exercise E"
|
||||
]
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "TOP Learn CSS Foundations",
|
||||
"isUpcomingChange": true,
|
||||
"order": 2,
|
||||
"time": "",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "the-odin-project",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"63ee351d0d8d4841c3a7091a",
|
||||
"CSS Foundations Question A"
|
||||
],
|
||||
[
|
||||
"63ee35240d8d4841c3a7091b",
|
||||
"CSS Foundations Question B"
|
||||
],
|
||||
[
|
||||
"63ee352b0d8d4841c3a7091c",
|
||||
"CSS Foundations Question C"
|
||||
],
|
||||
[
|
||||
"63ee35300d8d4841c3a7091d",
|
||||
"CSS Foundations Question D"
|
||||
],
|
||||
[
|
||||
"63ee35370d8d4841c3a7091e",
|
||||
"CSS Foundations Question E"
|
||||
],
|
||||
[
|
||||
"63ee353e0d8d4841c3a7091f",
|
||||
"CSS Foundations Question F"
|
||||
],
|
||||
[
|
||||
"63ee35450d8d4841c3a70920",
|
||||
"CSS Foundations Question G"
|
||||
],
|
||||
[
|
||||
"63ee354c0d8d4841c3a70921",
|
||||
"CSS Foundations Question H"
|
||||
]
|
||||
]
|
||||
}
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 63ee3f71381756f9716727ef
|
||||
title: CSS Foundations Exercise A
|
||||
challengeType: 14
|
||||
dashedName: css-foundations-exercise-a
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:**
|
||||
In this exercise, you're going to practice adding CSS to an HTML file using all three methods: external CSS, internal CSS, and inline CSS. You should only be using type selectors for this exercise when adding styles via the external and internal methods. You should also use keywords for colors (e.g. "blue") instead of using `RGB` or `HEX` values.
|
||||
|
||||
## User Stories
|
||||
|
||||
1. You should see a `div` element with a `red` background, `white` text, a font size of `32px`, center aligned, and `bold`.
|
||||
|
||||
1. The CSS of the `div` element should be added externally by using a type selector.
|
||||
|
||||
1. You should see a `p` element with a `green` background, `white` text, and a font size of `18px`.
|
||||
|
||||
1. The CSS of the `p` element should be added internally by using a type selector.
|
||||
|
||||
1. You should see a `button` element with an orange background and a font size of `18px`.
|
||||
|
||||
1. The CSS of the `button` element should have an inline style.
|
||||
|
||||
# --hints--
|
||||
|
||||
There should be one `div` element and should contains some text and be aligned in the center.
|
||||
|
||||
```js
|
||||
const aligned = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('text-align');
|
||||
|
||||
assert(aligned === 'center');
|
||||
assert(document.getElementsByTagName('DIV')?.length == 1);
|
||||
assert(document.getElementsByTagName('DIV')?.[0]?.innerText.length > 0)
|
||||
```
|
||||
|
||||
The `div` element should have a `background-color` of `red` and a text color of `white`.
|
||||
|
||||
```js
|
||||
|
||||
const bgc = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
|
||||
|
||||
const color = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('color');
|
||||
|
||||
assert(bgc === 'red');
|
||||
assert(color === 'white');
|
||||
```
|
||||
|
||||
The `div` element should have a `font-weight` of bold and a `font-size` of `32px`.
|
||||
|
||||
```js
|
||||
const fontSize = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('font-size');
|
||||
const fontWeight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('font-weight');
|
||||
|
||||
assert(fontSize === '32px');
|
||||
assert(fontWeight === 'bold');
|
||||
```
|
||||
|
||||
The `div` element should have its CSS added externally.
|
||||
|
||||
```js
|
||||
assert(!document.getElementsByTagName('style')?.[0]?.innerText.includes('div'));
|
||||
assert(!document.getElementsByTagName('div')?.[0]?.hasAttribute('style'));
|
||||
```
|
||||
|
||||
There should be one `p` element and it should contain some text.
|
||||
|
||||
```js
|
||||
assert(document.getElementsByTagName('P')?.length == 1);
|
||||
assert(document.getElementsByTagName('P')?.[0]?.innerText.length > 0)
|
||||
```
|
||||
|
||||
The `p` element should have its `color` set to `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('color');
|
||||
|
||||
assert(color == 'white');
|
||||
```
|
||||
|
||||
The `p` element should have a `font-size` of `18px`.
|
||||
|
||||
```js
|
||||
const styleTag = document.getElementsByTagName('style')?.[0];
|
||||
let pHasFontSize18 = false;
|
||||
|
||||
const rules = styleTag?.sheet?.cssRules || styleTag?.sheet?.rules;
|
||||
if (rules) {
|
||||
for (let j = 0; j < rules.length; j++) {
|
||||
const rule = rules[j];
|
||||
if (rule.selectorText === 'p' && rule.style.fontSize === '18px') {
|
||||
pHasFontSize18 = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
assert(pHasFontSize18);
|
||||
```
|
||||
|
||||
The `p` element should have its style added internally.
|
||||
|
||||
```js
|
||||
|
||||
const styleTag = document.getElementsByTagName('style')?.[0];
|
||||
let pIsStyled = false;
|
||||
|
||||
|
||||
const rules = styleTag?.sheet?.cssRules || styleTag?.sheet?.rules;
|
||||
if (rules) {
|
||||
for (let j = 0; j < rules.length; j++) {
|
||||
const rule = rules[j];
|
||||
if (rule.selectorText === 'p') {
|
||||
pIsStyled = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
assert(pIsStyled);
|
||||
```
|
||||
|
||||
The `button` element should have its `background-color` set to `orange`.
|
||||
|
||||
```js
|
||||
assert(document.getElementsByTagName('button')?.[0]?.style.backgroundColor === 'orange')
|
||||
```
|
||||
|
||||
The `button` element should have its `font-size` set to `18px`.
|
||||
|
||||
```js
|
||||
assert(document.getElementsByTagName('button')?.[0]?.style.fontSize === '18px')
|
||||
```
|
||||
|
||||
The `button` element should have an inline style.
|
||||
|
||||
```js
|
||||
assert(document.getElementsByTagName('button')?.[0]?.hasAttribute('style'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Exercise A</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
/* style.css */
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My Styling Example</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<style>
|
||||
p {
|
||||
background-color: green;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Hello World!</div>
|
||||
<p>This is a paragraph.</p>
|
||||
<button style="background-color: orange; font-size: 18px;">Click Me</button>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
div {
|
||||
background-color: red;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
+172
@@ -0,0 +1,172 @@
|
||||
---
|
||||
id: 63ee3fe4381756f9716727f0
|
||||
title: CSS Foundations Exercise B
|
||||
challengeType: 14
|
||||
dashedName: css-foundations-exercise-b
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** There are several elements in the HTML file provided, which you will have to add either class or ID attributes to. You will then have to add rules in the CSS file provided using the correct selector syntax.
|
||||
|
||||
## User Stories
|
||||
|
||||
1. You should see a `yellow` background for all odd numbered elements in the list.
|
||||
|
||||
1. You should have a `class` selector used for all odd numbered elements in the list.
|
||||
|
||||
1. You should see that the second element in the list has `blue` text and a `font-size` of `36px`.
|
||||
|
||||
1. The `font-size` and text color on the second element should be set by using an `id` attribute.
|
||||
|
||||
1. You should see that the third element in the list has a `font-size` of `24px`.
|
||||
|
||||
1. The `font-size` on the third element should be set by using a `class` attribute.
|
||||
|
||||
1. You should see that the fourth element in the list has a `red` background, a `font-size` of `24px`, and a `font-weight` of `bold`.
|
||||
|
||||
1. The `font-size` of the fourth element should be set with a `class` attribute the `font-weight` and the color should be set with an `id` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
Every odd element should have a `class` attribute.
|
||||
|
||||
```js
|
||||
const p = Array.from(document.querySelectorAll('P'));
|
||||
|
||||
const everyPHasClass = p?.every((paragraph) => paragraph.classList.length > 0);
|
||||
|
||||
assert(everyPHasClass);
|
||||
```
|
||||
|
||||
Your odd elements should have a `background-color` of `yellow`.
|
||||
|
||||
```js
|
||||
const p = Array.from(document.querySelectorAll('P'));
|
||||
|
||||
const everyPhasBackgroundColor = p?.every((paragraph) => {
|
||||
|
||||
const style = getComputedStyle(paragraph);
|
||||
|
||||
return style?.backgroundColor === 'rgb(255, 255, 0)';
|
||||
})
|
||||
```
|
||||
|
||||
Your second element should have blue text and a `font-size` of `36px`.
|
||||
|
||||
```js
|
||||
const secondElementId = document.querySelectorAll('div')?.[0]?.id;
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`#${secondElementId}`);
|
||||
|
||||
assert.equal(style?.color, 'rgb(0, 0, 255)')
|
||||
assert.equal(style?.fontSize, '36px');
|
||||
```
|
||||
|
||||
Your third element should have text and a `font-size` of `24px`.
|
||||
|
||||
```js
|
||||
const thirdElement = document.querySelectorAll('p')?.[1]?.classList;
|
||||
|
||||
```
|
||||
|
||||
The fourth element should have a `font-size` of `24px`.
|
||||
|
||||
```js
|
||||
const fourthElementClass = document.querySelectorAll('div')?.[1]?.classList[0];
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`.${fourthElementClass}`);
|
||||
|
||||
assert(style?.fontSize === '24px');
|
||||
```
|
||||
|
||||
The fourth element should have a red `background-color`.
|
||||
|
||||
```js
|
||||
const fourthElement = document.querySelectorAll('div')?.[1]?.id;
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`#${fourthElement}`);
|
||||
|
||||
assert(style?.backgroundColor === 'red');
|
||||
```
|
||||
|
||||
The fourth element should have a `font-weight` of `bold`.
|
||||
|
||||
```js
|
||||
const fourthElement = document.querySelectorAll('div')?.[1]?.id;
|
||||
|
||||
const style = new __helpers.CSSHelp(document).getStyle(`#${fourthElement}`);
|
||||
|
||||
assert(style?.fontWeight === 'bold');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Class and ID Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<p>Number 1 - I'm a class!</p>
|
||||
<div>Number 2 - I'm one ID.</div>
|
||||
<p>Number 3 - I'm a class, but cooler!</p>
|
||||
<div>Number 4 - I'm another ID.</div>
|
||||
<p>Number 5 - I'm a class!</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Class and ID Selectors</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="odd">Number 1 - I'm a class!</p>
|
||||
<div id="two">Number 2 - I'm one ID.</div>
|
||||
<p class="odd adjust-font-size">Number 3 - I'm a class, but cooler!</p>
|
||||
<div id="four" class="adjust-font-size">Number 4 - I'm another ID.</div>
|
||||
<p class="odd">Number 5 - I'm a class!</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.odd {
|
||||
background-color: rgb(255, 167, 167);
|
||||
font-family: Verdana, "DejaVu Sans", sans-serif;
|
||||
}
|
||||
|
||||
.adjust-font-size {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#two {
|
||||
color: #0000ff;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
#four {
|
||||
background-color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
---
|
||||
id: 63ee3fe9381756f9716727f1
|
||||
title: CSS Foundations Exercise C
|
||||
challengeType: 14
|
||||
dashedName: css-foundations-exercise-c
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
Test 2
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
Test 3
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
```
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
---
|
||||
id: 63ee3ff1381756f9716727f2
|
||||
title: CSS Foundations Exercise D
|
||||
challengeType: 14
|
||||
dashedName: css-foundations-exercise-d
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
Test 2
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
Test 3
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
```
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
---
|
||||
id: 63ee3ff8381756f9716727f3
|
||||
title: CSS Foundations Exercise E
|
||||
challengeType: 14
|
||||
dashedName: css-foundations-exercise-e
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
description
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
Test 2
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
Test 3
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
```
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 63ee351d0d8d4841c3a7091a
|
||||
videoId: LGQuIIv2RVA
|
||||
title: CSS Foundations Question A
|
||||
challengeType: 15
|
||||
dashedName: css-foundations-question-a
|
||||
---
|
||||
# --description--
|
||||
|
||||
A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
|
||||
<div>Hello, World!</div>
|
||||
<div>Hello again!</div>
|
||||
<p>Hi...</p>
|
||||
<div>Okay, bye.</div>
|
||||
```
|
||||
|
||||
```css
|
||||
/* styles.css */
|
||||
|
||||
div {
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
Here, all three `<div>` elements would be selected, while the `<p>` element wouldn’t be.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following best describes the CSS code given above?
|
||||
|
||||
## --answers--
|
||||
|
||||
The code applies a `white` color to all elements in the HTML file.
|
||||
|
||||
---
|
||||
|
||||
The code applies a `white` color to all `div` elements in the HTML file.
|
||||
|
||||
---
|
||||
|
||||
The code applies a `white` color to all `p` elements in the HTML file.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 63ee35240d8d4841c3a7091b
|
||||
videoId: LGQuIIv2RVA
|
||||
title: CSS Foundations Question B
|
||||
challengeType: 15
|
||||
dashedName: css-foundations-question-b
|
||||
---
|
||||
# --description--
|
||||
|
||||
Class selectors will select all elements with the given `class`, which is just an attribute you place on an HTML element. Here’s how you add a class to an HTML tag and select it in CSS:
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
|
||||
<div class="alert-text">
|
||||
Please agree to our terms of service.
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
/* styles.css */
|
||||
|
||||
.alert-text {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
Note the syntax for `class` selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be unique, so you can use the same `class` on as many elements as you want.
|
||||
|
||||
Another thing you can do with the `class` attribute is to add multiple classes to a single element as a space-separated list, such as `class="alert-text severe-alert"`. Since whitespace is used to separate `class` names like this, you should never use spaces for multi-worded names and should use a hyphen instead.
|
||||
|
||||
## ID Selectors
|
||||
ID selectors are similar to `class` selectors. They select an element with the given `id`, which is another attribute you place on an HTML element:
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
|
||||
<div id="title">My Awesome 90's Page</div>
|
||||
```
|
||||
|
||||
```css
|
||||
/* styles.css */
|
||||
|
||||
#title {
|
||||
background-color: red;
|
||||
}
|
||||
```
|
||||
|
||||
Instead of a period, you use a hashtag immediately followed by the case-sensitive value of the `id` attribute. A common pitfall is people overusing the `id` attribute when they don’t necessarily need to, and when classes will suffice. While there are cases where using an `id` makes sense or is needed, such as taking advantage of specificity or having links redirect to a section on the current page, you should use `id`s sparingly (if at all).
|
||||
|
||||
The major difference between classes and IDs is that an element can only have one `id`. An `id` cannot be repeated on a single page, and the `id` attribute should not contain any whitespace at all.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the syntax for class and ID selectors?
|
||||
|
||||
## --answers--
|
||||
|
||||
To select a `class` you use `$` and to select an `id` you use `#`
|
||||
|
||||
---
|
||||
|
||||
To select a `class` you use `.` and to select an `id` you use `*`
|
||||
|
||||
---
|
||||
|
||||
To select a `class` you use `.` and to select an `id` you use `#`
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 63ee352b0d8d4841c3a7091c
|
||||
videoId: LGQuIIv2RVA
|
||||
title: CSS Foundations Question C
|
||||
challengeType: 15
|
||||
dashedName: css-foundations-question-c
|
||||
---
|
||||
# --description--
|
||||
|
||||
What if you have two groups of elements that share some of their style declarations?
|
||||
|
||||
```css
|
||||
.read {
|
||||
color: white;
|
||||
background-color: black;
|
||||
/* several unique declarations */
|
||||
}
|
||||
|
||||
.unread {
|
||||
color: white;
|
||||
background-color: black;
|
||||
/* several unique declarations */
|
||||
}
|
||||
```
|
||||
|
||||
Both our `.read` and `.unread` selectors share the `color: white;` and `background-color: black;` declarations, but otherwise have several of their own unique declarations. To cut down on the repetition, you can group these two selectors together as a comma-separated list:
|
||||
|
||||
```css
|
||||
.read,
|
||||
.unread {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.read {
|
||||
/* several unique declarations */
|
||||
}
|
||||
|
||||
.unread {
|
||||
/* several unique declarations */
|
||||
}
|
||||
```
|
||||
|
||||
Both of the examples above (with and without grouping) will have the same result, but the second example reduces the repetition of declarations and makes it easier to edit either the `color` or `background-color` for both classes at once.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
How would you apply a single rule to two different selectors, `.red-box` and `.yellow-box`?
|
||||
|
||||
## --answers--
|
||||
|
||||
```css
|
||||
.red-box,
|
||||
.yellow-box {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```css
|
||||
.red-box {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```css
|
||||
.red-box {
|
||||
width: 25px;
|
||||
.yellow-box {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 63ee35300d8d4841c3a7091d
|
||||
videoId: LGQuIIv2RVA
|
||||
title: CSS Foundations Question D
|
||||
challengeType: 15
|
||||
dashedName: css-foundations-question-d
|
||||
---
|
||||
# --description--
|
||||
|
||||
Another way to use selectors is to chain them as a list without any separation. Let’s say you had the following HTML:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div class="subsection header">Latest Posts</div>
|
||||
<p class="subsection preview">This is where a preview for a post might go.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
You have two elements with the `subsection` class that have some sort of unique styles, but what if you only want to apply a separate rule to the element that also has `header` as a second class? Well, you could chain both the `class` selectors together in your CSS like so:
|
||||
|
||||
```css
|
||||
.subsection.header {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
What `.subsection.header` does is it selects any element that has both the `subsection` and `header` classes. Notice how there isn’t any space between the `.subsection` and `.header` `class` selectors. This syntax basically works for chaining any combination of selectors, except for chaining more than one type selector.
|
||||
|
||||
This can also be used to chain a class and an ID, as shown below:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div class="subsection header">Latest Posts</div>
|
||||
<p class="subsection" id="preview">This is where a preview for a post might go.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can take the two elements above and combine them with the following:
|
||||
|
||||
```css
|
||||
.subsection.header {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.subsection#preview {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
In general, you can’t chain more than one type selector since an element can’t be two different types at once. For example, chaining two type selectors like `div` and `p` would give us the selector `divp`, which wouldn’t work since the selector would try to find a literal `<divp>` element, which doesn’t exist.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Given an element that has an `id` of `title` and a `class` of `primary`, how would you use both attributes for a single rule?
|
||||
|
||||
## --answers--
|
||||
|
||||
```css
|
||||
.title.primary {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```css
|
||||
.title > primary {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```css
|
||||
#title.primary {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 63ee35370d8d4841c3a7091e
|
||||
videoId: LGQuIIv2RVA
|
||||
title: CSS Foundations Question E
|
||||
challengeType: 15
|
||||
dashedName: css-foundations-question-e
|
||||
---
|
||||
# --description--
|
||||
|
||||
Combinators allow us to combine multiple selectors differently than either grouping or chaining them, as they show a relationship between the selectors. There are four types of combinators in total, but for right now we’re going to only show you the descendant combinator, which is represented in CSS by a single space between selectors. A descendant combinator will only cause elements that match the last selector to be selected if they also have an ancestor (parent, grandparent, etc) that matches the previous selector.
|
||||
|
||||
So something like `.ancestor .child` would select an element with the class `child` if it has an ancestor with the class `ancestor`. Another way to think of it is child will only be selected if it is nested inside of `ancestor`, no matter how deep. Take a quick look at the example below and see if you can tell which elements would be selected based on the CSS rule provided:
|
||||
|
||||
```html
|
||||
<!-- index.html -->
|
||||
|
||||
<div class="ancestor"> <!-- A -->
|
||||
<div class="contents"> <!-- B -->
|
||||
<div class="contents"> <!-- C -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contents"></div> <!-- D -->
|
||||
```
|
||||
|
||||
```css
|
||||
/* styles.css */
|
||||
|
||||
.ancestor .contents {
|
||||
/* some declarations */
|
||||
}
|
||||
```
|
||||
|
||||
In the above example, the first two elements with the `contents` class (`B` and `C`) would be selected, but that last element (`D`) won’t be. Was your guess correct?
|
||||
|
||||
There’s really no limit to how many combinators you can add to a rule, so `.one .two .three .four` would be totally valid. This would just select an element that has a class of `four` if it has an ancestor with a class of `three`, and if that ancestor has its own ancestor with a class of `two`, and so on. You generally want to avoid trying to select elements that need this level of nesting, though, as it can get pretty confusing and long, and it can cause issues when it comes to specificity.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What does the descendant combinator do?
|
||||
|
||||
## --answers--
|
||||
|
||||
It groups certain classes together which share the same declarations.
|
||||
|
||||
---
|
||||
|
||||
It gives the ability to select an element that shares the same `class` and `id`.
|
||||
|
||||
---
|
||||
|
||||
It allows you to select an element based on its relationship with its ancestor (parent, grandparent, and so on).
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
---
|
||||
id: 63ee353e0d8d4841c3a7091f
|
||||
videoId: LGQuIIv2RVA
|
||||
title: CSS Foundations Question F
|
||||
challengeType: 15
|
||||
dashedName: css-foundations-question-f
|
||||
---
|
||||
# --description--
|
||||
|
||||
Okay, you went over quite a bit so far. The only thing left for now is to go over how to add all this CSS to your HTML. There are three methods to do so.
|
||||
|
||||
External CSS is the most common method you will come across, and it involves creating a separate file for the CSS and linking it inside of an HTML’s opening and closing `<head>` tags with a self-closing `<link>` element:
|
||||
|
||||
First, you add a self-closing `<link>` element inside of the opening and closing `<head>` tags of the HTML file. The `href` attribute is the location of the CSS file, either an absolute URL or, what you’ll be utilizing, a URL relative to the location of the HTML file. In the example above, you are assuming both files are located in the same directory. The `rel` attribute is required, and it specifies the relationship between the HTML file and the linked file.
|
||||
|
||||
Then inside of the newly created `styles.css` file, you have the selector (the `div` and `p`), followed by a pair of opening and closing curly braces, which create a “declaration block”. Finally, you place any declarations inside of the declaration block. `color: white; ` is one declaration, with `color` being the property and `white` being the value, and `background-color: black;` is another declaration.
|
||||
|
||||
A note on file names: `styles.css` is just what you went with as the file name here. You can name the file whatever you want as long as the file type is `.css`, though “style” or “styles” is most commonly used.
|
||||
|
||||
A couple of the pros to this method are:
|
||||
|
||||
1. It keeps your HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
|
||||
2. You only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following best describes the purpose of the `rel` attribute in the `<link>` element when linking an external CSS file to an HTML file?
|
||||
|
||||
## --answers--
|
||||
|
||||
It specifies the location of the CSS file relative to the location of the HTML file.
|
||||
|
||||
---
|
||||
|
||||
It specifies the relationship between the HTML file and the linked file.
|
||||
|
||||
---
|
||||
|
||||
It specifies the type of file being linked (e.g. "stylesheet").
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
---
|
||||
id: 63ee35450d8d4841c3a70920
|
||||
videoId: LGQuIIv2RVA
|
||||
title: CSS Foundations Question G
|
||||
challengeType: 15
|
||||
dashedName: css-foundations-question-g
|
||||
---
|
||||
# --description--
|
||||
|
||||
Internal CSS (or embedded CSS) involves adding the CSS within the HTML file itself instead of creating a completely separate file. With the internal method, you place all the rules inside of a pair of opening and closing `<style>` tags, which are then placed inside of the opening and closing `<head>` tags of your HTML file. Since the styles are being placed directly inside of the `<head>` tags, you no longer need a `<link>` element that the external method requires.
|
||||
|
||||
Besides these differences, the syntax is exactly the same as the external method (selector, curly braces, declarations):
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
div {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>...</body>
|
||||
```
|
||||
|
||||
This method can be useful for adding unique styles to a single page of a website, but it doesn’t keep things separate like the external method, and depending on how many rules and declarations there are it can cause the HTML file to get pretty big.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is a difference between internal and external CSS methods?
|
||||
|
||||
## --answers--
|
||||
|
||||
The external method places CSS rules in a separate file, while the internal method places CSS rules within the HTML file itself.
|
||||
|
||||
---
|
||||
|
||||
The internal method keeps CSS separate from HTML, while the external method embeds CSS directly in HTML.
|
||||
|
||||
---
|
||||
|
||||
The internal method uses `<link>` element to link CSS to HTML, while the external method embeds CSS directly in HTML.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 63ee354c0d8d4841c3a70921
|
||||
videoId: LGQuIIv2RVA
|
||||
title: CSS Foundations Question H
|
||||
challengeType: 15
|
||||
dashedName: css-foundations-question-h
|
||||
---
|
||||
# --description--
|
||||
|
||||
Inline `CSS` makes it possible to add styles directly to `HTML` elements, though this method isn’t as recommended:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div style="color: white; background-color: black;">...</div>
|
||||
</body>
|
||||
```
|
||||
|
||||
The first thing to note is that there aren't any selectors here, since the styles are being added directly to the opening `<div>` tag itself. Next, you have the `style` attribute, with its value within the pair of quotation marks being the declarations.
|
||||
|
||||
If you need to add a unique style for a single element, this method can work just fine. Generally, though, this isn’t exactly a recommended way for adding CSS to HTML for a few reasons:
|
||||
|
||||
It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
|
||||
If you want many elements to have the same style, you would have to copy + paste the same style to each individual element, causing lots of unnecessary repetition and more bloat.
|
||||
Any inline CSS will override the other two methods, which can cause unexpected results. (While you won’t dive into it here, this can actually be taken advantage of).
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is the main disadvantage of using inline CSS?
|
||||
|
||||
## --answers--
|
||||
|
||||
It can quickly become pretty messy once you start adding a lot of declarations to a single element, causing your HTML file to become unnecessarily bloated.
|
||||
|
||||
---
|
||||
|
||||
It requires using selectors, which can be complicated for beginners.
|
||||
|
||||
---
|
||||
|
||||
Any inline CSS will override the other two methods (internal and external), which can cause unexpected results.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
Reference in New Issue
Block a user