Engage Web logo - horizontal-resized


An inline style by any other name…

An inline style by any other name…

Back in the good old days of the net there was a commonly used technique called ‘inline styles’. This involved the web designer adding a style attribute to the tag and putting in the values they needed. For instance:

<div style=”background:#dddddd; color:#222222;”></div>

This was quickly deemed to be an extremely cumbersome way of styling markup, and the inclusion of a CSS file and properly-labelled elements via classes and divs became the norm. Meaning the designer could take their div, assign it with an ID or class and then have it referenced in the CSS file, making it easier to make sweeping changes to the site without having to edit each individual element in the code.

Now this has fared designers well for a great number of years and only in the most extreme circumstances would any respected web designer think of using inline styles – it has to be justified. A common use of inline styles then became a common indicator that a different designer may be needed. However, it’s difficult to ignore the signs that this technique may be creeping back into play. This is one example that will have most designers cringing:

<div class=”font-family-arial  font-size-normal  float-left color-red ”></div>

While Twitter’s bootstrap uses a similar method, it’s done in a semantic way that it is only used for defining specific qualities of an element. Such as:

<button class=”btn warning”></div>

With this, the designer can change the class of warning to be any colour and style they like – with the same applying to the class of btn. The class is not defining how the element should look, as it is in the bad example (font-family-arial, color-red).

It seems that the inliners are slowly coming back into existence, shrouded in the cover of classes, and this may be something to keep an eye out for.

Latest posts by Steven (see all)

Get in touch


    Book a consultation with Engage Web

    Book a consultation with Engage Web

    Sorry to interrupt, but would you like to download our FREE Social Media Calendars?

    Social Media Calendar Product Mock Up for web

     You can use them to plan your social media and content in advance, saving you time and getting better results. When you use our social media calendars, you'll always know what's trending and what to post about for your business.