CODEWITHSUNDEEP
htmlcss
Denver Dang
Denver Dang

Reputation: 2605

When to style directly in the HTML instead of CSS

I've tried to search for a subject on this, but I haven't found any, so I thought I'd go ahead.

My question is when it is correct, if anytime, to just put your style directly in your HTML file, instead of using a .css file.

I mean, I get that it is very useful to use your .css file when you have alot of things that needs to be repeated, or is used on several pages. But in my case, I have one page where I'm about to style something, that I'm pretty sure only will be on that page. This being the width, height, and small stuff for a div.

To show you what I mean, here's the code:

<div style="margin:0px auto; width:600px;">
    <div style="float:left">
        <p class="InputFieldsText">Brugernavn</p>
        <div class="InputFields"><input name="Text1" type="text" class="Medium" placeholder="Din e-mail adresse" /></div>
        <p class="InputFieldsUnderText"><a href="#">Glemt dit brugernavn?</a></p>

        <p class="InputFieldsText">Password</p>
        <div class="InputFields"><input name="Text1" type="password" class="Medium" /></div>
        <p class="InputFieldsUnderText"><a href="#">Glemt dit password?</a></p>

        <input onclick="window.location='user_page.html'" class="LargeIndent" name="Submit1" type="button" value="Log ind" />
    </div>
    <div style="float:left; width:172px; text-align:center">            
        <img alt="" height="128" src="images/lock.png" width="128">
    </div>
</div>

So, as you can see, in some divs I styled it directly, instead of coming up with a name for my class and put on there. I know it isn't wrong to do, since it will come out the same if I used it in my .css file and called a class, but is there a "guideline" or something that this and this is not recommended etc. etc.

Hope you understood my question. Really not that big of a deal, I've just always wondered :)

Regards

Upvotes: 7

Views: 8814

Answers (6)

Shailender Arora
Shailender Arora

Reputation: 7788

You should always use a external .css files, because external style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

If you will use inline css rather than external css in HTML pages that will take of much time to edit the changes so should use the external css files for smoother process.

Upvotes: 0

Ken White
Ken White

Reputation: 125748

The answer is pretty simple, IMO: never. :)

You should always use a style sheet, because it allows you to quickly and easily change the entire appearance and layout of your site. If you embed the style information in the HTML directly, you have to work a lot harder if something needs to change; with a style sheet, you simply change the CSS file in a single location, and the change becomes global everywhere that style sheet is used.

Upvotes: 6

Dr.Kameleon
Dr.Kameleon

Reputation: 22820

Well, first things first. Styling takes some order of precedence :

  1. inline styling
  2. CSS in HEAD
  3. imported CSS files

That is, if a specific element has some attributes defined in the .css file, then you can definitely override them by using inline CSS (<div style='...'></div>), for example.

Apart from that, I suppose it's merely a matter of taste and of how 'cluttered' (vs 'compartmentalized') you want your code to end up. Don't forget that CSS's main purpose is to separate : LOOK from STRUCTURE.

My GENERAL STRATEGY is :

  • Use CSS files, for better organization is bigger sites, that may be used an re-used in various files (portability)
  • Use CSS in HEAD in some "quite" big, but not too big chunks of CSS code, that are page-specific.
  • Use inline CSS for local modifications only (in REALLY small pages, or for existing specifications that I want to alter on location)...

CONCLUSION :

Anyway, as your main issue is about inline CSS, here's my 2 cents : inline CSS makes the code easily unreadable (at least for my taste), so why do it unless necessary?

Upvotes: 0

Ed Heal
Ed Heal

Reputation: 60037

During development of a page I bung eveything into the same file.

just being lazy - have the stylesheet in the head part.

Then when in production seperate the HTML from the CSS. actually I do that during development when they share common features - a cut and paste job is required.

Upvotes: 1

Marcin
Marcin

Reputation: 49886

  1. Never have your style information inline
  2. When working with hierarchical template systems, I sometimes find it convenient to place style definitions in a stylesheet in that template, which ends up being part of the page. If these need to be reused, they can be migrated to a separate stylesheet.

Upvotes: 0

Tim M.
Tim M.

Reputation: 54417

It's best not to mix presentation with content. To simplify your CSS there is nothing wrong with using smarter selectors and IDs for elements for which you know there will always be one and only one. You don't have to define classes for every little thing.

In my opinion, inline styles make markup so cluttered, especially with large style declarations which cause line wrapping.

A small block of style inside the HTML page (instead of an external file) might be acceptable in some cases as it reduces the number of requests sent to the server. Server-side processing can be used to accomplish this by reading a separate stylesheet file and injecting the style directly into the page. With this approach, there is a trade-off between page size and the number of HTTP requests.

Upvotes: 1

Related Questions