What is CSS?

CSS = the style layer

CSS stands for Cascading Style Sheets. If HTML is the structure (walls and rooms), CSS is the decoration (paint, furniture, layout). It controls colours, fonts, spacing, size and position — everything about how a page looks.

Plain HTML

First, here is a tiny page with no CSS at all — just three plain HTML tags. This is what every web page looks like before you style it:

<h1>CodingClave</h1>
<p>Learn web development the right way.</p>
<button>Join now</button>

Read the code above. It is just three HTML tags: a heading, a paragraph and a button. The browser shows them, but everything is the default look — black text, plain font, a grey system button. There is no colour, no spacing, no personality. That is HTML on its own.

The same HTML, now with CSS

Now watch what happens when we add a <style> block on top of the exact same three tags. Do not worry about understanding every line yet — just notice how different it looks. We will explain each rule right after:

<style>
  body { font-family: sans-serif; background: #eef2ff; text-align: center; padding: 30px; }
  h1   { color: #4338ca; font-size: 40px; }
  p    { color: #5b6178; font-size: 18px; }
  button {
    background: #06b6d4; color: white; border: none;
    padding: 12px 24px; border-radius: 10px; font-size: 16px; cursor: pointer;
  }
</style>

<h1>CodingClave</h1>
<p>Learn web development the right way.</p>
<button>Join now</button>

Look closely: the bottom three lines (the <h1>, <p> and <button>) are exactly the same as before. Only the <style> block at the top is new. Here is what each rule inside it does:

• body { ... } — sets a nice sans-serif font, a soft blue page background, centres everything and adds breathing room (padding).
• h1 { ... } — paints the heading indigo and makes it large (font-size: 40px).
• p { ... } — gives the paragraph a softer grey colour and a comfortable size.
• button { ... } — turns the plain grey button into a cyan, rounded, white-text button with a hand cursor.