Scribd
Upload
31 views

CSS Selectors: P (Text-Align: Center Color: Red )

CSS selectors allow you to select and style HTML elements based on id, class, type, attributes and more. There are element, id, class and grouping selectors. The element selector selects elements by name like <p>, the id selector selects unique elements using the id attribute, and the class selector selects elements that share the same class. Grouping selectors allow applying the same styles to multiple selectors like h1, h2, p.

Uploaded by

Muzaffar Khan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views

CSS Selectors: P (Text-Align: Center Color: Red )

CSS selectors allow you to select and style HTML elements based on id, class, type, attributes and more. There are element, id, class and grouping selectors. The element selector selects elements by name like <p>, the id selector selects unique elements using the id attribute, and the class selector selects elements that share the same class. Grouping selectors allow applying the same styles to multiple selectors like h1, h2, p.

Uploaded by

Muzaffar Khan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS Selectors

CSS selectors allow you to select and manipulate HTML element(s).


CSS selectors are used to "find" (or select) HTML elements based on their id, classes,
types, attributes, values of attributes and much more.

The element Selector


The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will be centeraligned, with a red text color)

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

<p>Every paragraph will be affected by the style.</p>


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

</body>
</html>

The id Selector
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want
to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1":

<!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 class Selector


The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period character, followed by the name of
the class:
In the example below, all HTML elements with class="center" will be center-aligned:

<!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>

Grouping Selectors
In style sheets there are often elements with the same style:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}

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

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

You might also like