CSS Syntax & Adding CSS

Before you can style anything, you need to know how a CSS rule is written and where to put it. The grammar is small and strict: a missing brace or colon can silently switch off a whole block of styles.

This lesson covers the parts of a rule, comments, how browsers handle mistakes, and the three ways to connect CSS to an HTML page.

Anatomy of a CSS rule

A CSS file is a list of rules. Each rule has two parts: a selector and a declaration block.

.price-tag {
  color: #0b6e4f;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
}

• Selector: .price-tag chooses which elements the rule applies to. Here it matches every element with class="price-tag".
• Declaration block: everything between { and }.
• Declaration: one property: value; pair, such as color: #0b6e4f;.
• Property: the feature you are changing, such as color or padding.
• Value: what you set it to. Some properties take several values separated by spaces, like padding: 0.25rem 0.5rem;.

The semicolon separates declarations. It is optional after the last one, but always write it. If you add another line later, you will not have to remember to add the missing semicolon first.

Whitespace and case

Spaces, tabs and line breaks between parts of a rule do not matter, so the rule above could fit on one line. Most people put each declaration on its own line because it is easier to read and easier to compare in version control.

Property names and keywords are not case sensitive, but write them in lowercase by convention. Class names and IDs are case sensitive: .Price-Tag does not match class="price-tag".

Comments

A comment starts with /* and ends with */. The browser ignores everything between them. Use comments to explain why you did something, or to label sections of a long file.

/* ===== Header ===== */
.site-header {
  background: #12355b;
  /* Extra bottom space so the logo does not touch the menu on small phones */
  padding-block-end: 1rem;
}

CSS has no single-line // comment. Writing // note in a CSS file breaks the rule that follows it.

How CSS handles mistakes

CSS is forgiving in a specific way: when the browser meets something it does not understand, it skips that piece and carries on. An unknown property or an invalid value drops only that one declaration.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Error handling</title>
  <style>
    p {
      color: darkblue;
      font-size: 1.5 rem;   /* invalid: space between number and unit */
      colr: red;            /* invalid: misspelt property */
      background: #fff3c4;
    }
  </style>
</head>
<body>
  <p>Train 12955 to Jaipur departs from platform 3.</p>
</body>
</html>

The text is dark blue on a pale yellow background, but the font size and the red colour are ignored. Nothing on the page tells you about the two mistakes. Open your browser's developer tools (press F12), select the paragraph and look at the Styles panel: invalid declarations are shown crossed out with a warning icon. Get used to checking there whenever a style "does not work".

This forgiving behaviour is useful: you can write a new CSS feature, and older browsers simply skip it while still applying the rest.

Three ways to add CSS

1. External style sheet (recommended)

Put your CSS in a separate file, such as styles.css, and link to it from the <head> of every page:

<head>
  <meta charset="utf-8">
  <title>Rohtak Book Store</title>
  <link rel="stylesheet" href="styles.css">
</head>

This is the standard choice for real websites. Every page shares one file, and the browser downloads it once and then keeps it in its cache, so later pages load faster. Keep the <link> in the <head> so the page is styled before it is shown.

2. The style element

A <style> element in the <head> holds CSS for that one page. It is handy for small demos, single-page experiments and the examples in this tutorial, because everything stays in one file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Style element</title>
  <style>
    h1 { color: #8a3324; }
    .note { background: #eef4ff; padding: 0.75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <h1>Library timings</h1>
  <p class="note">The college library stays open until 8 pm during exam weeks.</p>
</body>
</html>

3. Inline styles

The style attribute puts declarations straight on one element. There is no selector and no braces, only the declarations:

<p style="color: crimson; font-weight: bold;">Last date for fees: 15 July</p>

Inline styles are hard to reuse and hard to override, because they beat almost every rule in your style sheets. Use them sparingly, for example when JavaScript sets a value that changes all the time. You will see why they are so strong in Cascade, Specificity & Inheritance.

Common mistakes

• Wrong path in href. If styles.css is in a folder called css, write href="css/styles.css". A wrong path fails silently: the page just looks unstyled.
• Missing closing brace. Without } the browser reads the rules that follow as part of the unfinished one, so they stop matching what you expect.
• Space between number and unit. 16 px is invalid; write 16px. The number 0 is the only length you may write without a unit.
• Using // for comments. Only /* ... */ works in CSS.

Key points

• A rule is a selector followed by a block of property: value; declarations.
• End every declaration with a semicolon and close every block with }.
• Comments use /* ... */; there is no // comment in CSS.
• Invalid declarations are skipped silently, so use the developer tools to find them.
• Prefer an external style sheet linked with <link rel="stylesheet">; use <style> for demos and inline styles rarely.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Aarav Electronics</title>
  <style>
    /* Main shop name */
    h1 {
      color: #1d3557;
    }
    /* Highlighted offer paragraph */
    .offer {
      font-weight: bold;
      background: #fff1d6;
      padding: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Aarav Electronics, Jaipur</h1>
  <p>We repair phones, laptops and televisions.</p>
  <p class="offer">Screen guards at ₹149 this week only.</p>
</body>
</html>