How to Use the Grouping Selectors in CSS With Examples
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>
<p id ="intro">
</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>
<p id ="intro">
<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
Comments
Post a Comment