Search

CSS Quick Tricks #1 - Where to put your CSS

Ad

Apart from the awesome design you get fed with here, it is time to start a new series! CSS Quick Tricks!
To be honest, I didn't really know where to start, so I thought I'd start at something simple, and then, as we move on, we get in to more advanced topics on CSS.
For this quick trick, I'm going to teach you where you can place your CSS, the most efficient way.

Where to place your CSS

In CSS, there are different ways to put it in function; Inline, Internal (or "Embedded") and External.
You've probably used them all, at least one time.

What's the difference?

How can this question better be answered than with some pieces of code?

With an external stylesheet, you create a link to a stylesheet. This is by far the most efficient way when you have multiple pages, running on 1 CSS file.
To do this, in the head section of your html document, place this line of code:

<link rel="stylesheet" type="text/css" link="directory/file.css" />

As you can see, we've literally created a link to a stylesheet, that is not located in the HTML, or in other words; Is external.

With an internal stylesheet, you place the whole stylesheet inside the HTML. This is again done inside the head tag, but in a different way.
The reason you might want to put styles inside your HTML, may be, because one page in particular may need some seperate styling, which can cause problems on other pages, or if you just don't want to increase the file size of your CSS document.
The right way to place a style(sheet) internally is:

<style rel="stylesheet">
* { margin: 0px; padding: 0px; }
</style>

Left over is the inline way, the reason you use this may be, that just a certain element needs f.e. a red color. However, take my advice; When styling a page, do NOT use this to style your whole page, but just for the little pieces that you couldn't be bothered about in your stylesheet.
The way you use this way of CSS styling (some may not even call it CSS) is as follows:

<div style="background-color: #fff;">

NOTE: This is just an example. Every CSS selector in here, and you can use it with every HTML element.

But what way, is the best way?

Well, there's no real answer to this question, because it depends on the way you are going to use it. But when you want to use CSS most efficiently, I suggest using the followng guidelines:

If you are going to style multiple pages with one stylesheet, use the external way, and you may even want to use this way on a single page.
This may prevent having issues, when the website needs a style update, or some little tweaking.

If you just need to style a few elements that were left out on the original stylesheet, for whatever reason, use the embedded way. Like this, you won't increase the total file size of other pages not needing the additional styling, and thus decrease loading time for other pages.

If you just need to style a single paragraph tag (or something similar), that neither external nor embedded stylesheets are worth mentioning, use the inline way.
And again, take my advice, do NOT use this to style whole pages, it will give a lot of unnecessary code, and when updating/tweaking a page, you will be busy for ages.

Conclusion

I hope you liked this first one in the new series, so I can do many more!
Also, suggestions or questions are always welcome, so I have some inspiration to write about.
Thanks!

Written by

Related

If you are a designer in this day and age you are probably designing for handheld devices like smartphones and tablets. We live in a polarizing world where on one side we have native apps and on the other the web, with responsive sites and web apps. Designing in this environment requires understanding of the context you will be designing for, therefore, testing on devices. There are several ways to create prototypes, from paper to motion in After Effects.