When style directly in HTML instead of CSS

Question

I tried to find a subject on this subject, but I did not find it, so I thought that I would continue.

My question is, if you're ever right, just put your style directly in your HTML file, instead of using a .css file.

I mean, I understand that it is very useful to use your .css file when you have a lot of things that need to be repeated, or used across multiple pages. But in my case, I have one page where I am going to style something, which I'm sure only on this page. This is the width, height and small material for the div.

To show you what I mean, here is 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 entered it directly, instead of coming up with a name for my class and putting it on. I know that this is not so, because it will be the same if I used it in my .css file and named the class, but is there a “landmark” or something like that, and this is not recommended, etc ..

I hope you understand my question. Actually not so much, I always wondered :)

Hi

Answer 1

The answer is pretty simple IMO: never. :)

You should always use a style sheet, as it allows you to quickly and easily change the whole look and layout of your site. If you embed style information in HTML directly, you need to work a lot harder if you need to change something; with a stylesheet, you simply change the CSS file in one place, and this change becomes global wherever the stylesheet is used.

Answer 2

It’s better not to mix presentation with content. To simplify CSS, there is nothing wrong with using smarter selectors and identifiers for elements for which you know there will always be one and only one. You do not need to define classes for every little thing.

In my opinion, inline styles make such markup so littered, especially with large style declarations that cause line wrapping.

A small style block inside an HTML page (rather than an external file) may be acceptable in some cases, since 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 entering the style directly on the page. With this approach, there is a trade-off between page size and the number of HTTP requests.

Answer 3

During page development, I take eveything to the same file.

just lazy - have a stylesheet in the head.

Then, when HTML from CSS is highlighted in production. in fact, I do this during development, when they have common functions - cutting and pasting is required.

Answer 4

• Never add your style information to a string
• When working with hierarchical template systems, sometimes it’s convenient for me to place style definitions in the style sheet in this template, which ends up being part of the page. If you need to reuse them, you can transfer them to a separate style sheet.

Answer 5

Ok, first first. Styling takes several order of priority :

• inline style
• CSS in HEAD
• imported CSS files

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

Also, I suppose it's just a matter of taste and how "cluttered" (vs "partalized") you want your code to end. Remember that the main purpose of CSS is to separate: WATCH FROM STRUCTURE.

---

My GENERAL STRATEGY :

• Use CSS files, for better organization - larger sites that can be reused in various files (portability).
• Use CSS in HEAD in some "rather" large, but not too large CSS code snippets that are page specific.
• Use inline CSS only for local changes (on REALLY small pages or for existing specifications that I want to change in place) ...

CONCLUSION:

In any case, since your main problem is with inline CSS, here are my 2 cents: inline CSS makes the code easy to read (at least for my taste), so why do it if necessary?

Answer 6

You should always use external .css files, because external style sheets allow you to change the appearance and layout of all pages on a website by simply editing a single file!

If you will use embedded css rather than external css in HTML pages that will take a long time to edit changes, you should use external css files for a smoother process.