What is CSS

HTML describes what is on the page, and CSS (Cascading Style Sheets) describes how it looks: colors, fonts, spacing, the position of blocks. Styles are written separately from the markup, so the look of a whole site can change without touching the content.

A CSS rule

Styles consist of rules. A rule starts with a selector, which says which elements the style applies to. It is followed by declarations in curly braces { }:

<style>
  p {
    color: crimson;
  }
</style>
 
<p>This paragraph turned red.</p>
<p>And so did this one.</p>

The p selector picked every paragraph at once. The declaration color: crimson consists of a property (what we change) and a value (what we change it to), with a colon between them and a semicolon at the end.

Several declarations

One rule can hold any number of declarations. Each one goes on its own line, which makes them easier to read and change:

<style>
  h2 {
    color: royalblue;
    font-size: 28px;
    text-align: center;
  }
</style>
 
<h2>A centered heading</h2>

The heading got three changes at once: color, font size and centered alignment.

Where to write styles

Styles can go into a <style> tag, as in the examples above, or into the style attribute of an element. In the second case no selector or braces are needed — the style applies to that element only:

<p style="color: seagreen; font-weight: bold;">A style right in the tag.</p>
<p>The next paragraph did not get it.</p>

The style attribute is handy for a quick test, but real sites avoid it: the styles end up scattered across the markup and are hard to find.

A separate stylesheet

The main way is to keep styles in a file with the .css extension and attach it in <head> with the tag <link rel="stylesheet" href="styles.css">. The file itself contains only rules, without a <style> tag:

/* styles.css */
body {
  font-family: Arial, sans-serif;
}
 
h1 {
  color: royalblue;
}

One file is attached to every page of the site, and a single change in it updates them all.

Browser styles

Even without your CSS a page is not bare: the browser has default styles. Headings are large and bold, links are blue and underlined, paragraphs have spacing:

<h1>A heading</h1>
<p>A paragraph and a <a href="#">link</a> — all styled by the browser itself.</p>

Your rules do not replace these styles entirely; they change only the properties you name.

Comments

A comment is written between /* and */. The browser skips it, while for people it explains the code:

<style>
  /* The main text color */
  p { color: slategray; }
</style>
 
<p>The comment is not visible on the page.</p>

A comment can also temporarily "switch off" a rule without deleting it.

Common mistake

A missing semicolon breaks the neighboring declaration: the browser reads two lines as one meaningless value and discards both.

<style>
  p {
    color: crimson
    font-size: 24px;
  }
</style>
 
<p>Neither the color nor the size was applied.</p>

The browser shows no errors for CSS — an invalid declaration is silently skipped. If a style does not work, check the semicolons and colons first.