► Give title to the web page as 'Sacred Heart Convent School'.
> Set the background colour of the web page to PeachPuff.
► Insert horizontal rule of Green color.
> Using Style sheet rules, apply Heading level 1 to 'Sacred Heart Convent Sr. Sec. School'.
Top align and capitalize the text, set font-size to 500% and Font-family to Book Antiqua.
Place the logo of the school on the left side of the heading.
Insert another green coloured horizontal rule.
Using Style sheet rules, apply Heading level 2 to 'OUR VISION'. Set the text in uppercase, underlined with
background color'Maroon', and text color'White'. Use appropriate Font size.
Italicise the paragraph text and set the font to 'Times New Roman'.
Insertone good image of the school.
Apply the same settings to the heading, 'INSIGHT'as used in the previous heading 'OUR VISION'.
Apply border to the paragraph text with the border color-Olive and style as Ridge. The text of this paragraph
should be capitalised.
Learning
famutart with Kips (145)
Answers
Explanation:
A horizontal rule is commonly used as content or section divider. As a horizontal rule the <hr> element is used. Originally the <hr> element was styled using attributes. Nowadays, in HTML5, the <hr> element tells the browser that there is a paragraph-level thematic break. Let’s see how to style the <hr> element with CSS below.
Change the size and position of a horizontal rule¶
The <hr> element is styled with CSS rules instead of attributes. Change the width of the horizontal line by setting the width property and then center it using the margin property.
Example of changing the width and position of a horizontal rule:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Center Horizontal Line</h1>
<hr />
</body>
</html>
Try it Yourself »
Result¶
If you want to change the thickness, or height of your horizontal line, add the height property to your <hr> style. In this case, you can also set the background-color property for the thick horizontal line.
Example of changing the height and background color of the horizontal rule:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {