If HTML is the skeleton of a building, CSS (Cascading Style Sheets) is the paint, the furniture, and the decoration. CSS is what makes a website look professional, clean, and beautiful.
CSS is a language used to describe the presentation of a web page. It handles the layout, colors, fonts, and even animations. By separating CSS from HTML, you can change the look of an entire website just by editing one file.
CSS works on a simple Selector-Declaration rule. You pick an HTML element (Selector) and tell it how to look (Declaration).
CSS isn't just static values; it has powerful built-in functions to perform calculations and handle colors dynamically.
| Function | Description | Example |
|---|---|---|
| rgb() / rgba() | Defines colors using Red, Green, Blue. 'a' is for transparency. | rgba(255, 0, 0, 0.5) |
| calc() | Allows mathematical calculations for sizes. | width: calc(100% - 20px); |
| url() | Used to link external images or fonts. | background-image: url('bg.jpg'); |
| var() | Used to insert a CSS variable value. | color: var(--main-color); |
| linear-gradient() | Creates smooth color transitions. | background: linear-gradient(to right, red, blue); |
There are three common methods to apply styles to your HTML elements:
<link> tag (Recommended for real projects).<style> tag inside the HTML head.style attribute directly on an element (Not recommended for large sites).In CSS, every element is considered a box. Understanding the Margin, Border, Padding, and Content is the key to mastering layout. We will dive deeper into this in the next lessons.