Skip to content

Update how-to-add-css-to-html.md #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 3, 2025
Merged

Update how-to-add-css-to-html.md #31

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion docs/css/introduction/how-to-add-css-to-html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,13 @@ keywords:
css tutorial for beginners 2025,
css tutorial for learning,
]
hide_table_of_contents: true
---

In this tutorial, you will learn how to add CSS to an HTML document using internal, external, and inline styles. CSS (Cascading Style Sheets) is a style sheet language that is used to describe the look and formatting of a document written in HTML or XML. It allows you to style web pages and user interfaces, making it easier to create visually appealing and responsive websites.

<AdsComponent />
<br />

## How to Add CSS to HTML

Expand Down Expand Up @@ -81,6 +83,7 @@ When you run this HTML document in a web browser. It will display the content wi
</BrowserWindow>

<AdsComponent />
<br />

### 2. External CSS

Expand Down Expand Up @@ -116,6 +119,7 @@ h1 {
In this example, the CSS styles are defined in a separate file named `styles.css`, which is linked to the HTML document using the `<link>` element. The styles defined in the external CSS file are applied to the elements in the HTML document.

<AdsComponent />
<br />

When you run this HTML document in a web browser. It will display the content with the styles defined in the external CSS.

Expand Down Expand Up @@ -157,6 +161,7 @@ When you run this HTML document in a web browser. It will display the content wi
By using internal, external, and inline CSS, you can style web pages and user interfaces to create visually appealing and responsive websites.

<AdsComponent />
<br />

:::note
1. Make sure the `styles.css` file is in the same directory as the `index.html` file.
Expand All @@ -177,4 +182,4 @@ By using internal, external, and inline CSS, you can style web pages and user in

## Conclusion

In this tutorial, you learned how to add CSS to an HTML document using internal, external, and inline styles. Internal CSS is added within the `<style>` element in the `<head>` section, external CSS is added in a separate CSS file and linked to the HTML document using the `<link>` element, and inline CSS is added directly to an HTML element using the `style` attribute. By using these methods, you can style web pages and user interfaces to create visually appealing and responsive websites.
In this tutorial, you learned how to add CSS to an HTML document using internal, external, and inline styles. Internal CSS is added within the `<style>` element in the `<head>` section, external CSS is added in a separate CSS file and linked to the HTML document using the `<link>` element, and inline CSS is added directly to an HTML element using the `style` attribute. By using these methods, you can style web pages and user interfaces to create visually appealing and responsive websites.