CSS Fundamentals

Styles

Give your HTML personality by changing colors, sizes, backgrounds, and more.

HTML CSS

<h1
style=“color:#20e778;”>
Hello!
</h1>

>_ What Are Styles?

So far, HTML has given our webpages structure and content. Styles let us control how that content looks — including its colors, size, background, spacing, and much more.

The language used to style webpages is called CSS, which stands for Cascading Style Sheets.

One simple way to introduce CSS is with HTML’s style attribute.

color

Text Color

Change the color of headings, paragraphs, links, and other text.

size

Backgrounds

Give an element a background color using background-color.

>_ The style Attribute

The style attribute is placed inside an HTML element’s opening tag.

styles.html

<h1 style=“color: blue;”>
Hello, World!
</h1>

Here, color is the CSS property and blue is its value.

>_ Property + Value

color

The property tells CSS what you want to change.

blue

The value tells CSS how you want it changed.

:

A colon separates the CSS property from its value.

;

A semicolon separates one CSS declaration from the next.

>_ Using Multiple Styles

You can apply more than one CSS property inside the same style attribute.

multiple-styles.html

<h1
style=“color: white; background-color: #071a35;”
>
Welcome to mC0de
</h1>

>_ Changing Text Size

The font-size property controls the size of text.

font-size.html

<p style=“font-size: 20px;”>
I’m learning how to style HTML!
</p>

>_ Aligning Text

Another useful property is text-align. It controls the horizontal alignment of text.

alignment.html

<h2 style=“text-align: center;”>
Centered Heading
</h2>

🎨

Remember

Inline styles are great for learning and quick experiments, but larger websites normally keep most styling in dedicated CSS rules. We’ll build toward that as the lessons continue.

Ready to Code?

Give your webpage some personality.

Take plain HTML and transform it using color, backgrounds, font sizes, and alignment.

⚡

mC0de Challenge

Style Your Profile

Create a small profile page and use inline styles to make it your own.

✓ Create an <h1> with your name or nickname.
✓ Change the heading’s color.
✓ Give the heading a background-color.
✓ Center the heading using text-align.
✓ Add a paragraph and change its font-size.
✓ Experiment with at least one color of your own.

>_ Challenge accepted. Style it below.

mC0de Interactive Sandbox

Styles Challenge

Live Preview

HTML Input EDIT

Live Result PREVIEW

🎨 Change colors and sizes directly in the editor. Your Live Result updates instantly.

✓

Lesson 06 Recap

What You’ve Learned

✓ CSS controls how HTML content looks.

✓ How to use the HTML style attribute.

✓ How CSS uses property: value pairs.

✓ How to change text with color and font-size.

✓ How to use background-color.

✓ How to position text using text-align.

Your HTML has style now! You’ve crossed the bridge from simply structuring content to controlling how that content looks.

🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Images HTML & CSS Home Next Lesson → Classes

styles