Inline CSS

Inline CSS is a method of applying styling directly to individual HTML elements using the “style” attribute within the HTML tag,allowing for specific styling of individual elements within the HTML document, overriding any external or internal styles.

Inline CSS Example:

This example shows the use of inline CSS with the help of an HTML document.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Inline CSS</title>
 
</head>
 
<body>
    <p style="color:#009900;
              font-size:50px;
              font-style:italic;
              text-align:center;">
        w3wiki
    </p>
 
</body>
 
</html>


Output:

Inline CSS Example Explanation:

In the above-example we are following these steps

  • Here we are using Inline CSS directly to the paragraph element.
  • Changes color to green, font size to 50px, style to italic, and alignment to center.
  • Styling overrides external and internal CSS.

Types of CSS (Cascading Style Sheet)

Cascading Style Sheets (CSS) is a language used to style web pages that contain HTML elements, defining how elements are displayed on webpages, including layout, colors, fonts, and other properties of the elements on a web page. CSS works by targeting HTML elements and applying style rules to define how they should be displayed, including properties like color, size, layout, and positioning.

There are three types of CSS which are given below:

Table of Content

  • Inline CSS
  • Internal or Embedded CSS
  • External CSS

Similar Reads

Inline CSS:

Inline CSS is a method of applying styling directly to individual HTML elements using the “style” attribute within the HTML tag,allowing for specific styling of individual elements within the HTML document, overriding any external or internal styles....

Internal or Embedded CSS:

...

External CSS:

Internal or Embedded CSS is defined within the HTML document’s