CODEWITHSUNDEEP
htmlcss
cst1992
cst1992

Reputation: 3931

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

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.

Upvotes: 2

Views: 3986

Answers (3)

Synoon
Synoon

Reputation: 2351

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

Upvotes: 0

Tanah
Tanah

Reputation: 459

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.

Upvotes: 0

user5039044
user5039044

Reputation:

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

/* .css file */

a {
    color: green;
    text-decoration: none;
}
<!-- .html file -->

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

Upvotes: 0

Related Questions