Real World Use Cases
We've run all our code examples within the confines of the interactive platform here on educative.io. There are certain things to note when writing CSS in real life. Here they are.
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:
<!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:
<h1 style="color: red" >My CSS</h1>
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 you want to ...