Avoiding Inline Styles for CSS Design

Cascading Style Sheets has become the standard way to style and layout websites. Designers use stylesheets to tell a browser how a website should be displayed in terms of look and feel, covering such factors as color, spacing, fonts and lots more.

CSS styles deploy in two ways:

• Inline — within the coding of the web page itself, on an individual, element-by-element basis
• In a standalone CSS document, to which the website is linked

Read More

Understanding the 3 Types of CSS Styles

By Jennifer Kyrnin

Best Practices for CSS

"Best practices" are the methods of designing and building websites that have proven to be the most effective and to give the most return for the work involved. Following them in CSS in web design helps websites look and function as well as possible. They've evolved over the years along with other web languages and technologies, and the standalone CSS stylesheet has become the preferred method of use.

Following best practices for CSS can improve your site in several ways:

• Separates content from design: One of the main goals of CSS is to remove design elements from HTML and place them in another location for the designer to maintain. This practice also serves to separate designers from developers so that each can focus on their areas of expertise. A designer doesn't have to be a developer to maintain the look of a website.
• Makes maintenance easy: One of the most overlooked elements of web design is maintenance. Unlike print materials, a website is never "one and done." Content, design, and function can and should evolve over time. Having the CSS in a central place, rather than sprinkled throughout the website, makes things much easier to maintain.
• Keeps your site accessible: Using CSS styles helps search engines and disabled individuals interact with your site.
• Keeps your site current longer: By using best practices with CSS, you're adhering to standards that have been proven stable but flexible enough to accommodate changes in the web design environment.

Inline Styles Are Not Best Practice

Inline styles, while they have a purpose, generally are not the best way to maintain your website. They go against every one of the best practices:

• Inline styles don't separate content from design: Inline styles are exactly the same as embedded font and other clunky design tags that modern developers rail against. The styles affect only the particular, individual elements to which they're applied; while that approach might give you more granular control, it also makes other aspects of design and development—such as consistency—more difficult.
• Inline styles cause maintenance headaches: When you're working with stylesheets, figuring out where a style is being set can be difficult. When you're dealing with a mixture of inline, embedded and external styles, you have many locations to check. If you work on a web design team or have to redesign or maintain a site built by someone else, then you're going to have even more trouble. Once you find the style and change it, you'll have to do so on every element on every page where it's been placed. That increases time and work budgets astronomically.
• Inline styles are not as accessible: While a modern screen reader or another assistive device may be able to handle inline attributes and tags effectively, some older devices can't, which can result in some strangely displayed web pages. Extra characters and text can affect how your page is viewed by a search engine robot, too, so your page doesn't do as well in terms of search engine optimization.
• Inline styles make your pages bigger: If you'd like every paragraph on your site to appear a certain way, you can do it once with six lines or so of code in an external stylesheet. If you do it with inline styles, however, you have to add those styles to every paragraph of your site. If you have five lines of CSS, that's five lines multiplied by every paragraph on your site. That bandwidth and load time can add up in a hurry.

The Alternative to Inline Styles Are External Stylesheets

Instead of using inline styles, use external stylesheets. They give you all the benefits of CSS best practices and are easy to use. Employed in this way, all the styles used on your site live in a separate document that is then linked to a web document with a single line of code. External stylesheets affect any document they are attached to. If you have a 20-page website in which each page uses the same stylesheet—which is typically how it's done—you can make a change to every one of those pages simply by editing those styles once, in one place. Changing styles in one spot is more convenient than searching for that coding on every page of your website. This flexibility makes long-term site management much easier.