HTML & CSS Guru: 2013

Wednesday, June 5, 2013

Include Style sheet css file in the webpage

You can create your style sheet file and save it as .css file under folder css

for example :

css/global.css

body{
    margin:0;
    padding:0;
    font-family:Helvetica,Arial, Verdana, sans-serif;
    color:#eeeeee;
}
form{
    margin:0;
}
a{
    color:#0000ff;
    text-decoration:none;
}

In your webpage (.html), include the css file into the header tag:

for example:

index.html

<html>
   <head>
      <title>Html CSS Guru</title>  
      <link href="css/global.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>

       This is a sample page

    </body>

</html>

Monday, May 27, 2013

CSS Id and Class

The id Selector

The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":

For example:

<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

"Hello World!" with center aligned and red color shown.

-------------------------------------------------------------------------------------

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:

For example :

.center {text-align:center;}
p.center {text-align:center;}

Sunday, May 26, 2013

HTML meta tag redirect to other page

This is a very simple way to redirect your page to other website by using the HTML meta tag at the header level.

Example 1:

This example will redirect to http://www.yourdomain.com/index.html after the page is loaded.

<html>
<head>
<META HTTP-EQUIV="REFRESH" CONTENT="0; url=http://www.yourdomain.com/index.html"/>
</head>
<body>
</body>
</html>

Example 2:

This example will redirect to http://www.yourdomain.com/index.html after the page is loaded for 5 seconds.

<html>
<head>
<META HTTP-EQUIV="REFRESH" CONTENT="5; url=http://www.yourdomain.com/index.html"/>
</head>
<body>
</body>
</html>