1. Login

Style - HTML Attribute

The style attribute is used for inline styling of elements, and little quick-fixes, but should be avoided otherwise.

1146 views

Edited: 2017-12-11 04:54

The HTML style attribute is used to apply styling rules directly on elements, also known as inline styles. Its generally recommended to apply styles in external CSS files, since it will allow browsers to make use of caching, speeding up the page load times, and lowering the bandwidth usage both on the client, and the server side.

The style element can be used on all style-able elements. I.e.

<p style="color:black;margin: 1em 0 2em;">Test paragraph</p>

If you are using multiple CSS properties you should separate each property with a semicolon ";".

The style attribute will override styling globally. I.e. Styles set in external StyleSheets, and from style elements in the page.

When to use the Style Attribute

The style attribute can be used for quick fixes, and in situations where you don't have access to the CSS files, and still want to change the appearance of the elements on a page. It is, however, usually better to use external stylesheets.

It can also be useful to quickly test something directly on your site, especially if you do not have easy access to the CSS files, or if you are just to lazy to fire up your editor.

Share with your friends:

Tell us what you think:

  1. How You Should Use Multiple H1s in HTML
    An in-dept look at the use of headings (h1-h6) and sections in HTML pages.
  2. How to improve your website's pagination
    Pagination can be a confusing thing to get right both practically and programmatically. I have put a lot of thought into this subject, and here I am giving you a few of the ideas I have been working with.
  3. Trailing Question Mark in URLs
    The best way to deal with a trailing question mark is probably just to make it a bad request, because it is a very odd thing to find in a request URL.
  4. Auto-Include Width and Height on Img Elements With PHP
    How to optimize image-loading and automatically include width and height attributes on img elements with PHP.
  5. HTTP Headers are Case-Insensitive
    HTTP headers are not case-sensitive, so we are free to convert them to all-lowercase in our applications.

More in: Web development