BananaMaster

4 How to Use CSS in HTML: Step-by-Step Guide (HTML and CSS, Front End)

If you forgot something, click to go to the lesson

📘 Practical CSS Styling Tasks

For each task create a separate class in style.css and apply it to the correct HTML tag.

📌 File structure: index.html + style.css

✏️ Task 1

Recreate the style of this text:

Hello World

Text color: red
Font size: 20px

✏️ Task 2

Recreate the style of this text:

My Name

Text color: #2bcd84
Font weight: 700

✏️ Task 3

Recreate the style of this text:

I love coding

Font: "Courier New", Courier, monospace
Font size: 24px
Text color: #f0a830

✏️ Task 4

Recreate the style of this text:

Frontend Developer

Text color: blue
Font size: 34px
Font weight: 300

✏️ Task 5

Recreate the style of this text:

CSS is cool

Text color: #5bc4f5
Font: Georgia, serif
Font size: 20px

✏️ Task 6

Recreate the style of this text:

JavaScript

Text color: white
Font size: 18px
Font weight: 600

✏️ Task 7

Recreate the style of this text:

Rockstar Games

Text color: #ff6b6b
Font size: 50px
Font: "Courier New", Courier, monospace
Font weight: 900

✏️ Task 8

Recreate the style of this text:

Small and light

Text color: #888
Font size: 15px
Font weight: 100

✏️ Task 9

Recreate the style of this text:

GTA 6 is coming

Text color: #b89ef8
Font: Impact, fantasy
Font size: 36px
Font weight: 400

✏️ Task 10 — 🔥 Bonus

Create your own! Create a class .my-style and apply it to any tag.

Text

Choose your own text color
Choose your own font size
Choose your own font weight
Choose your own font

📌 Important:
Each class is written separately in style.css.
Use HTML and CSS only.
JavaScript is not needed.
Practice the properties: color, font-size, font-weight, font-family.