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

fix(curriculum): update interactive examples and correct inline CSS color (#62763)

Browse Source 
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
This commit is contained in:
Ariz Faiyaz
2025-10-14 05:05:17 +05:30
committed by GitHub
parent 5186d7c6fd
commit 620d0d31a3
1 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
curriculum/challenges/english/blocks/lecture-what-is-css/672acbf7490c054d213a8c1f.md
View File

@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-inline-internal-and-external-css
---
# --description--
# --interactive--
CSS can be applied to a webpage in three main ways: inline, internal, or external.
@@ -17,11 +17,15 @@ Inline CSS is written directly within an HTML element using the `style` attribut
Here's an example using inline CSS:
:::interactive_editor
```html
<p style="color: red;">This is an inline-styled paragraph.</p>
<p style="color: green;">This is an inline-styled paragraph.</p>
```
In this example, we are using the `style` attribute to set the paragraph text to `red`.
:::
In this example, we are using the `style` attribute to set the paragraph text to `green`.
Inline CSS is generally used for quick, one-off styles or to override other styles for a specific element.
@@ -33,6 +37,8 @@ Internal CSS is written within the `style` tags inside the `head` section of an
Here's an example of internal CSS:
:::interactive_editor
```html
<head>
<style>
@@ -46,6 +52,8 @@ Here's an example of internal CSS:
</body>
```
:::
In the above example, the internal CSS applies blue text to all `p` elements on the page.
Internal CSS is best used when you need to apply styles to a specific page rather than across multiple pages. It’s useful for single-page websites or when the styles don’t need to be reused elsewhere.
@@ -56,7 +64,9 @@ External CSS is written in a separate `.css` file and linked to the HTML documen
It allows you to style multiple pages consistently and is the preferred method in professional web development.
Here's the HTML part of our code example:
Here is an example of styling all paragraph elements:
:::interactive_editor
```html
<head>
@@ -67,19 +77,17 @@ Here's the HTML part of our code example:
</body>
```
In an earlier lesson, you learned that the `link` element has a `rel` attribute that specifies the relationship between the current document and the linked resource, such as linking to a stylesheet or an external resource.
On the other hand, the `href` attribute specifies the URL of the linked resource, indicating where the resource should be retrieved from.
Here the CSS portion of the same example in separate file named `style.css`.
```css
p {
color: green;
color: red;
}
```
This example targets all paragraph elements on the page and sets the text color to green.
:::
In an earlier lesson, you learned that the `link` element has a `rel` attribute that specifies the relationship between the current document and the linked resource, such as linking to a stylesheet or an external resource.
On the other hand, the `href` attribute specifies the URL of the linked resource, indicating where the resource should be retrieved from.
External CSS is ideal for large projects where you want to maintain a consistent style across multiple pages.