Inline CSS: Learn to Use the CSS Inline and Style HTML Elements

Inline CSS: Main Tips

• The inline CSS helps you apply style rules to specific HTML elements.
• The style attribute specifies properties and values.
• The inline CSS is limited. For elaborate projects, you should consider other options: internal and external methods.

Introduction to Inline CSS

Inline CSS allows you to apply a unique style to one HTML element at a time. You assign CSS to a specific HTML element by using the style attribute with any CSS properties defined within it.

In the following example, you can see how to describe CSS style properties for an HTML <p> element in the same line of code.

We use a style attribute to assign CSS styling properties. In this particular case, color and value (blue) apply to the HTML <p> element.

<p style="color: blue;">This is a paragraph.</p>

Inline styles in CSS could be useful for previewing changes instantly or adding CSS rules to only one or two elements. When you don't have access to your .css file, knowing how inline style CSS works can be convenient.

Tip: use of inline CSS is not a recommendation. Combining CSS and HTML leads to messy code. Additionally, inline styles method is difficult to update.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Comparison of Inline, Internal and External

Another subject is whether the use of the CSS inline style improves website speed performance. Here are the main points when comparing the speed of all three options:

• Inlining of CSS means that the caching of styles does not occur. Therefore, if the lists of inlined CSS rules are lengthy, the browser will have to act on these rules every time users visit another page of a website.
• If the inlined CSS rules are not lengthy, the problem with caching does not matter.
• However, lists of CSS rules usually are long. Therefore, it is better to use external style sheets or internal CSS.
• The best solution to optimize website speed performance is to use CSS inline only for the essential CSS styles in HTML documents.
• You can optimize your website performance by using external stylesheets.

Inline CSS: Useful Tips

• Inline CSS styles will always override style properties determined in internal or external style sheets.
• Inline CSS does not style pseudo-elements and their -classes. For instance, you cannot style the states of a link, only the link.
• Make a note to only apply CSS inline styles for testing purposes during the production stage of your project.