External Style Sheets There are three ways to apply CSS to HTML: inline styles, embedded style sheets and external style sheets. In Lab 1, we used an embedded style sheet to style the index.html file. Your first job is to replace the embedded style sheet in index.html with an external style sheet. To do this you need to first create a file called style.css in Week_8_Lab/Styles. Move all the style rules from index.html to style.css.
what I have so far
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Lab1</title>
<style>
body { background-color: #556271; margin: 0 10%; font-family: sans-serif; color: white;}
h1 {color: #FE6A67;text-align: center; font-weight: normal; text-transform: uppercase; border-bottom: 1px solid #D4DCCD; margin-top: 30px;}h2 {font-size: 1em;}
</style>
</head>
<body>
<h1><img>
<br><img src="21.png">
<p>Amet Justo Donec</p>
</h1>
<p>Cursus EgetPurus sit amet volutpat consequat mauris nunc congue nisi vitae. Suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget sit.<p/>
<h2>Cursus Eget</h2>
<p>Purus sit amet volutpat consequat mauris nunc congue nisi vitae. Suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget sit.<p/>
<h2>Diam</h2>
<p>Urna condimentum mattis pellentesque id nibh tortor. Id aliquet lectus proin nibh nisl condimentum id venenatis. A condimentum vitae sapien pellentesque habitant.<p/>
<h2>Aliquam Sem Fringilla</h2>
<p>Pellentesque, NecEst velit egestas dui id ornareEst ultricies integer quis auctor elit<p/>
</body>
</html>
We have to create an external CSS file and replace the embedded style sheet with an external style sheet.
So, now we just have to put all embedded style code to the external style sheet style.css file.
then, we have to link that file to our index.html file.
Syntax of CSS style sheet file to link style sheet:
|
<link rel="stylesheet" href="file_path" />
|
Note: we can add <link> tag only inside of <head> section.
Just this step will link the external CSS file to our index.html file & now whatever changes we make in the external CSS file will automatically apply in our index.html file. So, we can do separate CSS changes and it will help in to do fast development which is an advantage of the external Style sheet.
Step by step
Solved in 4 steps with 1 images
