Inline styles vs styles in CSS

Question

I know placing all your styles in a CSS file is the best thing to do as it is a lot neater.

But does it REALLY matter if the styles are inline or in a CSS?????

Edit below

My plan is to just place the styles in my MasterPage and all other pages will use the MasterPage....I believe the correct term is not "INLINE" but Embedded???

Crackling

Answer 1

Using Inline CSS:

• Repeat the same rule for every element in the page.
• More code and bigger file size to transfer to the client.
• Harder to maintain, suppose you want to change the width to 200px, you will need to go through all the page and edit one by one.

inline:

<div style="width:100px; height:100px;"></div>
<div style="width:100px; height:100px;"></div>

external OR put css classes in the head [embedded styling]:

<div class="big"></div>
<div class="big"></div>

Based on your edit: that seems not to be inline CSS as in my example above, it is the same idea as using an external file, so if you want to do that go ahead, it is the same.

Renell

I wont be doing it like this, I will be placing the styles in my HEAD tag of my MasterPage and then just call the class from there..... – Crackling

yes, go ahead, it is the same as puting in a separate file, you can choose between putting in the head or separate file, just think which will be better and easier to manage later, it's your call, but regarding performance, no diff at all as I know. – Renell

Thanks, Yes i believe the correct word I needed to use was not inline styles but embedded styling........ – Crackling

Answer 2

Some thoughts from one with experience, rather than a 'purist':

Storing all styles, for a large application, in one CSS file is not maintainable. You'll have perform a text search of the file to find the style you're looking for, or scroll a lot, and there's a higher chance that you'll overlook related styles when making an update.

If certain styles are particular to a page, not globally used, it is more maintainable to keep them in a style tag within the head tag.

Deep CSS inheritance hierarchies are also not maintainable. These are much, much worse than inline styles! The CSS language itself does a poor job of applying styles to many elements in more complex structures. Consider lesscss, sass, or even jQuery for more than basic application of styles.

Lots of developers use HTML for presentation, mostly DIVs, when they think they are doing the right thing, or lecturing others. Some example above!

Mayday

Answer 3

It matters because your code becomes very difficult to maintain or update if you use inline styles. Keeping your styles in style tags or separate CSS files allows you to comply with Don't Repeat Yourself, which is probably the most important development principle.

That being said, if you are absolutely certain that a piece of styling is unique to a given element, and also that it won't ever need to be tweaked, you can feel free to use inline styling. I sometimes use inline style for throwaway code and for things like landing pages (once they're done, they're done).

Keffiyeh

Answer 4

No but it is alot easier to make changes to the css if you only have to look one place instead of all your headers/inline

One other thing, your markup looks alot cleaner if you dont have eny css/javascript inline

Coster

Answer 5

When creating master pages I use in-line styles to create the basic layout of the page. For instance I include all of the styles that position the header at the top of the page, main content in the middle and footer at the bottom. Pretty much every style attribute related to positioning, I include in the masterpage as an inline style.

Merci

Answer 6

Storing styles in one document helps you to control on your entire project. Furthermore less code to maintain and applying changes.

Woolery

Answer 7

It is a loth easier for maintenance... does it really matter depends on what you think what is important... why wouldn't you use a css file?

Allanite

I think you make it harder for yourself or your project when you going to use inline css... it just creates more code lines in one screen, so it will be less readable – Allanite

Answer 8

Do you mean putting your styles in the with or attaching them as 'style="x"' to your element?

Cocoa

Adding them inside my HEAD tag of my MasterPage, not attaching them to my element it self..... – Crackling

Answer 9

There's several reasons for avoinding inline CSS.

1) Maintenance, it's easier to make changes to a code where all css is seperated from the markup itself. It also makes the code more readable as avoiding alot of inline css gives you less code.

<div class='test'></div>

is easier on the eye than:

<div style='background:yellow;width:10000px;height:10px;position:absolute;top:10003px;left:132032px;'></div>

When the css is inline you will also have a hard time finding where the code itself is and comparing styles. You will also often end up repeating the same code several times because you can't use classes.

2) Performance, CSS files can be gzipped, making for a smaller load. It's also easier for the browser to handle when it get js and css served as files.

3) Keeping with the best practice. Some other poor developer might want to edit your code later, and he sure would be happy if you kept away from inline CSS.

Now of course you can do CSS in the head of a document too, but why make your files bigger than they need to be? More code into the same file makes for more mess. And you can't gzip it if you do.

Nijinsky

Answer 10

@Etienne , there is one disadvantage doing this way , if you want to deploy any changes to production you have make a build and push it.

If you maintain everything as css , you can just push the css file changes and invalidate the load balancer cache.

I thought this is a good point to mention.

Dhumma

Answer 11

When it is best to use inline style

Inline style is the best solution in situations when some style is created dynamically from user input via server-side code (ex, WordPress plugin), to be applied only to a single HTML element, in such cases insert it into an external CSS file causes only problems:

• There is the need for a server-side code that creates a CSS class with the dynamic style inside it.
• There is the need for a server-side code that write and save the .css file
• There is the need for a server-side code that is able to link the CSS classes created to the correct HTML elements You must load an external CSS file for no reason, this is a downgrade of performance (file size and 1 more HTTP request)
• In many cases, where the dynamic codes are just one or two, the problems are startling clears: you must create a file of ex. 800bytes with 2 lines of code, and load it as external files. Greater exposure to bugs. More a code is complex more are chances of bugs. The server-side codes above are very complex in comparison to the simplicity of the task they do.

Real use-case:

Imagine a scenario where a user wants to upload an image and use it as a background in an HTML element. With old rule is just style="background-image:URL()". with the new rule some code must create and save an external file, with just the code style="background-image:URL()", create a CSS class for it, write it in the HTML component, load this CSS file with just one line of code. Totally nonsense. Consider also that this operation must be done every time the user updates the image.

Final result:

• Worst performance due to 1 more HTTP request and large, complex, server-side codes.
• Wasting hours of time for authors to develop something that is not only useless but also creates real problems.
• At least one more file in the project
• Worst readability/comprehensibility of the code because a user must check the HTML and then find the CSS code of the linked CSS class to see the value of the style.

When it is best to use an external CSS file

In all other cases than the ones explained above, in short, when the style is fixed and never change you should put it in an external CSS file.

Bitterroot