loader image

Blog

Design Presentational Attributes vs Inline Styles

Presentational attributes are very easy to override and inline styles can only be override with !important keyword in CSS.

Presentational Attributes

<img src="path/to/image.jpg" width="450" height="350" />
OR
<table width="100%">
   <tr>
      <td>Some text</td>
   </tr>
</table>

The presentational attributes on the <img /> can be override easily with CSS like below:

/* The style below will override the Presentational Attributes */
img {
   width: 550px;
   height: 450px;
}

table {
   width: 100%;
}

Inline Styles

<img src="path/to/image.jpg" style="width: 450px; height: 350px;" />
OR
<table style="width: 100%;">
   <tr>
      <td>Some text</td>
   </tr>
</table>

If we want to override the Inline Styles we have to use !important keyword in our css with CSS rules.

/* The style below will override the Presentational Attributes */
img {
   width: 550px !important;
   height: 450px !important;
}

table {
   width: 100% !important;
}

There are other attributes as well which you can use; for example we can use align attribute on <img /> tag. With these attributes we can keep the images or tables or SVGs proportionate specially on print versions. Specially the sizing attributes are very useful.

There are many Presentational Elements & Attributes available, To check all the presentational elements and attributes.

It also makes good sense to add these attributes, especially sizing ones on SVG to avoid FOUSVG.

Author Details