As we know that view of
HTML web page is the most important part.In my previous article we
discussed about HTML layouts using tables, and now i will tell you about
HTML layouts using CSS.
CSS is named as cascade style sheet. Style sheet means it makes styles like fonts style, page style, backgrounds,borders etc.So let's start.......
First we should know how to make css file?
One thing should be remember that both your HTML web page and CSS file in same folder.
Now program CSS file as:
.h1
{
color:red;
font-family:comic sans ms;
}
.b1{
font-size:5;
font-family:arial;
font-style:bold;
color:green;
}
.td1{
background-color:yellow;
border-width:10px;
border-color:red;
border-right-width:10px;
border-right-color:red;
}
Now put this HTML file :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Layouts</title>
</head>
<body>
<table width="100%" border="5px">
<tr>
<td colspan="2" bgcolor="aqua">
<center>
<h1 class="h1">This is my first web page</h1>
</center>
</td>
</tr>
<tr valign="top">
<td class="td1" width="10%">
<b class="b1">Main Menu<br><br>
About us<br><br>
Contact us<br><br>
Downloads
</b>
</td>
<td bgcolor="#eee" width="100" height="400">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
<font size = "5">
<b>Powered by : Amar Gangwar</b>
</center>
</td>
</tr>
</table>
</body>
</html>
this result will shown.
CSS is named as cascade style sheet. Style sheet means it makes styles like fonts style, page style, backgrounds,borders etc.So let's start.......
First we should know how to make css file?
CSS don't need any external IDE or anything else. We only needs a text editor as notepad++.
- open editor and make a new file and saved as "myfile.css".
- Now create a new File and make a HTML web page and add the following line inside the <head> tag :
One thing should be remember that both your HTML web page and CSS file in same folder.
Now program CSS file as:
.h1
{
color:red;
font-family:comic sans ms;
}
.b1{
font-size:5;
font-family:arial;
font-style:bold;
color:green;
}
.td1{
background-color:yellow;
border-width:10px;
border-color:red;
border-right-width:10px;
border-right-color:red;
}
Now put this HTML file :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Layouts</title>
</head>
<body>
<table width="100%" border="5px">
<tr>
<td colspan="2" bgcolor="aqua">
<center>
<h1 class="h1">This is my first web page</h1>
</center>
</td>
</tr>
<tr valign="top">
<td class="td1" width="10%">
<b class="b1">Main Menu<br><br>
About us<br><br>
Contact us<br><br>
Downloads
</b>
</td>
<td bgcolor="#eee" width="100" height="400">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#b5dcb3">
<center>
<font size = "5">
<b>Powered by : Amar Gangwar</b>
</center>
</td>
</tr>
</table>
</body>
</html>
this result will shown.
This all about introducing CSS to HTML.In next article we will discuss about PHP inside HTML.
No comments:
Post a Comment