[RESOLVED] is inline styling considered a hack

[isnoend07]

i am new to css
i posted a css question on another site

move centered text 10px to the right that is inside a centered division
I did not get any answers, but found the solution myself eg;
<span class="sMedBoldBlue" style= "margin-left:10px">
this worked and validated
someone posted a comment that inline css is considerated a hack.
Is this true ?

[tr333]

Depends entirely on the situation. Most of the time, you will want to add your styles to CSS classes so they are reusable in other sections of your website. If you're just applying a one-off style to a single element, then it might be ok. But even then, some people will still suggest to put it in a class.

Due to the "Cascading" part of CSS, inline styles will have higher precedence over styles defined in <style> tags or in .css files, so they can be used in effect to "overwrite" existing styles defined for an element, assuming there isn't any "!important" defined on the higher-up styles. You should try to avoid doing that if at all possible because you want each particular element type on your pages (p, h1, etc.) to have consistent styling.

A quick example:

<p style="font-size:larger;">This text is larger than normal</p>
<p style="font-size:larger;">This text is also larger than normal</p>
<p style="font-size:larger;">This text is also larger than normal</p>
<p style="font-size:larger;">This text is also larger than normal</p>

Supposing, I wanted to change the text inside each of the <p> elements to be smaller or bigger than what I've already defined, it would necessitate changing the inline styles on each <p> element. If I define that in a class, I have to only change it once to update the style across all <p> elements:

<p class="larger">This text is larger than normal</p>
<p class="larger">This text is also larger than normal</p>
<p class="larger">This text is also larger than normal</p>
<p class="larger">This text is also larger than normal</p>

.larger {
    font-size: 5em;
}

In reality, you would probably want each <p> element on your site to be styled identically, so you would apply the style directly to the <p> tag in CSS instead of using classes on each <p>:

p {
    font-size: 5em;
}

[tr333]

I would also suggest checking out the HTML5 Boilerplate for some insight into best-practices with front-end web development.

[isnoend07]

thanks that clears things in my mind

[isnoend07]

i have to spread some reputation around