LESSON: CODING WITH CSS – The Style Attribute

Overview

This lesson will introduce how to style HTML elements using CSS, focusing on the style attribute. Students will learn about CSS syntax, properties, and values, and how to apply them directly to HTML elements to change the appearance of a webpage.

📘 What is CSS?

CSS stands for Cascading Style Sheets. It is used to describe how HTML elements should be displayed in the browser. CSS allows developers to control color, layout, fonts, spacing, and more.

🧱 HTML + CSS = Styled Content

We can apply CSS styles directly inside HTML tags using the style attribute.

Example:

🔑 Syntax of the style Attribute

• property: the aspect you want to change (e.g. color, background-color, font-size)
• value: how you want to change it (e.g. red, 20px, center)
• Separate multiple property: value pairs with a semicolon (;)

🎨 Common CSS Properties and Values

✅ Correct Syntax

Always use American spelling (e.g. color, not colour).

Correct:

🧪 Practice Examples

Example 1: Styling a paragraph

Example 2: Centering text with background color

Example 3: Multiple styles in one tag

🎓 Final Assignment

Instruction: Create a simple HTML page with a <div> that contains two <p> elements. Apply CSS using the style attribute to:

1. Change the background color of the <div> to lightgray
2. Make the first paragraph text blue and size 18px
3. Make the second paragraph text green and aligned right

📌 Summary

• CSS styles can be applied directly in HTML using the style attribute.
• Always use American spelling.
• Use property: value; syntax.
• Separate multiple properties with ;

🧾 Final Thoughts: Why the Style Attribute Matters in Your Coding Journey

As you reach the end of this lesson on the style attribute, it’s important to step back and appreciate not just what you’ve learned, but why it matters.

The style attribute might seem like a small feature in the vast universe of web development, but it’s a powerful tool—especially for beginners who are just getting started with CSS. It allows you to see immediate visual feedback as you manipulate HTML elements, making your learning process more interactive, intuitive, and fun.

By using the style attribute:

• You get to bridge the gap between structure and design—turning plain HTML into visually engaging content.

• You gain early exposure to core CSS syntax and logic, which lays the foundation for more advanced styling methods like external stylesheets and CSS frameworks.

• You develop a hands-on understanding of how properties and values control visual elements, such as colors, fonts, alignment, spacing, and layout.

• You also experience firsthand the importance of syntax accuracy, like remembering the colon (:), semicolon (;), and using American spelling (color, not colour).

This isn’t just about decorating your code—it’s about learning to communicate design intent to the browser. Every style you apply is a command, a set of instructions that changes how your content appears to users around the world.

🌱 What’s Next?

While inline styles are perfect for learning and quick tests, professional developers rarely rely on them for large projects. As your skills evolve, you’ll move toward:

• Internal CSS, written in <style> tags within your HTML file

• External CSS, stored in .css files linked to your HTML

• Responsive design, ensuring your styles adapt to phones, tablets, and desktops

• CSS frameworks like Bootstrap, Tailwind, or Foundation

These advanced tools and techniques build upon the exact syntax and logic you’ve practiced here. So mastering the style attribute now gives you a confident start toward becoming a full-fledged front-end developer.

🚀 Your Mission Going Forward

Keep practicing. Build small projects. Experiment with different CSS properties. Break things, fix them, and learn by doing.

Remember, every beautifully styled website you admire started with the same basics you’ve just learned—an HTML tag and a simple style attribute.

So whether you’re creating a portfolio, designing your first blog, or just exploring the art of code, know this: you’ve already taken your first big step toward mastering web development.

Keep coding. Keep styling. And never stop creating. 🎨💻

---

Related Videos:

Related Posts:

Using the class attribute

Using CSS classes and the class attribute

ADDING CONTENT USING A WEB API

The color CSS property

HTML paragraph tag: p

Using more than one CSS property