How do I turn the following HTML code to an internal stylesheet? index.html <!DO
ID: 3806235 • Letter: H
Question
How do I turn the following HTML code to an internal stylesheet?
index.html
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page">
<section id="articles">
<div class="line"></div>
<article id="article1">
<h2>Homer Simpson</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<a href="#"><img src="http://kengeddes.com/images/homer.jpg" /></a>
</figure>
<h3>Education</h3>
<ul>
<ol >
<li> School of Hard Knocks
<ul>
<li>Bachelor of Science in Everything</li>
</ul>
</li>
<li> Santa Monica College
<ul>
<li>Associate of Science in Web Programming</li>
<li>AA in Rock Music Appreciation</li>
</ul>
</li>
<li>University of California at Los Angeles</li>
</ol>
</ul>
<h3>Worldy Experience</h3>
<ul>
<li>Springfield Nucular Power Plant- not sure what I'm suppose to do</li>
<li>Springfield Donut Barn master tasteür. I like the ones with the pink icing </li>
<li>Springfield Pork Rind Factory- senior taster </li>
<li>Duff Beer Brewery- taster trainee; supervisor- José Antonio González </li>
</ul>
<h3>Other Skills</h3>
<p>Xhtml, HTML5</p>
<h3>The following data will be posted to my server at homerswebsight.com</h3>
<div class= "last-div"><label>Username : </label><input type="text" name="username"><br/><br/>
<textarea>"I think, therefore I drink." - Homerism #73. Or, supply your own wisdom here, if you dont think you're so smart.</textarea><br/><br/>
<label>How much do you like me ?</label>: <select><option>not so much</option><option>You are OK</option><option>not so much</option></select><br/><br/>
<input type="submit" name="submit">
<input type="reset" name="reset">
</div>
</div>
</article>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<reference available upon request>
<p>(c) 2012 Homer Simpson Kingdom & Universe, Inc</p> <br/><br/>
<a href="#" class="up">TOP</a>
</footer>
</section>
</body>
</html>
Styles.css
*{
/* Universal reset: */
}
header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}
body{
/* Setting the default text color, size, page background and a font stack: */
font-size:0.825em;
background-color:#ABD9E5;
font-family:Arial, Helvetica, sans-serif;
}
/* Hyperlink Styles: */
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
/* Headings: */
h1{
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}
h3{
color: black;
font-size: 18px;
}
h2{
font-size:2.2em;
font-weight:normal;
letter-spacing:0.01em;
text-transform:uppercase;
text-align: center;
background-color: #FFC1CC;
margin-top: 18px;
}
p{
line-height:1.5em;
padding-bottom:1em;
}
.line{
/* The dividing line: */
}
article .line{
/* The dividing line inside of the article is darker: */
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}
footer .line{
margin:2em 0;
}
nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;
border:1px solid #FCFCFC;
-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}
/* The clearfix hack to clear the floats: */
.clear:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* The navigation styling: */
nav ul li{
display:inline;
}
nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}
nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}
/* Article styles: */
#page{
width:960px;
margin:0 auto;
position:relative;
}
article{
/*background-color:#213E4A;
margin:3em 0;
padding:20px;
text-shadow:0 2px 0 black;*/
}
figure{
float:right;
height:150px;
margin-right:80px;
overflow:hidden;
width:120px;
}
figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}
/*figure img{
margin-left:-60px;
}*/
/* Footer styling: */
.last-div{float:left; width:100%;padding: 5px; background-color: #FFC1CC;}
footer{
margin-bottom:30px;
font-size:0.825em;
}
footer p{
margin-bottom:-2.5em;
position:relative;
}
footer a,footer a:visited{
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}
footer a:hover{
text-decoration-line: underline;
}
footer a.up{
float:left;
}
Explanation / Answer
Inline stylesheet is that in which html and css are embedded into single file i.e html and cascading style will be included in single file. The code is given below:-
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
*{
/* Universal reset: */
}
header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}
body{
/* Setting the default text color, size, page background and a font stack: */
font-size:0.825em;
background-color:#ABD9E5;
font-family:Arial, Helvetica, sans-serif;
}
/* Hyperlink Styles: */
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
float:left;
}
/* Headings: */
h1{
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}
h3{
color: black;
font-size: 18px;
}
h2{
font-size:2.2em;
font-weight:normal;
letter-spacing:0.01em;
text-transform:uppercase;
text-align: center;
background-color: #FFC1CC;
margin-top: 18px;
}
p{
line-height:1.5em;
padding-bottom:1em;
}
.line{
/* The dividing line: */
}
article .line{
/* The dividing line inside of the article is darker: */
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}
footer .line{
margin:2em 0;
}
nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;
border:1px solid #FCFCFC;
-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}
/* The clearfix hack to clear the floats: */
.clear:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* The navigation styling: */
nav ul li{
display:inline;
}
nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}
nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}
/* Article styles: */
#page{
width:960px;
margin:0 auto;
position:relative;
}
article{
/*background-color:#213E4A;
margin:3em 0;
padding:20px;
text-shadow:0 2px 0 black;*/
}
figure{
float:right;
height:150px;
margin-right:80px;
overflow:hidden;
width:120px;
}
figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}
/*figure img{
margin-left:-60px;
}*/
/* Footer styling: */
.last-div{float:left; width:100%;padding: 5px; background-color: #FFC1CC;}
footer{
margin-bottom:30px;
font-size:0.825em;
}
footer p{
margin-bottom:-2.5em;
position:relative;
}
footer a,footer a:visited{
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}
footer a:hover{
text-decoration-line: underline;
}
footer a.up{
float:left;
}
</style>
</head>
<body>
<section id="page">
<section id="articles">
<div class="line"></div>
<article id="article1">
<h2>Homer Simpson</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<a href="#"><img src="http://kengeddes.com/images/homer.jpg" /></a>
</figure>
<h3>Education</h3>
<ul>
<ol >
<li> School of Hard Knocks
<ul>
<li>Bachelor of Science in Everything</li>
</ul>
</li>
<li> Santa Monica College
<ul>
<li>Associate of Science in Web Programming</li>
<li>AA in Rock Music Appreciation</li>
</ul>
</li>
<li>University of California at Los Angeles</li>
</ol>
</ul>
<h3>Worldy Experience</h3>
<ul>
<li>Springfield Nucular Power Plant- not sure what I'm suppose to do</li>
<li>Springfield Donut Barn master tasteür. I like the ones with the pink icing </li>
<li>Springfield Pork Rind Factory- senior taster </li>
<li>Duff Beer Brewery- taster trainee; supervisor- José Antonio González </li>
</ul>
<h3>Other Skills</h3>
<p>Xhtml, HTML5</p>
<h3>The following data will be posted to my server at homerswebsight.com</h3>
<div class= "last-div"><label>Username : </label><input type="text" name="username"><br/><br/>
<textarea>"I think, therefore I drink." - Homerism #73. Or, supply your own wisdom here, if you dont think you're so smart.</textarea><br/><br/>
<label>How much do you like me ?</label>: <select><option>not so much</option><option>You are OK</option><option>not so much</option></select><br/><br/>
<input type="submit" name="submit">
<input type="reset" name="reset">
</div>
</div>
</article>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<reference available upon request>
<p>(c) 2012 Homer Simpson Kingdom & Universe, Inc</p> <br/><br/>
<a href="#" class="up">TOP</a>
</footer>
</section>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.