❐CSS❐

❐wD Learn

CSS

CSS Introduction

CSS Selectors

CSS Color

CSS Background

CSS Border

CSS Margin

CSS Padding

CSS Box Model

CSS Text

CSS Font

CSS Link

CSS List

CSS Overflow

CSS Display

CSS Combinators

CSS Pseudo-classes

CSS Navigation Bar

CSS Hover

CSS Z-index

CSS Media Queries

CSS Shadow

CSS 2D Transform

CSS Animations

CSS Button

CSS FlexBox

CSS Grid

CSS Pagination

CSS Selectors CSS selectors allow us to choose specific elements and apply styles to them.

Suppose we want to add a custom style to only a specific tag(s). There, we can make use of CSS selectors.

 There are different types of CSS selectors, which are as follows:
 Universal Selector Universal selector represented by * targets all the HTML elements on the page.

Syntax


* {

property: value;

}

Example


<head>
<style>
* {

color: purple;
text-align: center;

}
</style>
</head>
<body>
<p>Welcome to </p>
<h1>CodeWithHarry</h1>
</body>
Element Selector The element selector selects the target element based on the specific type.

 Suppose you want to underline all the <p> tags; in this case, the element selector will be the best choice.

 The syntax of Element Selector is as follows:

Syntax


p {

property: value;

}

Example


<html>
<head>
<title>CSS</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Code</h1>
<h2>we offer: </h2>
<p>web Tutorials </p>
<p>Ultimate html Course</p>
<p>html css Tutorials For Beginners</p>
</body>
</html>
ID Selector The ID selector targets the elements based on the specific ID.

 It is written with the hash # character followed by the ID name in the style sheet.

 The syntax of ID Selector is as follows:

Syntax


#ID {

property: value;

}

Example


<html>
<head>
<style>
#title {

text-align: center;
color: red;

}
</style>
</head>
<body>
<h1 id="title">Code</h1>
<p>I'm a Developer</p>
</body>
</html>
Class Selector The class selector does the same job as the id selector, a class selector helps group various types of elements.

Suppose, we want to give a custom style to a specific group of elements. In this case, the class selector is the best option.

 It is written with the period . character followed by the class name in the style sheet.

Syntax


.class {

property: value;

}

Example


<html>
<head>
<title>CSS</title>
<style>
.red {

color: red;

}
</style>
</head>
<body>
<p>This is simple p tag</p>
<p class="red">This p tag has class red</p>
<p>This is simple p tag</p>
<p class="red">This p tag has class red</p>
</body>
</html>
Group Selector The group selector is used to minimize the code. Commas , are used to separate each selector in a grouping.

 This reduces the number of lines of code. The code also looks clean.

 The syntax of Group Selector is as follows:

Syntax


div, p, a {

property: value;

}

Example


<html>
<head>
<title>CSS</title>
<style>
h1 {

color: red;

}
p, a {

color: purple;

}
</style>
</head>
<body>
<h1>CodeW</h1>
<p>This is the p tag</p>
<a href="#">This is the anchor (a) tag</a>
</body>
</html>