”;
In this chapter, we will learn another way of designing the layout of a page. In the last chapter, we have used style sheet to apply the styles to header, footer, etc. but you can also specify the styles in HTML page itself without using an additional style-sheet.
This is not the recommended way to design a layout, however just for understanding purpose, we will cover this technique here. Try to follow the steps given below.
Step 1 − Let’s add an HTML page and call it layoutdemo.html
Step 2 − Now add the <div> tag from the Toolbox.
Step 3 − In the Apply Styles panel, click on the New Style…
Step 4 − When you select the Current page option from “Define in” dropdown then the style will be saved in the same HTML page. Set the Font for your page and then go to the Background category.
Step 5 − Set the color for your Background. You can also set the Border, Box, and Position categories and then click OK.
layoutdemo.html
You can see that the style is added in the same HTML file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
<style type = "text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #800000;
background-color: #C0C0C0;
padding: 8px;
margin: 8px;
width: 90%;
}
</style>
</head>
<body>
<div id = "container"></div>
</body>
</html>
Similarly, you can add other styles like header, footer, main content, etc. as shown above.
”;