In: Computer Science
You have been given a style sheet file containing several errors. Locate all of the errors and fix the file.
1. Go to the code2-4.html file and within the head section insert link elements linking the page to the code2-4_layout.css and code2-4.css files. Review the contents of the files.
2. Test the code2-4.css file in the CSS validator at the W3C website or with another validator of your choice. Make a note of the errors reported as a guide to debugging the page. There are six syntax errors in the CSS file. Fix all six errors you discover and then submit your work.
Last Step: View the page in your browser to verify that your page resembles Figure 2–57.
Files to be fixed:
code2-4.css
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 2
Coding Challenge 4
Author:
Date:
Filename: code2-4.css
*/
div {
background-color: rgb(255 171 171);
padding-size: 10px;
font-size: 1.2em;
}
aside {
background-color: rgb(209,227,107);
padding: 0 20px;
}
aside h1 {
font-size: 1.9em;
font: Segoe, Verdana, sans-serif;
line-height: 0.8em;
margin: 20px 0 0 0;
}
aside h2 {
margin-top: 5px;
font-family: Segoe, Verdana, sans-serif;
font-size: 1.2e;
}
aside p {
font-size: 1.1em;
text-ident: 1em;
}
aside p:first of type {
text-indent: 0em;
}
code2-4.html
<!doctype html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 2
Coding Challenge 4
Author:
Date:
Filename: code2-4.html
-->
<meta charset="utf-8">
<title>Coding Challenge 2-4</title>
</head>
<body>
<header><img src="code2-4_img.png" alt="The Sci-Fi Control Room" /></header>
<div>
<p>Welcome to the Sci-Fi Control Room</p>
<p>I started this blog in order to share my latest fiction with my
readers and to post reviews and comments on the world of Science Fiction
and Fantasy. From time to time, we'll have interviews with other
great authors in the Sci-Fi and Fantasy markets as well as give you
the inside scoop on upcoming conventions.</p>
<p>But this is also your forum to share your ideas and enthusiasm.
You can send me your comments and ideas; but please do NOT send me your
fiction. I'm not a publisher and I will NOT read them. This is the
Sci-Fi Control Room and I'm the one in control.</p>
</div>
<aside>
<h1>The Star Tunnel</h1>
<h2>by Kei Yang</h2>
<p>In her latest science-fiction novel, Yang explores the idea of
quantum tunneling and a machine built to instantly transport the rider
to the end of the universe. Teleportation is an old sci-fi concept and
one that I thought had been wrung dry. Yang has proven me wrong.
Reminiscent of the best of Niven's teleportation series stories from
the 70's, Yang is concerned, not so much with the technology of teleportation,
as much as its effect on society, morals, and religion.</p>
<p>To be sure, this is not just philosophical track masquerading as a
SF novel (though Yang's always-fascinating philosophical ruminations are
here in abundance). Fans of hard-hitting action-packed SF will have plenty
to entertain them and Yang pulls several rabbits out of her hat to
surprise any reader. I thought I knew all of the tricks of the trade
and Yang's denouement surprised even me.</p>
<p>My only complaint is that the novel begins slowly with a bit too much
emphasis on the technobabble associated with teleportation. Why do some
authors insist on turning whole chapters into a physics thesis? However
don't skip the second chapter or else you'll miss a hilarious misadventure
involving two teleportation devices and a rather annoying cat. </p>
</aside>
</body>
</html>
Correct Syntax of CSS
Line 3 : background-color: rgb(255,171,171);
Line 5 : padding :10px;
Line 23 : font-family: Segoe, Verdana ,sans-serif;
Line 37 : font-size : 1.2em;
Line 45 : text-indent :1em;
Line 49 : aside p:first_of_type {}
CSS Files links attached in the html code below :
<!doctype html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 2
Coding Challenge 4
Author:
Date:
Filename: code2-4.html
-->
<meta charset="utf-8">
<title>Coding Challenge 2-4</title>
<!---CSS Files ------>
<link rel="stylesheet" href=" code2-4.css">
<link rel="stylesheet" href="code2-4_layout.css">
</head>
<body>
<header><img src="code2-4_img.png" /></header>
<div>
<p>Welcome to the Sci-Fi Control Room</p>
<p>I started this blog in order to share my latest fiction with my
readers and to post reviews and comments on the world of Science Fiction
and Fantasy. From time to time, we'll have interviews with other
great authors in the Sci-Fi and Fantasy markets as well as give you
the inside scoop on upcoming conventions.</p>
<p>But this is also your forum to share your ideas and enthusiasm.
You can send me your comments and ideas; but please do NOT send me your
fiction. I'm not a publisher and I will NOT read them. This is the
Sci-Fi Control Room and I'm the one in control.</p>
</div>
<aside>
<h1>The Star Tunnel</h1>
<h2>by Kei Yang</h2>
<p>In her latest science-fiction novel, Yang explores the idea of
quantum tunneling and a machine built to instantly transport the rider
to the end of the universe. Teleportation is an old sci-fi concept and
one that I thought had been wrung dry. Yang has proven me wrong.
Reminiscent of the best of Niven's teleportation series stories from
the 70's, Yang is concerned, not so much with the technology of teleportation,
as much as its effect on society, morals, and religion.</p>
<p>To be sure, this is not just philosophical track masquerading as a
SF novel (though Yang's always-fascinating philosophical ruminations are
here in abundance). Fans of hard-hitting action-packed SF will have plenty
to entertain them and Yang pulls several rabbits out of her hat to
surprise any reader. I thought I knew all of the tricks of the trade
and Yang's denouement surprised even me.</p>
<p>My only complaint is that the novel begins slowly with a bit too much
emphasis on the technobabble associated with teleportation. Why do some
authors insist on turning whole chapters into a physics thesis? However
don't skip the second chapter or else you'll miss a hilarious misadventure
involving two teleportation devices and a rather annoying cat. </p>
</aside>
</body>
</html>