Daan's blog

CSS Quick Tricks #1 - Where to put your CSS

Daan — Sun, 22 Feb 2009 22:24:29 +0000

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

Inspiration: Dutch Design Week Eindhoven

Daan — Sun, 26 Oct 2008 19:30:27 +0000

Once again it was time for my favourite 2 weeks of the year! It has a few reasons; My birthday, a week off from school, and most importantly for this post: The Dutch Design Week Eindhoven!
I have still not figured out why they call it "Dutch", as it is only in my city, but I love it! This post will feature some pictures of the graduates from the Design Academy Eindhoven.

I thought it'd be fun to start with the advertisement for the DDW. It was placed all over town, and I find it very creative, yet simple. If you look closer into the logo, you can see the first 2 petals of the flower are "D"s and all 3 petals form a "W".

"Power Of Design!" or should I call it "design electricity"?
Anyway, the concept of this product was to show people how much electricity devices use when they're on standby mode, as shown with the red lights, 1 part of the circle was coloured when the light was on standby, when fully powered, it showed 3 coloured parts! (it only shows 2 here, it was dimmed)
It also has a big green button, which I like, to turn everything off!

Another idea I really liked, as you can see it's an step, however, when you apply the two parts laying next to it, and reposition the foot-part. You have a small bicycle!

I thought this one would be cool for us designers (referring to the business cards + sketch holders).
These are some things to hold up, and organise things like business cards, sketches, brochures, etc. I thought it'd be a nice way to present stuff like this to clients :)

I thought this would be a good one for our "eco-friendly" world, these are electrical things, running on MUD. Yeah, mud, the little organisms in the mud would be able to light some LED lights, and even a little alarm-clock!

I liked the idea of this one as well, a regular table, with some grapples and holes in it for kids to play with marbles.
What a hell lot of work must have been in this one!

I thought this one was really cool! When buying this, you are able to rebuilt a skeleton of some cool animal like a snake, an eagle, a beaver or something else, in wood! Also, when placed in the right light, it looks really great!

"Numerical Me" the creator called it when she explained it to us, "This is how society has made me".
The idea behind this poster, is the creator, but in a way of numbers, birth date, social security number, credit card, etc.
I thought it was very special to have one of these made with your own data.

Conclusion:

I really enjoyed these 2 weeks, and I hope you could enjoy a little bit with this post.
Click here if you want to know more about the Design Academy Eindhoven.
Click here for the DDW website.

Cheers!

About the author

Video Inspiration: Vancouver Film School

Daan — Wed, 20 Aug 2008 13:48:09 +0000

Vancouver Film School, is exactly what its name tells you, a Film School in Vancouver, Canada. The students, and the school itself make very cool videos, which I'd like to share. Enjoy!

The first movie is about a penguin and a wishingwell:

By Josephine Gutianjo

The second movie is about 2 creatures, 1 trying to cheer the other one up.

By Michael Lewicki

By Mauricio Bartok Ruiz

Besides fun movies, there are movies on serious subjects and matters as well.

A movie about the Space Station 'The Voyager'

By Leo Aguiar, Jaime Arvizu and Tyler Lemermeyer

By Dongkun Yoon

I know I only put up animated movies, but that's because I enjoyed these most.

If you want to have more on this, you can visit the official VFS website or visit The VFS Youtube Channel.

Daan's blog

CSS Quick Tricks #1 - Where to put your CSS

Where to place your CSS

What's the difference?

But what way, is the best way?

Conclusion

About the author

Sponsored Links:

Inspiration: Dutch Design Week Eindhoven

Conclusion:

About the author

Sponsored Links:

Video Inspiration: Vancouver Film School

Vancouver Film School, is exactly what its name tells you, a Film School in Vancouver, Canada. The students, and the school itself make very cool videos, which I'd like to share. Enjoy!

I hope you enjoyed this post!
Daan.

About the author

Sponsored Links:

Daan's blog

CSS Quick Tricks #1 - Where to put your CSS

Where to place your CSS

What's the difference?

But what way, is the best way?

Conclusion

About the author

Sponsored Links:

Inspiration: Dutch Design Week Eindhoven

Conclusion:

About the author

Sponsored Links:

Video Inspiration: Vancouver Film School

Vancouver Film School, is exactly what its name tells you, a Film School in Vancouver, Canada. The students, and the school itself make very cool videos, which I'd like to share. Enjoy!

I hope you enjoyed this post! Daan.

About the author

Sponsored Links:

I hope you enjoyed this post!
Daan.