-->

CSS ID tutorial

CSS ID tutorial

CSS ID tutorial

CSS ID tutorial:

The id attribute can be used in almost every HTML element except a few. You can set the value of the id attribute as you wish. Simply put, the value of id is a name for an element. Element T is selected and styled in CSS under this name. E.g.



<!DOCTYPE html>
<html>
<head>
<style>
#demo_head{color:#f00;text-transform : uppercase;}#demo_para{text-align:center; color:maroon;}
</style>
</head>
<body>
<h1 id="demo_head">Myhtmlcode</h1>
<p id="demo_para">Myhtmlcode</p>
</body>
</html>


The text-transform property can have up to 5 values.

If you give uppercase, all the text inside that element will be shown in capital letters. As I gave.

If you give none, it will look like it is in HTML. It remains by default.

If you inherit, if the parent element has text-transform, its tie will be applied. If the parent does not have these properties, then the default will get none.

If you give lowercase, all the text will go in small hand letters.

If you capitalize, the first letter will be capitalized (for all words).


You have to use hash (#) sign to select id. Like I did. See that I have written CSS in the ID of the element only that has affected. This way you can use as many IDs as you want in the whole HTML document and style each ID separately for that element.



Id must be unique which means never give the same ID to two elements. If you give an ID of 1000 elements, then the name of each of them has to be different. Any name can be kept but it is better to keep the ider name relevant as I have given in the example above.



When to use id:

Suppose there are 10 HTML elements inside the body element of your site and you want to give a different style to each, no one will match with anyone. Then you have to give ID in each element. And when you need a common style in more than one element, then class.
Facebook Comments

Follow by Email