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.