what are the rules of css

CSS @property Rule

The @property rule is used to define custom CSS properties directly in the stylesheet without having to run any JavaScript.

The @property rule has data type checking and constraining, sets default values, and defines whether the property can inherit values or not.

Example of defining a custom property:

@property --myColor {
  syntax: "";
  inherits: true;
  initial-value: lightgray;
}

The definition above says that –myColor is a color property, it can inherit values from parent elements, and its default value is lightgray.

To use the custom property in CSS, we use the var() function:

body {
  backgound-color: var(--myColor);
}

The benefits of using @property:

Type checking: You must specify the data type of the custom property, such as <number>, <color>, <length>, etc. This prevents errors and ensures that custom properties are used correctly
Set default value: You set a default value for the custom property. This ensures that if an invalid value is assigned later, the browser uses the defined fallback value
Set inheritance behavior: You must specify whether the custom property can inherit values from its parent elements or not

What is !important?

The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

Let us look at an example:

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}