How to Use the Grouping Selectors in CSS With Examples
How to Use the Grouping Selectors in CSS With Examples
Syntax
selector1, selector2, selector3
{
property1: value1;
property2: value2;
. . .
. . .
. . .
}
How to Use the Grouping Selectors in CSS With Examples
Example
<!DOCTYPE html>
<html>
<head>
<title> Grouping Selectors in CSS </title>
<style>
#intro,.demo{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
</style>
</head>
<body>
<div class="demo">
<h1> Grouping Selectors in CSS </h1>
<P> learn programming language css </P>
</div>
</body>
</html>
How to Use the Grouping Selectors in CSS With Examples
Explain Program
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2]
<html>.... .
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
text tag text appears on the browser tab.
<head>
<title> Grouping Selectors in CSS </title>
Step 4]
<style>
#intro,.demo{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
</style>
<style> tag (internal css)
CSS grouping selector that style two selectors together.
# intro
- ID Selector
- Applies styles to element (id="intro")
.demo
- Class selector
- Class Selector
- Applies styles to element (class="demo")
Styles Apllied ( two element )
- border: 5px inset gold;
- color:dodgerblue;
- text-align:center;
Step 5]
closing the Tag
</style>
</head>
Step 6]
<body> Section
<body>
<div class="demo">
<h1> Grouping Selectors in CSS </h1>
<P> learn programming language css </P>
</div>
<div class="demo">
- .demo use class selector .
- style by css rule.
- container element
inside the <div>
- <h1> → Main heading
- <p> → Paragraph text
<p id="intro">
- Paragraph id Selector
- Styled by #intro
- URL show website
Step 7]
closing the Tag
</body>
</html>
How to Use the Grouping Selectors in CSS With Examples
Output
