What is External Stylesheet?
- By Using External Style Sheet , you can change the look or design of an website by changing only one file.
- External means to create a CSS outside the Html file .
- <link > tag is used .
- The Link Tag write in the Head section ie
- <head> external stylesheet </head>
- <head>
<link rel="stylesheet" type="text/css" href="externalstylesheet.css">
</head> - In external Stylesheet not contain any HTML Tag.
- Attribute rel will contain the value stylesheet .
- href will contain the location of the css file.
- we create a CSS File and Save (dot) .CSS extension
Example:
1 Open a Notepad and Create a CSS Page , save by style.css
body {
background-color:blue;
}
h1 {
color: red;
margin-left: 20px;
}
h2 {
Color:pink;
}
save-as style.css.
2 Open another Notepad , write this below Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> HELLO H1 is red </h1> <br>
<h2> HEllo H2 is pink color </h2>
</body>
</html>
save the externalstyle.html
Output:
NOTE
IF we change in style.css file then automatically change the output See Below
body {
background-color:skyblue;
}
h1 {
color: black;
}
h2 {
Color:red;
}
Output:
