What is CSS

Site Admin · 11 Sep 2026 · 9 views

What is CSS

CSS (Cascading Style Sheets) controls the visual presentation of HTML. While HTML defines structure, CSS defines colors, fonts, spacing, layout, and responsive behavior. CSS makes the web beautiful.

How to Add CSS

There are three ways to include CSS in your HTML. External stylesheets are the recommended approach for any real project.

<!-- External stylesheet (recommended) -->
<link rel="stylesheet" href="styles.css">

<!-- Internal style block -->
<style>
    h1 { color: blue; }
</style>

<!-- Inline style (avoid this) -->
<p style="color: red;">Styled paragraph</p>

CSS Syntax

A CSS rule consists of a selector and a declaration block. The selector targets HTML elements. Declarations set properties.

selector {
    property: value;
    another-property: value;
}

h1 {
    color: #333333;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.btn-primary {
    background-color: #2563eb;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
}

Units in CSS

CSS has many units for sizing. The most common are pixels (px), rems (rem), and percentages (%):

h1 { font-size: 2rem; }       /* Relative to root font size */
.container { width: 80%; }    /* Relative to parent */
.card { padding: 1.5rem; }    /* Spacing relative to root */
.icon { width: 24px; }        /* Fixed pixel size */

Where CSS Lives

Keep all styles in external .css files. Reference them in your HTML <head>. The browser loads and applies them in order. Organize CSS files by component or feature for maintainability.