CSS Identifier

Uncategorized / By
CSS identifier also known as CSS selectors. Selectors are used to access the CSS styles. They can be very useful sometimes you want to apply a special style to a particular element or a particular group of elements.
 
There are three kinds of selectors in CSS:
  1. Element or Tag Selector
  2. Class Selector
  3. ID selector
 
Element Selector
The general syntax for an HTML selector is:

HTMLSelector {Property:Value;}
 
For example:

<HTML>
<HEAD>
<style type=”text/css”>
B{
font-family:arial;
font-size:14px;
color:blue
}
</style>

</HEAD>

<BODY>
<b>This is a customized headline style bold</b>
</BODY>

</HTML>
 
Click here to open a window that shows the result of the above example.
 
 
CLASS Selectors
HTML selectors are used when you want to redefine the general look for an entire HTML tag.
 
The general syntax for a Class selector is:
.ClassSelector {Property:Value;}
 
For example:
<HTML>
<HEAD>
<style type=”text/css”>
.headline {font-family:arial; font-size:14px; color:red}
</style></HEAD>

<BODY>
<b class=”headline”>This is a bold tag carrying the headline class</b>
<br>
<i class=”headline”>This is an italics tag carrying the headline class</i>
</BODY>

</HTML>
 
Click here to open the output window.
 
Class selectors are used when you want to define a style that does not redefine an HTML tag entirely.
 
When referring to a Class selector you simply add the class to an HTML tag like in the above example (class=”headline”).
 
SPAN and DIV as carriers
 
Two tags are particularly useful in combination with class selectors: <SPAN> and <DIV>.
 
Both are “dummy” tags that don’t do anything in themselves. Therefore, they are excellent for carryingCSS styles.
 
<SPAN> is an “inline-tag” in HTML, meaning that no line breaks are inserted before or after the use of it.
 
<DIV> is a “block tag“, meaning that line breaks are automatically inserted to distance the block from the surrounding content (like <P> or <TABLE> tags).
 
<DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice when defining layers on your pages.
 
 
ID selector
In addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id.
Each id has to be unique. There can not be two elements in the same document with the same id, which is special about the attribute id. In other cases, you should use the class attribute instead. Now, let us take a look at an example of a possible usage of id:
 
The general syntax for an ID selector is:
#IDSelector {Property:Value;}
 
For example:
<HTML>
<HEAD>
<style type=”text/css”>
#layer1
{
            position:absolute;
            left:100;
            top:100;
            z-Index:1;
            background-color:cyan
}
#layer2 {
position:absolute;
left:140;
top:130;
z-Index:0;
background-color:pink
}
</style>
</HEAD><BODY>
<div ID=”layer1″>
 THIS IS LAYER 1<br>POSITIONED AT 100,100
</div>

<div ID=”layer2″>
 THIS IS LAYER 2<br>POSITIONED AT 140,130
</div>
</BODY>
</HTML>