CSS Selectors

Selectors target the HTML elements on your pages. They allow you to add styles based on their ID, class, type, attribute.

Types of selectors:

Simple Selectors

Selects HTML elements based on their tag names.

Targets an HTML element with a specific id attribute.

Selects elements with a particular class attribute.

/* element selector */
p {
    color: blue;
}

/* id selector */
#container {
    color: red;
}

/* class selector */
.intro {
    color: green;
}

Used to select all the elements in an HTML document. It will be applied to each and every HTML element on the page

/* universal selector */
* {
    color: purple;
}

It is used to style all comma-separated elements with the same style.

Suppose you want to apply common styles to different selectors, instead of writing rules separately you can write them in groups

/* grouping selector */
h2, h3 {
    color: orange;
}

It is used to select the elements with a specified attribute or attribute value.

/* attribute selector */
a[href] {
    color: brown;
}

It is used to style a special type of state of any element.

Example: It is used to style an element when a mouse cursor hovers over it.

/* pseudo-class selector*/
a:link {
    color: yellow;
}

It is used to style any specific part of the element.

Example- It is used to style the first letter or the first line of any element.

/* pseudo-element selector */
p::first-line {
    color: pink;
}

CSS properties are the various attributes that you can use to style and format HTML elements on a web page.

Each property has a specific set of allowed values, and these properties control different aspects of an element's appearance or behavior.

Color Properties:

Text Properties:

Box Model Properties:

Layout Properties:

Flexbox Properties:

Grid Properties: