Not being an HTML designer, but having a requirement to make a web page look pretty, I now have the following problem (I am absolutely convinced the solution for this must be very, very simple, I just need to find the right tutorial, which I couldn't find even after googling with the keywords outsource style section external CSS file):

I want to take an inline <style> ... stuff ... </style> section from a web page, create a CSS file out of it, then replace the inline style section with a reference to the CSS file.

Take as an example the page you are reading now. How would I be able to accomplish that?

I know it's a basic question and I'll keep researching the Internet as we speak, but if anyone has a quick solution to this, it's your chance to earn some hosting credits.

All you need to search is "external css", all the answer will pop right out

I just briefly show you how to do it

Create a plain text file with the css you wanted in it,
then add this line to the HEAD section

Example content of css file

basically it's what ever within the STYLE tag.

That's it.

Next time when you google, don't put the search terms as a question, it won't really work. All you need is just the keyword

Good Luck

Works as advertised, thanks faulty.lee

Css is soo powerfull!! you could spend ages looking at all the things it can do, a lot of designers these days (me included) try to do virtually everything on the page using CSS.
Also having your CSS checked by a validator at http://www.w3.org/ is a must for serious designers.This will point out anything in the CSS that is not a "correct" way of using a CSS command.
You can also use this site http://www.cleancss.com/ to clean up and optimise your code.

It is good practice to close these tags with " />" instead of just ">", because this is required in XHTML.

Another way to include an external stylesheet is to use the following code:



While it works the same way as the previous one in newer browsers, it will not function in older ones (e.g. Netscape 4). If you don't see it as being useful, think of it this way - browsers that don't support @import also don't support CSS to the extent necessary today. In order to avoid any possible errors, you should use <link> for basic CSS rules (font-family, font-color etc.) and @import for advance ones, which wouldn't be recognized by older browsers anyway.

Thanks for the information, the use of @import was one of the few things that i don't completely understand about css until now.

Best regards,

I didn't notice bout the "/>", i simply copied from one of my project file. Hmm, meaning most of my project are not XHTML compliant. Thanks for the info.

As for the @import, i seldom use advance CSS, and normally i target 1 specific browser only, mainly firefox, probably the same version, for simplicity. Thus everything should work as if it's photocopied. I don't deal with end user, i can ask my client to use what ever browser of my choice. One of the reason is security, and the other is shorter development time due to less issue with cross browser compatibility

I don't use @import, either, but it is a good thing to know. But let's face it - even without any precise data, I am quite sure 80 per cent of the Internet population uses newer browsers which deal with CSS rather well ("rather" is there because of IE )