HTML stands for Hyper Text Markup Language for creating web pages. HTML pages are developed with HTML tags. To decorate the appearance of an HTML page, we can use CSS. CSS stands for Cascading Style Sheets, used for decorating or styling HTML pages.
In this simple article, we will look at how easy it is to create a simple HTML page and decorate it with CSS.
Usually a web-page contains an <html> tag, a <head> tag, a <title> tag and a <body> tag. These are the common HTML tags we use in web-pages. Lets create a simple-page.html page with below HTML code.
<html> <head> <title>Sample Web Page</title> </head> <body> This is the Sample Web Page </body> </html>
This HTML code displays the text “This is the Sample Web Page” when you open the HTML file in the web browser.
Let’s modify the simple-page.html page to add more meaningful content. Usually, the web page contains the following sections. Depending on the requirements more sections will add or remove from the web page.
- Header
- Menu bar
- Body
- Sidebars
- Footer
Let’s update our simple page with these sections.
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<div id="container">
<div id="header"><h1>{Header Code Goes Here}</h1></div>
<div id="menubar">{Menubar Code Goes Here}</div>
<div id="sidebar">{Sidebar code Goes Here}</div>
<div id="content">{Page Content Goes Here}</div>
<div id="footer">{Footer Code Goes Here}</div>
</div>
</body>
</html>The result of this HTML would be:
{Header Code Goes Here}
{Menubar Code Goes Here}
{Page Content Goes Here}
{Sidebars code Goes Here}
{Footer Code Goes Here}Does this page look attractive? If your HTML page will generate this type of output, do you think will it attract visitors?
Just add CSS to the web page and see how it will change the look and feel of your web page. You can add CSS to the HTML page itself. But for maintainability, it is always recommended to have CSS code in .css file and link that file into your HTML page.
Let’s create a style sheet file with the below code and save it as style.css.
#header {
text-align:center;
height: 100px;
}
#menubar {
text-align: left;
}
#content {
left: 210px;
height: 350px;
}
#sidebar {
padding: 5px;
margin-left: 5px;
float: left;
width: 200px;
height: 350px;
border:thin solid #093;
}
#footer {
text-align:right;
}
.box {
padding: 5px;
margin: 5px;
border:thin solid #093;
}Here styles are defined for each section in HTML file. The styles starting with “#” symbol, are applicable to the HTML tags whose “id“ attribute matches with the style name. For eg: #footer style applies to <div id=”footer”> section.
The styles starting with the “.” symbol, are applicable to the HTML tags whose “class” attribute matches with the style name.
Now link this style sheet file to the HTML page and apply the styles. After applying style-sheet code HTML code looks like below.
<html>
<head>
<title>Sample Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container" class="box">
<div id="header" class="box"><h1>{Header Code Goes Here}</h1></div>
<div id="menubar" class="box">{Menubar Code Goes Here}</div>
<div id="sidebar">{Sidebar code Goes Here}</div>
<div id="content" class="box">{Page Content Goes Here}</div>
<div id="footer" class="box">{Footer Code Goes Here}</div>
</div>
</body>
</html>
Open the HTML file in a web browser. Observe that the look and feel of the web page improved after applying the style sheet.
Below screenshot is the output:
**