🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

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

Reading time 3 min
Published Sep 4, 2016
Updated Jan 21, 2020

TL;DR — There are three ways to link CSS to HTML, and this tutorial introduces the inline CSS styling method. After reading this article, you will know how to use HTML style attribute in your code. Here is an illustration of all three ways:


Inline CSS

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.

Example
<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.

DataCamp
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
Udacity
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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.