Scribd
Upload
79 views

Selectors in CSS ID Class

CSS selectors are used to select and style HTML elements. There are simple selectors that select elements by name, id, or class, combinator selectors that select elements based on their relationship, and pseudo-class and pseudo-element selectors that select elements based on a certain state or part of an element. The id selector uses the id attribute to select a unique element, the class selector selects elements with a specific class, and the universal selector selects all elements on the page.

Uploaded by

santhosh kumar B J
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
79 views

Selectors in CSS ID Class

CSS selectors are used to select and style HTML elements. There are simple selectors that select elements by name, id, or class, combinator selectors that select elements based on their relationship, and pseudo-class and pseudo-element selectors that select elements based on a certain state or part of an element. The id selector uses the id attribute to select a unique element, the class selector selects elements with a specific class, and the universal selector selects all elements on the page.

Uploaded by

santhosh kumar B J
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>


<p>This paragraph is not affected by the style.</p>

</body>
</html>
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class
name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>


<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>


<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>
The CSS Universal Selector
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>


<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

You might also like