CSS Syntax and Types of Selectors

Just like any programming language works, the CSS code is also interpreted based on some rules.
Here, the browser interprets what are called the style rules.
Based on the rules, it applies the design to the corresponding elements of the webpage.

The style rule can be seen as following 3 parts:

Selector – This is the HTML part of your webpage. Any HTML tag that will be styled by the CSS code is termed as a Selector.
Property – All the hassle that once had to be done as HTML attributes, now falls under this category. Simply put, all the color, border, cell padding etc. attributes of your HTML tags are now the CSS properties
Value – We have the style-ee we have the style-er all that remains is the style. Value corresponds to the style value given to the Property to be applied for the Selector.
The basic syntax for a basic CSS code can be shown as

Types of Selectors are

CSS Type Selector

Selectors with a specific type body,h1,div span, etc

It will show result

Universal Selectors

This is when you want don’t want the selector to be specific for type and be universally applied at all tags * is used as universal selector

It will show result

Descendant Selectors

It’s for when you want a style to be applied to an element only in case it is a part of another specific element

It will show result

Class Selectors

As name suggest, this is for the styling of the class attribute in css class is represented by class name preceded by dot(.),

It will show result

ID Selectors

Similar to class selectors, this is for the id attribute id attribute are assinged on css with # then id attribute value

It will show result

Child Selectors

It is very much similar to descendant selectors in its execution. chile selector selects only the immediate child of a tag whereas descendent selector selects a tag at any level inside the parent tag. to select a child we use > symbol

It will show result

Attribute Selectors

You can specify a particular attribute (for e.g. type= “password”) which you want to style.

It will show result

Multiple Style Selectors

You can have multiple properties for a single selector depending on the style requirement. Each property value pair is separated by semicolon (;)

You can specify a particular attribute (for e.g. type= “password”) which you want to style.

It will show result

Grouping Selectors

This is when many selectors have similar property-value pairs.

It will show result