Home >>CSS Tutorial >How to add CSS
How to add CSS
How to add CSS
In HTML pages CSS is added to format the document according to info in the stylesheet. There are three ways to put CSS in HTML documents.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
It may be used for a single element to apply a unique style.
To apply the CSS, add attribute style to the relevant element. Any type of CSS property can contain by style attribute.
Let's take an example of Inline CSS:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a H1 heading</h1> <h2 style="color:red;">This is a paragraph.</h2> </body> </html>
This is a H1 heading
This is a paragraph.
Internal CSS
It may be used for a single HTML page to apply a unique style.
For applying Internal CSS style, add element and execute your internal style inside the head section.
Let's take an example of internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: dodgerblue;
}
h1 {
color: #000;
margin-right:-40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a paragraph.</h2>
</body>
</html>
This is a heading
This is a paragraph.
External CSS
It is used to apply CSS on more than one page or all pages and by changing just one file, you can change the look of an entire website.
You can also add external style sheet file inside the <link> element under the head section.
External CSS code is written in a CSS file. Its extension must be .css for example style.css
Let's take an example of internal CSS:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <h2>This is a paragraph.</h2p> </body> </html>