Presentation Attributes vs Inline Styles

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


This is a distinction worth knowing about. They look pretty similar. They can do some of the same things. But, one is very easy to override and the other is not.

Inline styles are likely a bit more familiar:
<div style=”width: 300px; height: 300px;”>
Inline styles on an HTML element.
</div>
SVG can do that too:
<svg style=”width: 300px;”>
Inline styles on an SVG element.
</svg>
But SVG has this concept of presentational attributes as well, meaning we could do this:
<svg width=”300px” height=”300px”>
Presentational attributes on an SVG element.
</svg>
The difference?
Presentational attributes are very easy to override in CSS
Any CSS at all will do.
/* These styles will override the presentational attributes */
svg {
width: 250px;
height: 250px;
}
Inline styles can only be override by !important styles in CSS
The only way to override an inline style is by using !important rules:
svg {
width: 250px !important;
height: 250px !important;
}
A crude diagram to drive the point home

This does actually come up, I find, in day-to-day development. For example, Illustrator asks how you want to style exported SVG:

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

Presentation Attributes vs Inline Styles is a post from CSS-Tricks
Source: CssTricks

Posted on December 23, 2016 in Austin Web Designer, css, development, Drive, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, html, The, Web Design Services

Share the Story

Back to Top