Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. While HTML provides the structure of a webpage, CSS controls its visual appearance, including layout, colors, fonts, and animations.

CSS separates content from presentation, allowing you to maintain and update the look of your website without changing the underlying HTML structure.

How CSS Works

CSS works by selecting HTML elements and applying styles to them. The browser reads the CSS rules and renders the HTML elements according to the specified styles.

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

Basic CSS syntax

Selector: Targets the HTML element(s) to style
Property: The aspect of the element you want to change
Value: The specific setting you want to apply

Ways to Include CSS

There are three ways to include CSS in your HTML documents:

Inline CSS

Applied directly to individual HTML elements using the style attribute.

<p style="color: blue; font-size: 16px;">This is a blue paragraph.</p>

Inline styles have the highest specificity but make your HTML cluttered and difficult to maintain. Use sparingly.

Internal CSS

Defined within a <style> element in the <head> section of an HTML document.

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

External CSS (Recommended)

Stored in a separate .css file and linked to the HTML document using the <link> element.

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

And in your styles.css file:

p {
  color: blue;
  font-size: 16px;
}

External CSS is the best practice for most websites as it promotes separation of concerns, reusability, and easier maintenance.

CSS Selectors

Selectors are patterns used to select and style HTML elements. Here are some common types:

Basic Selectors

Element Selector

Selects all elements of a specified type.

p {
  color: blue;
}

Class Selector

Selects elements with a specific class attribute.

.highlight {
  background-color: yellow;
}

ID Selector

Selects a single element with a specific id attribute.

#header {
  background-color: black;
  color: white;
}

Universal Selector

Selects all elements.

* {
  margin: 0;
  padding: 0;
}

Combinators

Combinators explain the relationship between selectors:

/* Descendant selector (space) */
div p {
  color: red; /* Selects all <p> inside any <div> */
}

/* Child selector (>) */
div > p {
  color: blue; /* Selects all <p> that are direct children of <div> */
}

/* Adjacent sibling selector (+) */
h1 + p {
  font-weight: bold; /* Selects <p> that directly follows an <h1> */
}

/* General sibling selector (~) */
h1 ~ p {
  color: green; /* Selects all <p> that follow an <h1> */
}

CSS Properties

CSS offers hundreds of properties to style elements. Here are some essential categories:

Text Styling

p {
  color: #333;              /* Text color */
  font-family: Arial, sans-serif; /* Font family */
  font-size: 16px;          /* Font size */
  font-weight: bold;        /* Font weight */
  text-align: center;       /* Text alignment */
  line-height: 1.5;         /* Line height */
  text-decoration: underline; /* Text decoration */
}

Box Model

Every HTML element is represented as a rectangular box with content, padding, border, and margin areas.

div {
  width: 300px;           /* Content width */
  height: 200px;          /* Content height */
  padding: 20px;          /* Space between content and border */
  border: 2px solid #000; /* Border around the padding */
  margin: 30px;           /* Space outside the border */
}

Colors and Backgrounds

div {
  color: #0066cc;                  /* Text color */
  background-color: #f0f0f0;        /* Background color */
  background-image: url('bg.jpg');  /* Background image */
  background-repeat: no-repeat;     /* Control image repetition */
  background-position: center;      /* Position background image */
  opacity: 0.8;                     /* Element transparency */
}

The Cascade and Specificity

The “cascading” in CSS refers to the way styles are applied to elements. When multiple rules target the same element, the browser uses these principles to determine which styles to apply:

Importance: Styles marked with !important override other styles
Specificity: More specific selectors override less specific ones
Source Order: Later styles override earlier ones

Specificity hierarchy (from lowest to highest):

Element selectors (p, div)
Class selectors (.class), attribute selectors ([type="text"]), pseudo-classes (:hover)
ID selectors (#id)
Inline styles (style="" attribute)

Responsive Design with CSS

Responsive design ensures your website looks good on all devices. Key techniques include:

Media Queries

/* Styles for screens smaller than 768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  
  .container {
    width: 100%;
  }
}

Flexible Layouts

/* Using percentages for responsive widths */
.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Using viewport units */
.hero {
  height: 100vh; /* 100% of viewport height */
  width: 100vw;  /* 100% of viewport width */
}

CSS Units

CSS provides various units for expressing lengths:

Absolute Units

px (pixels)
pt (points)
in (inches)
cm (centimeters)
mm (millimeters)

Relative Units

% (percentage of parent)
em (relative to font-size)
rem (relative to root font-size)
vw (viewport width)
vh (viewport height)

For responsive design, prefer relative units like rem, em, and % over absolute units like px.

Best Practices

Use external CSS files to separate content from presentation
Follow a consistent naming convention for classes (e.g., BEM methodology)
Organize your CSS with comments and logical grouping
Minimize specificity conflicts by keeping selectors simple
Use responsive design techniques for multi-device compatibility
Consider using CSS preprocessors like Sass or Less for larger projects

Next Steps

Now that you understand the basics of CSS, you can:

Learn more about CSS Selectors and their power
Explore the CSS Box Model in depth
Study CSS Typography for better text styling
Master CSS Flexbox and CSS Grid for advanced layouts

Basics

Layout

Advanced

What is CSS?

How CSS Works

Ways to Include CSS

CSS Selectors

Basic Selectors

Element Selector

Class Selector

ID Selector

Universal Selector

Combinators

CSS Properties

Text Styling

Box Model

Colors and Backgrounds

The Cascade and Specificity

Responsive Design with CSS

Media Queries

Flexible Layouts

CSS Units

Absolute Units

Relative Units

Best Practices

Next Steps

​What is CSS?

​How CSS Works

​Ways to Include CSS

​CSS Selectors

​Basic Selectors

Element Selector

Class Selector

ID Selector

Universal Selector

​Combinators

​CSS Properties

​Text Styling

​Box Model

​Colors and Backgrounds

​The Cascade and Specificity

​Responsive Design with CSS

​Media Queries

​Flexible Layouts

​CSS Units

Absolute Units

Relative Units

​Best Practices

​Next Steps

What is CSS?

How CSS Works

Ways to Include CSS

CSS Selectors

Basic Selectors

Combinators

CSS Properties

Text Styling

Box Model

Colors and Backgrounds

The Cascade and Specificity

Responsive Design with CSS

Media Queries

Flexible Layouts

CSS Units

Best Practices

Next Steps