Skill Maps

What Is the Magic Made Of?

CSS code is not just text, but a strict structure of rules. An error in one character can " break " the entire layout below.

Example Breakdown

/* Selector */
.main-title {
  /* Declaration 1: Property: Value; */
  color: #2c3e50;
  font-size: 2.5rem;
  line-height: 1.4; /* No units = multiplier */
}
  1. Selector: Tells the browser which elements the rule targets. Can select by tag (h1), by class (.name), by ID (#id), and many other attributes.
  2. Declaration Block: Everything inside the curly braces { ... }.
  3. Property: The characteristic we want to change (color, margin, width).
  4. Value: The specific setting for the property.
  5. Semicolon (;): Separator. Without it, the browser will " glue " two lines together and ignore both.
Tip

Property names and values in CSS are case-insensitive, but professionals always use lowercase for cleanliness. However, class and ID names in HTML are case-sensitive! Be careful.

Data Types in Values:

  • Keywords: normal, bold, inherit.
  • Numbers and units: 10px, 1.2em, 50%.
  • Colors: red, #fff, rgb(0,0,0).
  • Functions: calc(100% - 20px), url('image.jpg').