External CSS
Now we change the background color on our website. But the problem is that the background color is only changed on a single page. if we have more than 2 pages it doesn't change the bg-color of another page. So let's check out our external CSS.
External CSS:
First, we can create a new file called styles.css in our folder. All the CSS files are saved into .css and now we connect this css file to our index.html.
Now we create a link in index.html under the head section and under href we add the address of css file. and then we cut the style section and paste it into css file and remove only the style tag under css file.
For Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h4>Hello World</h4>
<p>Hello My name is <strong>Junaid</strong> and i'm 15 year old.</p>
</body>
</html>
CSS:body {
background-color: #68f3f3
}
p {
color: blue;
}
And now copy HTML code and paste into HTML file and then copy the second clipboard and paste into CSS file and now you can refresh your website nothing else do. And if you make two or more two pages our CSS code applies to all pages. This is called external css.
Comments
Post a Comment