css - style in head tag vs css file import - which is recommended?

Question

I know that inline styles are strongly discouraged, and mostly we should use <style> tags in <head> or an external CSS file.

What I am not clear on is the usage of <style> tags in a .html file and actual .css files.

Should I move all style code from home.html to home.css and include it via the <link> tag?

Or using <style> tags in <head> perfectly acceptable? My boss says I should include all code in .css files.

Note:

I am not looking from a best-performance standpoint; rather clean code and best practices while writing HTML/CSS and facilitating better debugging/reading.

you should check this link http://stackoverflow.com/questions/8284365/external-css-vs-inline-style-performance-difference — Manoj Salvi, Dec 15 '15 at 06:20
@cst1992 put all your styles in CSS file, this is the best practices. — Prajwal Shrestha, Dec 15 '15 at 06:21
Read about this: http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css#answer-2612494 — RockMyAlgorithm, Dec 15 '15 at 06:23
@PrajwalShrestha What about the case when you want to style only elements with id tags, or only elements with class tags? — cst1992, Dec 15 '15 at 07:42
@RockMyAlgorithm what I'm looking for is similar to yu_ominae's comment in the linked question. — cst1992, Dec 15 '15 at 07:44
Regarding to yu_ominae's comment, some parts are better to use inline styles, *e.g. User-defined content, result of Javascript functions, etc.* It's not practical to dynamically create separate CSS files just for these. But in general, this is a best practice. *In every rule, there is an exception.* — RockMyAlgorithm, Dec 15 '15 at 09:16

score 1 · Answer 1 · answered Dec 15 '15 at 06:23

1

this below is example to separate ......

/* .css file */

a {
    color: green;
    text-decoration: none;
}

<!-- .html file -->

<a href="www.google.co.in">Google</a>

answered Dec 15 '15 at 06:23

I already know the syntax and difference between the two; what I want to know is what experience dictates should be done to make the code easier to maintain and read. – cst1992 Dec 15 '15 at 07:39

score 0 · Answer 2 · answered Dec 15 '15 at 07:58

I prefer you create a seperate css file then you call the url in your html file inside the head tags like this: ...html file

<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <a href="www.google.co.in">Google</a>
    </body>
</html>

...CSS file

a { color: green; text-decoration: none;}

Having an external CSS is very much helpfull because you can call the file whenever you want to style another page without having to rewrite the code form scratch.

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

You should definitly take a look at this site: Best practice of CSS (not every point is compulsory in any case)

Probably to add is that you should if your project gets bigger split your whole css file into multiple.

Especially when splitting your files its getting usefull then its extremly convenient if you decided to separate your html and css. Otherwhise you're getting a huge html file und youre loosing the readability.

If you worked onces with css files of 8000lines youre thankful that you splitted up your css

css - style in head tag vs css file import - which is recommended?

3 Answers3