Ways of Using Cascading Style Sheets
10th
December 2019, 22:00
When implementing Cascading Style Sheets (CSS), there are three main ways to go about it. Each of these ways has its pros and cons (some more than others) and their own set of use cases.
Let's say, for example, that we want to turn all paragraphs orange (actually no, I really can't think of a reason why you'd want to do that unless you're color-blind, but this is just an example.) and we're going to implement that in CSS.
In this implementation, your HTML and CSS are in two different files, separate and distinct. Your HTML contains a reference link to the CSS file, either over the web or in your own server.
In code, it looks like this.
styles.css
index.html
Generally, the more pages you have using one stylesheet, the greater the benefit of the External Style Sheets implementation. If you wanted to turn the paragraphs to a less glaring deep grey, all you would have to do is amend one stylesheet, and all pages referencing that stylesheet would have their paragraphs turned grey.
Great for maintenance. Because the stylesheet is in a separate file from the HTML, it's less probable that you will need to edit the HTML file itself, which can be messy. Also, this lends itself to better collaboration. Imagine there's a team maintaining the site. One is the copywriter who needs to update the text, and the other is the designer. If the style and content are in separate files, the designer and the copywriter can edit the stylesheet and the HTML respectively, concurrently.
Due to caching, the CSS file only needs to be loaded once for it to work. The HTML pages, without CSS, will load faster on their own.
When either or both the styles and the HTML content are extremely long, it's also a good idea to keep them separate. Because the annoying thing about styles is that they can break if you miss out an opening or closing symbol. Same for HTML. You really don't want to risk screwing up your HTML or CSS due to constant (and unnecessary) edits. Sure, it's easily fixed. It's also a pain in the ass.
There are times you want to tailor a certain look and feel for a certain HTML page only, and exclude the other pages in the site. Clever use of External Style Sheets can still accomplish that, though this may take more effort, and both the External Style Sheet and the HTML file may need to be modified.
In code, it looks like this.
index.html
If you want to use an Internal Style Sheet to override the External Style Sheet, you'd do this. In this example, you want to turn the paragraphs grey instead of orange.
styles.css
index_grey.html
If you have a bunch of these pages that you want to affect using the same change, maintenance increasingly becomes a chore as more pages are added.
Best for projects where only one HTML file is required otherwise. And also if the HTML and/or styling is light.
Used in conjunction with an External Style Sheet when there are multiple pages and some pages need their own unique styling.
Incidentally, this is the implementation I use the most when I'm making really small projects, after which I'm confident that I will never or rarely need to revisit it.
This is where it gets hairy. What I'm about to show you is frowned on by most professionals... in public, anyway. But it's important that you know this implementation because it does have its uses despite its several disadvantages. Just don't go crazy with it.
In code, it looks like this.
index.html
The example below shows multiple tags styled this way in one page. That's painful enough on its own. When you have to maintain multiple pages of this, the pain increases exponentially.
index_nightmare.html
When the page you're writing is a quick, throwaway hack which you will never touch again or acknowledge in any way.
If you want things done quickly without thought to future maintenance, i.e, under some kind of insane deadline.
If you're some kind of masochist.
If you're not the poor bastard who is going to be maintaining these pages.
It's also a valuable way to separate style from markup (unless for some inexplicable reason you insist on using Inline Styling) and in a tech world where Separation of Concerns is something of an industry standard, any developer would do well to take heed.
Tags
See also
Let's say, for example, that we want to turn all paragraphs orange (actually no, I really can't think of a reason why you'd want to do that unless you're color-blind, but this is just an example.) and we're going to implement that in CSS.
External Style Sheets
This is the de facto standard; if in doubt as to whether you should use an external style sheet or not, just do it. You'll probably thank yourself later.In this implementation, your HTML and CSS are in two different files, separate and distinct. Your HTML contains a reference link to the CSS file, either over the web or in your own server.
In code, it looks like this.
styles.css
p
{
color: #FFAA00;
}
{
color: #FFAA00;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
Pros
Website expansion is easier. All you realistically have to do is add more pages with the same CSS reference link.Generally, the more pages you have using one stylesheet, the greater the benefit of the External Style Sheets implementation. If you wanted to turn the paragraphs to a less glaring deep grey, all you would have to do is amend one stylesheet, and all pages referencing that stylesheet would have their paragraphs turned grey.
Great for maintenance. Because the stylesheet is in a separate file from the HTML, it's less probable that you will need to edit the HTML file itself, which can be messy. Also, this lends itself to better collaboration. Imagine there's a team maintaining the site. One is the copywriter who needs to update the text, and the other is the designer. If the style and content are in separate files, the designer and the copywriter can edit the stylesheet and the HTML respectively, concurrently.
Due to caching, the CSS file only needs to be loaded once for it to work. The HTML pages, without CSS, will load faster on their own.
Cons
Could be overkill if you're definitely only going to make one small page or two.Use Cases
Using one stylesheet to style multiple pages. In fact, as long as you have multiple pages you want to maintain, chances are that even if you end up utilizing other CSS implementations, you will use External Style Sheets as a base implementation.When either or both the styles and the HTML content are extremely long, it's also a good idea to keep them separate. Because the annoying thing about styles is that they can break if you miss out an opening or closing symbol. Same for HTML. You really don't want to risk screwing up your HTML or CSS due to constant (and unnecessary) edits. Sure, it's easily fixed. It's also a pain in the ass.
There are times you want to tailor a certain look and feel for a certain HTML page only, and exclude the other pages in the site. Clever use of External Style Sheets can still accomplish that, though this may take more effort, and both the External Style Sheet and the HTML file may need to be modified.
Internal Style Sheets
These is represented by the style tag nested within the head tag of a HTML page. It can override whatever styling is dictated by an External Style Sheet provided it's declared after the reference link to that stylesheet.In code, it looks like this.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: #FFAA00;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
<html>
<head>
<style>
p
{
color: #FFAA00;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
If you want to use an Internal Style Sheet to override the External Style Sheet, you'd do this. In this example, you want to turn the paragraphs grey instead of orange.
styles.css
p
{
color: #FFAA00;
}
{
color: #FFAA00;
}
index_grey.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
p
{
color: #DDDDDD;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
p
{
color: #DDDDDD;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
Pros
It's a quick fix, and still separates HTML from the CSS. You can screw up the CSS or the HTML without affecting the other... mostly. A good middle ground between External Style Sheets and Inline Styling (which we will examine in the next part).Cons
Since the CSS is bundled in with the HTML in a single file, causing that file to be larger, loading time would be affected.If you have a bunch of these pages that you want to affect using the same change, maintenance increasingly becomes a chore as more pages are added.
Use Cases
Useful when you don't have access to the existing External Style Sheet.Best for projects where only one HTML file is required otherwise. And also if the HTML and/or styling is light.
Used in conjunction with an External Style Sheet when there are multiple pages and some pages need their own unique styling.
Incidentally, this is the implementation I use the most when I'm making really small projects, after which I'm confident that I will never or rarely need to revisit it.
This is where it gets hairy. What I'm about to show you is frowned on by most professionals... in public, anyway. But it's important that you know this implementation because it does have its uses despite its several disadvantages. Just don't go crazy with it.
Inline Styling
This is where the style is implemented within the HTML tag itself, as opposed to being in a style tag in the head tag of a page.In code, it looks like this.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: #FFAA00;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
<html>
<head>
</head>
<body>
<p style="color: #FFAA00;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
Pros
It's really quick, and it overrides both External Style Sheets and Internal Style Sheets. When you want to be guaranteed that a style will be applied regardless of what other rules may have been implemented, this is your guy.Cons
When overused, it bloats the HTML, causing it to be hard to maintain and load slower.The example below shows multiple tags styled this way in one page. That's painful enough on its own. When you have to maintain multiple pages of this, the pain increases exponentially.
index_nightmare.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: #FFAA00;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
<p style="color: #FFAA00;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
<p style="color: #FFAA00;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
<html>
<head>
</head>
<body>
<p style="color: #FFAA00;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
<p style="color: #FFAA00;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
<p style="color: #FFAA00;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere elementum ex. Duis id dolor ex. Praesent augue nulla, consectetur quis lectus eget, luctus pulvinar risus. Nunc ipsum lorem, gravida non purus ac, dapibus facilisis urna. Curabitur vel tempor erat. Maecenas egestas sapien nulla, a lobortis felis posuere ut. Ut ornare laoreet tristique.
</p>
</body>
</html>
Use Cases
Useful when you don't have access to the existing External Style Sheet.When the page you're writing is a quick, throwaway hack which you will never touch again or acknowledge in any way.
If you want things done quickly without thought to future maintenance, i.e, under some kind of insane deadline.
If you're some kind of masochist.
If you're not the poor bastard who is going to be maintaining these pages.
Final Notes
CSS is an indelible part of front-end web development today, and while its inclusion is something of a given, its implementation is the next most important factor. Properly implemented CSS will require a bit more effort up-front, but the maintenance benefits are worth it.It's also a valuable way to separate style from markup (unless for some inexplicable reason you insist on using Inline Styling) and in a tech world where Separation of Concerns is something of an industry standard, any developer would do well to take heed.
Signing off in style,
