Why Is Using the Style-Attribute in HTML Bad

Why is using the style-attribute in html bad?

• Separation of concerns This makes it easy to replace the styles without changing the markup, or vice versa. Plus you can have one person working on CSS and another working on content

• Don't Repeat Yourself You can apply a style to many elements without having to repeat it over and over. Smaller pages means quicker load times using less bandwidth. Plus it's easier to modify later, because you can change it in one place in one file, instead of many places in many files.

• Cachability If the same style sheet is used on every page of your site, browsers can download it once and then cache it, instead of downloading the styles with the content of every single page. And they won't have to re-download it whenever the content of those pages changes.

• Multiple Versions It is easy to create multiple versions of the visual layout and appearance of your site since you just need to swap out the stylesheet file to change the appearance of every page. For instance, you can create a white-label version of a web application which your partners can re-skin to match their brand. See CSS Zen Garden for some great examples of how flexible this approach can be.

Is CSS as HTML Attribute Bad Practice?

Yes, it is bad practice. Here are a few reasons:

• You cannot reuse css code if it is inline (it only applies to the element it is on) so you land up writing extra code that does the same thing (e.g. you have two paragraphs of text that need to be styled the same - if you use the style attritibute you now have to copy and paste the style for each paragraph.)
• Your code will be harder/impossible to maintain - imagine if you had to change the font on your page. If it is declared inline like this it means going to each place to find and change the code.
• You cannot easily override the CSS styles. Properties that are declared inline have the second highest priority. The only way to override a property declared inline in a CSS stylesheet is by using the !important keyword.

What's so bad about in-line CSS?

Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you're using inline css for things like

<div style ="font-size:larger; text-align:center; font-weight:bold">

on each page to denote a page header, it would be a lot easier to maintain as

<div class="pageheader">  

if the pageheader is defined in a single stylesheet so that if you want to change how a page header looks across the entire site, you change the css in one place.

However, I'll be a heretic and say that in your example, I see no problem. You're targeting the behavior of a single image, which probably has to look right on a single page, so putting the actual css in a stylesheet would probably be overkill.

Is it a bad practice to use custom HTML attributes and style them with CSS?

Your custom attributes are not valid HTML. You must use data-* attributes if you want to put custom data on your elements. This makes what you are doing bad practice.

In addition, there are CSS classes already that should meet your needs, unless there is more to your question than you have described.

Something is wrong with my HTML code, how could I fix it?

Your content needs to go between the p tags and inline styles go inside the opening p tag like:

<p styles go here>Content goes here</p>

So in your case:

<p style="font-size: 55pt;">Welcome to our WEBSITE!</p>

HTML inline style vs style attributes (which is better)

Based on this MDN link for HTML Attributes, you should use style as attributes for <div> (or elements that are not <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>) are considered legacy.

From the linked MDN article:

Note: For all other instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead.

Why getting a node element's style attribute returns false in javascript?

Accessing the style property of an element returns a CSSStyleDeclarations Object that, itself has properties for each of the CSS properties. However, when the style property is used, this object only picks up properties that have been set as inline styles via the style attribute in HTML or the style property in JavaScript (since HTML attributes map to JavaScript properties, the style property is a reflection of the style attribute and the style attribute is where inline styles are set).

For properties that have been set via a selector in a stylesheet, you must use window.getComputedStyle() to retrieve a CSSStyleDeclarations Object that reflects all of the CSS property values after being computed by the CSS layout/rendering engine.

Lastly, you have some syntax issues with your semicolons that need to be addressed, so, your function would look something like this:

function topMag(elem) {
  // Get the offsetTop property value:
  var ost = elem.offsetTop;

  // Check the position
  if (getComputedStyle(elem).position === "fixed") {
    elemTop = ost;
  } else {
    do {
      elemTop += ost
      elem = elem.offsetParent;
    } while (elem !== "[object HTMLBodyElement]");   
  }
}

Is good practice to apply a style to the html tag?

Yea nothing wrong with it.You can put style to html tag.

Reference: http://www.w3schools.com/TAGS/tag_style.asp

http://www.w3.org/TR/REC-html40/present/styles.html#edef-STYLE

---

Related Topics