CSS Quick Tricks #1 - Where to put your CSSListThumbs
CSS Quick Tricks #1 - Where to put your CSS
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!
About the author
Hey There! I´m Daan Weijers, I come from Eindhoven, The Netherlands.
I enjoy design and drawing very much, also, I play guitar, play soccer and hang out with friends.
Please don't be mad if you miss my posts, but it's mainly due to a personal project, called iPaperr
21 Comments
Thanks Daan, but I think a few other guidelines should be mentioned before delving into using CSS in this manner.
First, CSS should be kept separate from HTML as often as possible. Consider that the Web we known is made up of several layers, the most typical of which are content (HTML), presentation (CSS), and behavior (JS). To keep your development agile and flexible, keep these layers separate as much as possible.
Second, in your example of embedding CSS, you use the rel attribute, but you forgot your type="text/css".
Third, as many other seasoned developers will tell you about CSS, you can always be bothered to add to your CSS. Being smart about how many and which stylesheets to include is part of the game. In Rails for instance, you have 1 stylesheet for layout, 1 for the controller, and 1 global file. Putting styles inline is just a poor practice for reasons mentioned above and more.
Looking forward to what else you have to say!
It's pretty basic information, but I'm sure it will be appreciated by some.
I think it is a good start. I like the style of writing. Nice usage of bold. Keep up the good work.
I like the design of your site, although it is extremely difficult on the eyes. Maybe it is just me.
Truthfully, if you can keep it separate...then do.
A few reasons why:
1. Page size, the page will be smaller if the CSS is external...yes, the user will end up downloading both, but still.
2. You can decide which stylesheet to call dynamically if you'd like...then you can refer to different stylesheets for a different look. If it's embedded then you are limited.
3. As stated above, if you have many pages, you'll have to change every page if you used inline css.
Do yourself a favor...keep it separate.
Hmm, yeah, this information is indeed quite basic, but I didn't know where to start off. As we get more of these in the series, we'll move to more advanced topics :)
Oh and thanks Mark Otto, your contribution really helped :)
Basic information makes me wonder about my practices, which enhances my creativity later on. So thumbs up.
To reiterate what Mark said - it's best to keep the styles in an external file. It seems EVERY time I use an inline style, I end up repeating it some place down the line in the same site/application. In keeping with the DRY (don't repeat yourself) principal it makes better sense to move that inline style to it's own css class and re-use it on other pages.
I always have a global.css that's imported into the HTML and if I have other CSS documents I import them into the global.css.
It should be said that the different layers of CSS is why CSS was named Cascading Style Sheets.
And, it is important to understand how the different layers interact, in terms of inheritance and importance. When you link to an external page all the defined styles are reflected on the page. Then, if you add on embedded CSS (usually within the header) these styles override the external styles. Additionally, if you add inline styles (within an individual HTML tag) these styles will override both the external and embedded.
Now, let's say you have a DIV with an ID of 'content.' Then, let's assume that you set #content's background to 'orange' in the external file, 'pink' in the embedded styling and 'gold' in the inline. The DIV will now have a background of 'gold' since the inline is the most important. But, if you went back to the external file and changed 'orange' to 'orange !important' then the background will be orange since the '!important' attribute tells the CSS to keep this styling even if it is set to something else later.
One really important quick tip:
Always include your CSS style sheet ABOVE your javascript include. Therefore the DOM will be styled before your start interacting with it. In laymans term, if you don't do this you will start to see some strange behaviors especially when trying to get the widht and height of elements.
:)
Sure this is basic stuff but you have to start somewhere ;)
I think this can be awesome to follow when we start to get to a high level of coding.
Thanks for the great work and the time you guys spending on this site!
Awesome
/Jimmie
hi
thank you
Barack Obama has been a leader on government transparency – refusing to take donations from lobbyists or PACs, improving disclosure and creating a database where the public can track federal contracts and earmarks.
arkadas
sohbet
What about @import ?
Thanks for the article. Its always nice to find informative blogs. I work on our company website(A2eTechnologies.com)and this will help. Thanks!
This is some great introductory information for people who are struggling or just unaware of the differences.
I personally never use inline styles for either a 1 page or 100 page site - everything is part of the cascade I set-up in the external sheet. However, I will add that selecting where to place your CSS is also dependent on the delivery of the page.
Inline styles should be used in email marketing to ensure the page is displayed properly in web-based email clients (most notably Gmail).
hello,
Good idea to provide us a series of CSS-quicktips. As they become more advanced they can be handy for me :)
Well, to be honest I barely use CSS Inline styles, however I had this client, and he had one disclaimer sentence on one page, so I thought to use it :)
I think !important is a very nice next topic :)
I like this site even its the first time in here... it helps me a ..lot
am blank but not in total, hope will learn a lot from here as i depend much on cms
Post new comment