CSS Syntax and Selector

There are some rules that guild writing code for CSS style. These rules help the browser to interpret the code and apply it to the appropriate HTML element. The CSS rule is made of three parts which include

Selector: a selector shows the HTML element you wish to style. This could be any tag like <p> or even a class name.

Property: this is like an HTML attribute. It is simply that all HTML attributes are converted to CSS properties. Example line-height, line clamp, letter-spacing, color, border, height, weight etc.

Value: these are assigned to the properties example color: blue

p {  color: blue;  height: 12px}

The p is the selector in CSS. Curly braces follow it. On the side, the curly braces are known as the declaration box, which contains CSS property, in this case, it is the color and height and their values, which are blue and 12px.

CSS Selector

A CSS selector selects the HTML element(s) you want to style. These selectors are divided into five categories Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selector (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element) Attribute selector (select elements based on an attribute value)

Element selector

These select elements are based on the element name. When an element is selected, and a style is given, all the content takes the style on the webpage.

p {  background-color: red;  text-align: center}

CSS ID Selector

An id is unique in itself. The id selector is used to select this id within the webpage. No two elements can have the same id. To select a specific id, write the harsh tag character(#), followed by the element's id.

#wrapper {  text-align: center:  color: grey;}

CSS Class Selector

The CSS class selector works in the same way as the id selector but with a slight difference. An ID is unique to the element, whereas a class can be common to multiple elements. To select an element with a specific class, write a period character(.), followed by the class name.

.center  {  margin: 0px  padding:2px;}

CSS Universal selector

The universal selector is just as it is called. It selects all the element in the webpage. It has the star sign (*) as its symbol.

*{margin: 0px;padding: 0px;}

CSS Grouping selector

It is usually used when the same CSS styling is applied to different elements. It helps to increase efficiency and save time.

p, h3, div  {  color: green;}