CSS Tutorial: The Style of the Web

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton that provides the structure of a webpage, CSS is the clothing, hairstyle, and overall aesthetic that brings it to life. It's the language we use to control the layout, colors, fonts, and visual presentation of HTML elements. The "Cascading" part is important: it means that styles can flow down (or cascade) from parent elements to child elements, and multiple stylesheets can be applied to one document.

How to Add CSS to HTML

There are three ways to include CSS in your project:

  1. External Stylesheet (Best Practice): You create a separate .css file and link to it from your HTML file's <head> section. This keeps your content (HTML) and presentation (CSS) separate, making your project easier to manage, especially for larger websites.
    2. <link rel="stylesheet" href="style.css">
  2. Internal Stylesheet: You place CSS rules directly inside a <style> tag within the HTML <head>. This is useful for single-page applications or for applying unique styles to just one page.
    3. <style>
  body {
    background-color: #0D1117;
  }
</style>
  3. Inline Styles: You apply styles directly to an HTML element using the style attribute. This has the highest specificity but is generally discouraged because it mixes content and presentation, making maintenance difficult and overriding other styles harder.
    4. <p style="color: red; font-size: 16px;">This is a red paragraph.</p>

Selectors: Targeting Elements

To style an element, you first need to select it. CSS provides a powerful set of selectors for this purpose. Understanding how to combine them and how their specificity works is key to mastering CSS.

Selector Type Example Description
Element (Tag) p { ... } Selects all <p> elements on the page.
Class .highlight { ... } Selects all elements with class="highlight". This is the most common and versatile selector.
ID #main-header { ... } Selects the single element with id="main-header". An ID must be unique on a page and has high specificity.
Descendant article p { ... } Selects all <p> elements that are anywhere inside an <article> element.
Pseudo-class a:hover { ... } Selects an element based on its state. This example styles a link when the user's mouse is over it. Others include :focus, :first-child, etc.

Specificity: When multiple CSS rules target the same element, the browser uses a specificity calculation to decide which rule wins. ID selectors are more specific than class selectors, which are more specific than element selectors. Inline styles are the most specific of all.

The Box Model: The Foundation of Layout

Every element in HTML can be thought of as living inside a rectangular box. The CSS box model describes how this box is structured and is fundamental to understanding layout and spacing.

CSS Box Model Diagram
  • Content: The actual content of the box, where text and images appear. Its size can be controlled by width and height properties.
  • Padding: The transparent space around the content, inside the border. It's like the bubble wrap around an item inside a shipping box. You can control it with padding or individual properties like padding-top.
  • Border: A border that goes around the padding and content. You can control its border-width, border-style (solid, dashed, etc.), and border-color.
  • Margin: The transparent space around the border. It pushes other elements away, creating space between boxes. It's controlled with margin or individual properties like margin-bottom.

Layout with Flexbox and Grid

Modern CSS offers two powerful layout systems:

Flexbox is a one-dimensional layout model perfect for aligning items in a row or a column. To use it, you set a container element's display property: display: flex;. You then use properties like justify-content to align items along the main axis and align-items to align them on the cross axis.

.nav-bar {
  display: flex;
  justify-content: space-between; /* Pushes items to the ends */
  align-items: center; /* Vertically centers items */
}

CSS Grid is a two-dimensional layout model, designed for creating complex grid layouts with both rows and columns. It's ideal for page-level layouts. You define a grid container with display: grid; and then define the structure of your columns and rows with grid-template-columns and grid-template-rows.

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr; /* A 200px sidebar and a flexible main area */
  grid-template-rows: auto 1fr auto; /* Header, main content, and footer */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}