Connect with us
There are three ways to add or use css in html file.
1 External css
2 Internal css
3 inline css
When creating a separate css file to apply css to an html document file, it is called external css, in this, write the code of css and save this file by giving a .css extension with file name in html file. Linking the file under the <head> tag cannot use the external css without linking the css file to the html document file, so it is necessary to link it.
Note: - Put html and css file in same folder
Example 1 : index.html
|
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h4>heading 4</h4> <p>paragraph 1</p> </body> </html> |
Example 1.2 : mystyle.css
|
h4{color: green;} p{color: red;} |
output
paragraph 1
No separate file is created to apply css to an html document file, whichever html document file has to be applied to css, the code of css for that file is between <style> and </style> tag within the same file. Let's write it inside the head tag. This one html file contains the code of both html and css so there is no need to link any file in it.
Example 2
|
<!DOCTYPE html> <html> <head> <style> h4{color: green;} p{color: red;} </style> </head> <body> <h4>heading 4</h4> <p>paragraph 1</p> </body> </html> |
Output
paragraph 1
To apply css to an html document file, no separate file is created, for whichever html document file you want to apply css, the code of css for that file is written in the same file as the html element in which css is to be applied. Writing the css code using the style attribute in the opening tag is called inline css. This one html file contains both html and css code so there is no need to link any file in it.
Example 3
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <h4 style="color:green;">heading 4</h4> <p style="color:red;">paragraph 1</p> </body> </html> |
Output
paragraph 1
You can apply external, internal and inline css together in any one html file.
Example 4
|
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h2 { color: blue; } </style> </head> <body> <h4>heading 4</h4> <p>paragraph 1</p> <h2>heading 2</h2> <h3 style="color: red;">heading 3</h3> </body> </html> |
File name : mystyle.css
|
h4{color: green;} p{color: red;} |
Output
paragraph 1
heading 3
