How to Use CSS

There are three ways to use CSS in HTML documents that is.

Internal CSS
External CSS
Inline CSS

1) Internal CSS

Internal CSS are defined within the <style> tag, inside the <head> section of an HTML page:

Syntax:-

 <style>
     .........
     ........
 </style>

Example:-

  <!DOCTYPE html>
<html>
<head>
<style>
    body {background-color: YellowGreen;}
    h1 {color: maroon;margin-left: 40px;}
   .int{color:red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p class="int">This is a paragraph.</p>
</body>
</html>

Test it Now

2) External CSS

One external file is used for multiple html pages.

Each HTML page must include a external style sheet file inside the head section.

You can write all the CSS code in a css file. Its extension must be .css for example mystyle.css.

Syntax:-

 <style>
     <link rel="stylesheet" href="mystyle.css">
 </style>

Example:-

File Name:- Hello.html

Note:- First Open Notepad write only HTML Code and save Hello.html

  <!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <h1 id="p">This is a heading</h1>
    <p class="k">This is a paragraph of text.</p>
</body>
</html>

File Name:- mystyle.css

Note:- Then Open again Notepad write the Only CSS code and save mystyle.css then link on HTML page in head section.

#p{color:red;}
.k{color:blue;}

Test it Now

3) Inline CSS

style tag is used to a single elements.

Syntax:-

Test it Now

Next TopicCSS Comments

← prev next →

CSS Tutorials

CSS Properties

How to Use CSS

1) Internal CSS

Example:-

2) External CSS

Example:-

3) Inline CSS