Quick Reach
CSS ID Selector
In CSS you can also define your own selectors. These selectors are Class and ID selectors. This chapter explains only CSS ID selectors.
Alternatively we can select and style HTML elements by ID names. ID selectors are used when you need to apply style to single element.
Syntax of defining ID selector
The ID selector is defined as follows:
#ID_name
{
property: value;
property: value;
property: value;
}
i.e. a hash-tag (#) followed by id selector name. All definitions are enclosed in curly braces.
Example of defining and using ID selector
In example below we will define a test ID selector with certain properties. Then we will use this ID selector in HTML DIV element.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<style>
/*defining ID selector*/
#testid
{
font-weight: normal;
font-size: 20px;
background: #00FF00;
color: #000000;
}
</style>
</head>
<body>
<div id=“testid”>This DIV used testid id selector.</div>
<div>No style applied to this div</div>
</body>
</html>
|
As you can see, once a testid is defined this is used in <div> HTML element.
In HTML elements, id selector is referred by id=”idname”.
Leave A Comment?