Learn CSS: Universal Day 16 | Selector and Inheritance Selector

Visit - www.skyhighes.com

Universal Selector and Inheritance Selector in CSS
In CSS, selectors are used to target specific elements on your web page and apply styles to them. Two fundamental types of selectors are:

1. Universal Selector:

Represented by the asterisk (*) symbol.
Applies styles to all elements on the page.
Has the highest specificity level, overriding all other selectors.
Example:

CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Use code with caution. Learn more
This code will set the margin, padding, and box-sizing of all elements on the page to zero.

Advantages:

Saves time by applying styles to all elements at once.
Useful for resetting default browser styles.
Disadvantages:

Can be difficult to override if you need to apply different styles to specific elements.
Can lead to unexpected results if not used carefully.
2. Inheritance Selector:

Selects all descendant elements of a particular element.
Uses the greater-than symbol (>) to separate the parent element from the descendant element.
Example:

CSS
body > h1 {
font-size: 2em;
text-align: center;
}
Use code with caution. Learn more
This code will set the font size to 2em and text-align to center for all h1 elements that are direct children of the body element.

Advantages:

Organizes styles by element hierarchy.
Makes your CSS code more maintainable and easier to understand.
Disadvantages:

Can be verbose for deeply nested elements.
Can be difficult to override if you need to apply different styles to specific descendant elements.