Types of Styles in CSS

There are 3 types of ways, you can declare CSS in your application.

  • Inline CSS
  • Internal CSS
  • External CSS

Now let’s understand each one by one.

Inline CSS declaration:

Inline css is used to apply unique style to HTML elements. and it uses the “style” attribute to declare the same.

<h2 style="background:#FF0000"> Welcome to Yo UV Code </h2>

Inline styles have the highest precedence.

Internal CSS declaration:

An internal CSS is similar to the inline CSS styles and it uses the style attribute/element inside the <head> tags.

     <style> h1 { color: #0000FF; font-size: 12px } </style>

As per the above code, it will set Blue font color and font size set to 12px to all the h1 tags in the page.

External CSS declaration:

An external CSS may be linked to HTML document through HTML’s LINK element.

LINK tag is placed in the document <head> tag.

LINK REL="stylesheet" HREF="Style.css" TYPE="text/css" MEDIA="screen"

attribute TYPE is optional and is used to specify media type for a CSS allowing browsers to ignore style-sheet types that they don’t support.

attribute MEDIA is also optional and specifies the medium or media to which the style-sheet should be applied.

External style-sheet should not contain any HTML tags like HEAD or STYLE. The style sheet should consist merely of rules of statements.



Leave a Reply