CSS Essentials

contain

What is CSS?

CSS = Cascading Style Sheets

CSS controls how HTML elements look:

  • Colors and fonts
  • Spacing and layout
  • Animations and effects

Without CSS, websites would be plain text with default browser styling.

Three Ways to Add CSS

  1. External (recommended)

    <link rel="stylesheet" href="styles.css">

  2. Internal (in <head>)

    <style> h1 { color: blue; } </style>

  3. Inline (avoid!)

    <p style="color: red;">Text</p>

Why "Cascading"?

When multiple styles conflict, CSS follows this priority:

  1. Inline styles (highest priority)
  2. Internal/External stylesheets (last one wins)
  3. Browser defaults (lowest priority)

More specific selectors also win over less specific ones.

CSS Syntax

selector {
  property: value;
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

Selectors

Basic Selectors

Selector Targets Example
Element All elements of type p { }
Class Elements with class .intro { }
ID Element with ID #header { }
Universal All elements * { }

Element Selector

/* All paragraphs */
p {
  color: gray;
  line-height: 1.6;
}

/* All headings */
h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Class Selector

HTML:

<p class="highlight">Important text</p>
<p>Regular text</p>
<p class="highlight">Also important</p>

CSS:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Classes can be used on multiple elements.

ID Selector

HTML:

<header id="main-header">...</header>

CSS:

#main-header {
  background-color: navy;
  color: white;
}

IDs should be unique - only one per page!

Combining Selectors

/* Element with class */
p.intro { }

/* Element with ID */
div#sidebar { }

/* Multiple classes */
.btn.primary { }

/* Descendant (inside) */
nav a { }

/* Direct child */
ul > li { }

Selector Specificity

From lowest to highest priority:

  1. Element selectors: p, div, h1
  2. Class selectors: .intro, .btn
  3. ID selectors: #header, #main
  4. Inline styles: style="..."

When in doubt, use classes!

Common Properties

Colors

/* Named colors */
color: red;
background-color: lightblue;

/* Hex colors */
color: #ff0000;
background-color: #3498db;

/* RGB / RGBA */
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 0, 0.5); /* 50% transparent */

Typography

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;      /* or 400, 700, etc. */
font-style: italic;
text-align: center;     /* left, right, justify */
text-decoration: underline;
line-height: 1.5;

Using Google Fonts

<!-- In <head> -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

The Box Model

Every Element is a Box

  • Content - the actual content
  • Padding - space inside the border
  • Border - the edge
  • Margin - space outside the border

Box Model Properties

.box {
  /* Content size */
  width: 200px;
  height: 100px;

  /* Padding (inside) */
  padding: 20px;

  /* Border */
  border: 2px solid black;

  /* Margin (outside) */
  margin: 10px;
}

Shorthand Properties

/* All four sides */
padding: 10px;

/* Vertical | Horizontal */
padding: 10px 20px;

/* Top | Right | Bottom | Left (clockwise) */
padding: 10px 20px 10px 20px;

/* Individual sides */
padding-top: 10px;
margin-left: 20px;

Box Sizing

/* Default: width doesn't include padding/border */
box-sizing: content-box;

/* Better: width includes padding/border */
box-sizing: border-box;

/* Apply to all elements (recommended) */
* {
  box-sizing: border-box;
}

Display Property

/* Block: takes full width, starts on new line */
display: block;    /* div, p, h1 default */

/* Inline: flows with text, no width/height */
display: inline;   /* span, a, strong default */

/* Inline-block: flows inline but accepts width/height */
display: inline-block;

/* None: hides element completely */
display: none;

div and span

<div> - Block Container

<div class="card">
  <h2>Title</h2>
  <p>Content here...</p>
</div>

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

<span> - Inline Container

<p>The price is <span class="price">$99</span> today!</p>

.price {
  color: green;
  font-weight: bold;
  font-size: 1.2em;
}

DevTools: Inspect CSS

  1. Right-click element → Inspect
  2. See applied styles in Styles panel
  3. Edit values live to experiment
  4. See computed values
  5. Visualize the box model

CSS Reference