How To Insert CSS into an HTML document?
There are three ways to insert CSS into an HTML document. They are:
- External CSS
- Internal CSS
- Inline CSS
External CSS
In external CSS you have to create a separate css file, for example, style.css and then link this file to html document using <link> tag inside <head> section of an HTML document. The code is
<link rel="stylesheet" href="style.css">
syntax:
/*
<link rel="stylesheet" href="filename.css">
*/
Internal CSS
In internal CSS, CSS code is written inside the <style> tage inside <head> section of an HTML document. For example:
<head>
<style>
body{
background-color: red;
font-family: arial;
</style>
</head>
Syntax
/*
<head>
<style>
-------------------------
-------CSS Code-------
--------------------------
</style>
</head>
*/
Inline CSS
In Inline CSS, CSS code is written in the 'style' attribute of any single element. It is used to provide a unique style to an element or tag.
For example:
<p style="color:red;">This is paragraph</p>
Syntax:
/*
<tagname style="----css code----"> Content</tagname>
*/
Note:
Inline style has the highest priority over External and Internal CSS.