CSS Properties: The Building Blocks of Style
HTML provides the skeleton, but CSS properties breathe life into your web pages. Understanding the core properties is the first step toward mastering frontend development.
Paint It Black (or Any Color)
The most immediate visual impact comes from colors. The color property defines the color of the text, while background-color fills the element's container.
You can use named colors (red), HEX codes (#FF0099), RGB (rgb(255, 0, 153)), or HSL. HSL is often preferred by designers because it's easier to create harmonious palettes by tweaking lightness and saturation.
Typography Controls
Text isn't just readable; it's visual. With font-family, you define the typeface. Always provide fallbacks (like sans-serif) in case the user's browser doesn't load your custom font.
font-size dictates how large the text is, and font-weight makes it bold (700) or light (300). Use text-align to center or justify your paragraphs within their containers.
The CSS Box Model
Every single HTML element is evaluated as a rectangular box by the browser. To master layout, you must master the Box Model:
- Content: The actual text or image. Controlled by
widthandheight. - Padding: The transparent space INSIDE the border, between the content and the edge.
- Border: The line wrapping the padding and content. Set via
border(width, style, color). - Margin: The transparent space OUTSIDE the border, pushing other elements away.
Pro Tip: box-sizing+
Always use box-sizing: border-box;. By default, adding padding to an element increases its overall width. By setting it to border-box, the padding is absorbed into the assigned width, making math and layouts much easier to manage!
❓ Preguntas Frecuentes
What is the difference between padding and margin?
Padding is the inner space. It is located between the content and the border of the element. The element's background color fills the padding.
Margin is the outer space. It pushes the element away from other elements around it. It is completely transparent.
Why isn't my 'color' property changing the background?
A very common mistake when starting out is confusing color with the background. In CSS, color refers strictly to the font (text) color. If you want to change the background of the container element, you must use background-color.
What is shorthand notation?
Many CSS properties allow you to write several characteristics in a single line. For example, instead of writing margin-top, margin-right, etc., you can write margin: 10px 20px 10px 20px; (order: top, right, bottom, left—just like the hands of a clock).