Article about CSS and its properties

Introduction

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. We can write CSS in the same HTML page or write on another file with extention .css and link it with html page like <link rel = "stylesheet" href ="././stle.css">

Selectors in CSS

Selectors are basically used to show the browser exactly what elements of HTML we want to target and style it. Following are the different kinds of selectors that are used in CSS.

Universal Selector

The Universal selector (*) simply targets all the HTML elements that are present inside the body tag. For example,

COPY

* {
    margin: 0;
    padding: 0;
}

The above code removes the default margin and padding of all the elements.

Individual Selector

These are also known as Element Selectors. The individual selector is used when we want to target an individual or specific element. For example,

Class and id Selector

The class and id selector will target the elements in which that particular class or id is specified. While using the class selector, type a period (.) and then the name of the class. For example, .class-name {...}. And for the id selector, type hash (#), followed by the name of the id. For example, #id-name: {...}. An example of a class and id selector is given below.

And Selector (Chained selector)

We can use more than one simple selector in CSS while using selectors. In a chained selector, we combine two or more selectors. In the example given below, we used the chained selector .section.header which targets the element which has both classes .section and .header.

Combined Selector

We use combined selectors when we want to apply the same styling to multiple elements. The selector names are separated by a comma (,).

Descendant Selector

In the descendant selector, multiple selector names are used. The first selector name is for the parent element and the selector names following are for its descendant or child element. For example, the selector div h3 {...} targets the h3element which is inside the div tag.

Child Selector

Child Selector, as the name indicates, targets the direct child of an element. The first selector name is for the parent element which is followed by a > and then the child element which we want to style. For example,

Sibling Selectors

There are two sibling selectors. The first one is called Adjacent Sibling Selector. In this selector, the two selector names are separated by a +. This targets the element mentioned after the + and is directly after the first selector name. Only one element gets styled.

The second sibling selector is called General Sibling Selector. In this, the selector names have ~ in between. This targets all the elements of the second selector name which are next to the element of the first selector name. Below is an example to help you understand more clearly.

Pseudo Selectors

Pseudo Selectors are selectors that allow you to style a specific part of a particular element. Some of the pseudo-selectors are below.

::before

The before keyword lets you add content before a selected element. For example,

::after

Similar to ::before, the after keyword allows you to add and style content after the selected element.

:hover

The styling of the selected element used with hover will only be visible when the cursor of the mouse hovers over that element. Below is an example.

Thanks for reading.