Home >>CSS Tutorial >CSS Selectors
CSS Selectors
CSS Selectors
CSS Selectors are used to select any HTML elements you want to style.
You can select CSS selectors in html elements in several different types:
- Element Selector
- Id Selector
- Class Selector
- Group Selector
- Universal Selector
CSS Element Selector
The element selector selects the HTML element by name (like tag name).
Let's have a look at the example of Element Selector:
<!DOCTYPE html> <html> <head> </head> <body> <h1 style=” Color: blue; Font-size: 25px ; ”>This CSS will be applied on every Heading. </h1> </body> </html>
This CSS will be applied on every heading.
CSS Id Selector
To write a hash(#) character, To select an element with a particular Id, followed by the Id of the element.
To select a specific element of an HTML element , the id selector uses the Id attribute.
The id selector is used to select one specific element.
The id of an element is unique within a particular page, it is chosen to select a single, unique element in a page.
Let's have a look at the example of Id Selector:
<!DOCTYPE html>
<html>
<head>
<style>
#Heading1 {
text-align: center;
color: blue; }
</style>
</head>
<body>
<h1 id="Heading1">This is My first tutorial in PHPTPOINT</h1>
</body>
</html>
This is my first tutorial in PHPTPOINT
CSS Class Selector
HTLML element is select by class selector with a specific class attribute.
Write a period (.) character, to select element with a specific class followed by the specific class name.
Let's have a look at the example of Class selector:
<!DOCTYPE html>
<html>
<head>
<style>
.heading1 {
text-align: center;
color: Green;
}
</style>
</head>
<body>
<h1 class="heading1">This heading is green with centered align.</h1>
</body>
</html>
This heading is green with centered align.
CSS Group Selector
The grouping selector is help to select all the HTML element with the same style.
For separate each selectors in grouping, commas are used.
In order to compress the code use of group selector will be better.
Let's have a look at the example of Group selector:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2 {
text-align: center;
Font-size:30px;
color: red;
}
</style>
</head>
<body>
<h1>Hello PHPTPOINT. This is my first heading. </h1>
<h2> Hello PHPTPOINT. This is my Second heading.</h2>
</body>
</html>
Hello PHPTPOINT. This is my first heading.
Hello PHPTPOINT. This is my Second heading.
CSS Universal Selector
It selects all the elements on the pages.
To select all the HTML elements on the page we used universal selector (*).
Let's have a look at the example of Universal Selector:
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: blue;
text-align:center;
border:1px solid #000;
}
</style>
</head>
<body>
<h2>This is my second heading</h2>
<h4>This is my fourth heading</h4>
</body>
</html>