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.

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

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.

 

 

Join Discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.