Search⌘ K
Home
Courses
The Complete Advanced Guide to CSS

Real World Use Cases

Explore the three main ways to apply styles in CSS: inline, embedded, and external stylesheets. Understand their benefits and drawbacks, and learn how to organize CSS effectively across multiple pages for real-world web development.

We'll cover the following...

One Style, Many Ways

In the real world i.e outside this interactive platform, I don’t want you confused. So how would you define styles in CSS?

There are 3 ways to do this, and I will explain them with good examples.


1.Inline Styles

Inline styles are the easiest way to style a document. But they come with a cost. Consider the basic markup below:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A Simple Page</title>
</head>
<body>
<h1>My CSS</h1>
<p>A paragraph of interesting content on how I learned CSS.</p>
</body>
</html>

To style the h1 element , you may use the style attribute. Like this:

HTML
<h1 style="color: red" >My CSS</h1>
widget

This will give the h1 a color of red. While this may look as an easy alternative. it is very hard to maintain.

Assume you had a really long document with over 20 paragraphs styled with the style attribute. How do you manage multiple changes to the paragraphs?

You’d have to go through all the paragraphs painfully and edit them with in the html markup.

Also, inline styles are not resusable. Inline styles just target the parent element. In this case, the particular h1 tag. If ...