In: Computer Science
An article describing the fresco School of Athens by the Renaissance painter Raphael is shown in Figure 2–56. Much of the HTML and CSS code has been created for you. Complete the web page design by adding the missing CSS styles.
Do the Following:
1.Go to the code2-3.html file and within the head section insert link elements linking the page to the code2-3_layout.css and code2-3.css files. Review the contents the files.
2.Open the code2-3.css file. For the html element, set the left padding space to 30 pixels and set the background color to the value hsla(40, 80%, 75%, 0.5).
3. Display all h1 and h2 headings in a Helvetica, Arial, or sans-serif font.
4. For all h1 headings:
5. For all h2 headings:
6. For all inline images, set the top and right margins to 0, the bottom margin to 10px, and the left margin to 20px.
7. For all paragraphs, set the font size to 1.4em and set the text indent to 1em. For the first paragraph, using the first-of-type pseudo-class, set the text indent to 0. For the first line of the first paragraph, set the font variant to small-caps.
***Use the p:first-of-type::first-line pseudo-class and pseudo-element as the selector.***
Pages to be edited
Code2-3.css
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 2
Coding Challenge 3
Author:
Date:
Filename: code2-3.css
*/
Code2-3.html
<!doctype html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 2
Coding Challenge 3
Author:
Date:
Filename: code2-3.html
-->
<link href="code2-3_txt.css" rel="stylesheet" />
<meta charset="utf-8">
<title>Coding Challenge 2-3</title>
</head>
<body>
<article>
<h1>The School of Athens</h1>
<h2>By Raphael</h2>
<img src="code2-3_img.png" alt="School of Athens" />
<p>The <em>School of Athens</em>, considered by many to be Raphael's
masterwork, is a fresco representing the greatest minds of
classical antiquity, gathered together to share their
thoughts and beliefs. The fresco was painted between 1509 and 1511
as a part of a commission to decorate the rooms of the
Stanze di Raffaello in the Apostolic Palace in the Vatican.</p>
<p>The two center figures, Aristotle and Plato, are key philosophers
in the development of Western thought. Plato, with his belief in a
higher realty, points skyward. Within his hands, Plato holds
the <cite>Timaeus</cite> — one of Plato's famous dialogs on
the nature of reality and time. In contrast, Aristotle points
downward, indicating that he is grounded in a reality that can be
experienced by sight and touch. In his hands, he holds his
book <cite>Ethics</cite>, a tome that emphasizes the need for
justice, friendship, and ethical government.
</p>
<p>Other famous philosophers fill the pseudo-architecture. In many cases,
when Raphael did not have classical images to draw upon, he used
images of contemporary figures to stand in for their classical
counterparts. Look for a portrait of Michelangelo on the left-forward
steps, his thoughts concerned with sketching and art.</p>
</article>
</body>
</html>
Code_2-3.html
<!doctype html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 2
Coding Challenge 3
Author:
Date:
Filename: code2-3.html
-->
<link href="code2-3_layout.css" rel="stylesheet" />
<link href="code2-3.css" rel="stylesheet" />
<meta charset="utf-8">
<title>Coding Challenge 2-3</title>
</head>
<body>
<article>
<h1>The School of Athens</h1>
<h2>By Raphael</h2>
<img src="code2-3_img.png" />
<p>The <em>School of Athens</em>, considered by many to be Raphael's
masterwork, is a fresco representing the greatest minds of
classical antiquity, gathered together to share their
thoughts and beliefs. The fresco was painted between 1509 and 1511
as a part of a commission to decorate the rooms of the
Stanze di Raffaello in the Apostolic Palace in the Vatican.</p>
<p>The two center figures, Aristotle and Plato, are key philosophers
in the development of Western thought. Plato, with his belief in a
higher realty, points skyward. Within his hands, Plato holds
the <cite>Timaeus</cite> — one of Plato's famous dialogs on
the nature of reality and time. In contrast, Aristotle points
downward, indicating that he is grounded in a reality that can be
experienced by sight and touch. In his hands, he holds his
book <cite>Ethics</cite>, a tome that emphasizes the need for
justice, friendship, and ethical government.
</p>
<p>Other famous philosophers fill the pseudo-architecture. In many cases,
when Raphael did not have classical images to draw upon, he used
images of contemporary figures to stand in for their classical
counterparts. Look for a portrait of Michelangelo on the left-forward
steps, his thoughts concerned with sketching and art.</p>
</article>
</body>
</html>
Code_2-3.css
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 2
Coding Challenge 3
Author:
Date:
Filename: code2-3.css
*/
html{
padding-left: 30px;
background-color: hsla(40, 80%, 75%, 0.5);
}
h1,h2{
font-family: Helvetica, Arial, sans-serif;
}
h1{
font-size: 3em;
line-height: 1em;
margin-bottom: 0;
}
h2{
margin-top: 0;
font-style: italic;
font-weight: normal;
}
img{
margin: 0 0 10px 20px;
}
p{
font-size: 1.4em;
}
p:first-of-type{
text-indent: 0;
}
p:first-of-type::first-line{
font-variant: small-caps;
}