use external CSS to style elements of a webpage. Write an HTML document that has
ID: 3810590 • Letter: U
Question
use external CSS to style elements of a webpage.
Write an HTML document that has all the following components. Your source code should include:
a DTD
opening and closing html tags
the lang attribute to set the language of the entire document to English
a head section
a title
a meta tag to define the character set as UTF-8
a body section
a level 1 heading
a div section which includes two paragraphs
Use external CSS to do the following:
Specify a background color for the entire document.
Specify a different text color for the level one heading.
Center the text in the level one heading.
Specify a text color for the paragraphs, different from any of the previous ones.
Put a border around the text in the div, with the following properties:
Make the width of the border 5 pixels
Specify a color for the border (make it a different color from any of the previous ones)
Specify the style of the border to be either solid, dotted, or dashed (your choice)
Specify 25 pixels of padding
Left and right margins of 150 pixels each
Use hexadecimal color codes for all the colors in this assignment. You may use any colors you like, but test your code in a browser to make sure that the text is clearly visible on the page. If it isn't, change the colors.
Make sure that your document has all the proper closing tags that go with the opening tags.
Explanation / Answer
test.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Basic HTML program with external stylesheets</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h1>Welcome to our site</h1>
<div class="main">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html
style1.css
body{background-color: #ffcccc;}
h1{text-align: center;color: #ff0075;}
p{color: #0000ff;}
.main{border: 5px solid #8000ff;padding: 25px;margin-right: 150px; margin-left: 150px;}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.