How to change the css from inline to external <!DOCTYPE html> <html> <head> <met
ID: 3591525 • Letter: H
Question
How to change the css from inline to external
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mosca</title>
<style type="text/css">
body {
text-align: center;
width: 80%;
margin-left: 125px;
font-family:Sans-serif;
line-height: 1.5em;
}
#container {
padding-left: 237px;
padding-right: 229px;
margin-bottom: 14px;
}
#container1 {
padding-left: 237px;
padding-right: 229px;
margin-bottom: 35px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
#container {
overflow: hidden;
}
#container1 {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
p {
color: #555;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: black;
text-decoration: none;
font-size: small;
}
#header{
font-size: large;
padding: 1.3em;
background: #BCCE98;
}
#header1{
font-size: large;
padding: 0.3em;
background: #2da9d2;
}
#left {
background: #fff;
}
#right {
background: #5396ac;
}
#center {
background: #5396ac;
}
#container .column {
padding-top: 1em;
}
</style>
</head>
<body>
<div id="header"><p>Resume of Joseph Mosca</p>
<div id="header1"><p>Work Experience</p>
<div id="container">
<div id="center" class="column">
<article>
<h5>Pizza Shop</h5>
<p><a href="#">Pizza Shop Site</a></p>
</article>
</div>
<nav id="left" class="column">
<h5>Other Pages</h5>
<ul>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Educational Experience</a></li>
<li><a href="#">Related Awards and Skills</a></li>
</ul>
</nav>
<div id="right" class="column">
<h5>Random NYS Agency</h5>
<p><a href="#">Agency Site</a></p>
</div>
</div>
<div ><a href="jmosca@albany.edu">Email Me!</a></div>
</div>
</div>
</body>
</html>
Explanation / Answer
steps:
1. create a file say 'style.css' and copy the content between style tags and paste in the created css file i.e. style.css
2. save the css file in the same location where the HTML file is saved, if not then provide the proper destination folder address in the hyperlink part in the link tag which is shown below.
2. remove the css code from the HTML code including the style tags.
3. now in the head tag section, write a link tag descripted as follows-
<head>
/* here if you are saving 'style.css' at the same place where the HTML file is you just need to write the folowing code*/
<link rel="stylesheet" href="style.css" />
/*if you want to keep the css file in a different folder named say 'CSS' the in that case you need to provide proper address of the destination folder as shown below*/
<link rel="stylesheet" href="CSS/style.css" />
</head>
*NOTE:- Prefer to keep the css file in the same location where you save the HTML file.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.