ID Attributes In Web Pages

ID is the short from of Identify. The ID attributes provides a unique name for design page. It can be used for making link on a same page.

HTML Format

A page having 3 paragraph. Look at the example,

<p>This is the first paragraph. </p>

<p>This is the second paragraph. </p>

<p>This is the third paragraph. </p>

There are theree paragraph , and you want to design this three by three different way. For that you can get help from id attribute.

<p id=”first”>This is the first paragraph. </p>

<p id=”second”>This is the second paragraph. </p>

<p id=”third”>This is the third paragraph. </p>

You can design if via css.

Mind that the ID attribute can not work in the following html tag ;

  •   Base
  •   Head
  •   Meta
  •  Script
  •  Title
  •   Style

 

Use ID in CSS: You have to use # sign before the id name while design any page by css. For example;

<html>

<head><title>CSS ID </title>

<style type="text/css">

#first{background-color:red;color:white;text-align:center;}

#second{background-color:white;color:blue;text-align:left;}

#third{background-color:blue;color:yellow;text-align:right;}

</style>

</head>

<p id="first">This is the first paragraph</p>

<p id="second">This is the second paragraph</p>

<p id="third">This is the third paragraph</p>

</html>

Output:

Use ID in CSS

Use ID in CSS

 

Description

Above paragraph has a ID named “first” and the second paragraph named “second” and the third named “third” .  I want to design this three paragraph with different types.  ID means identify , the id used for design this three. There are three paragraph and all three paragraph contains <p> tag. Now if we design <p> tag on css it will be output the same result for the three paragraph. For that we use ID attribute. You can read the CSS article also.

#first{background-color:red;color:white;text-align:center;}

#second{background-color:white;color:blue;text-align:left;}

#third{background-color:blue;color:yellow;text-align:right;}

Here the “first” paragraph contains red background color, text color is white and text align is center . Text align indicates the position of the paragraph text. By this the second and third are done.

 

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.