Lesson 8.3: Styling with CSS

Introduction

In this lesson, we will explore the concept of styling web pages using CSS (Cascading Style Sheets). Understanding how to separate content (HTML) from presentation (CSS) is key to building accessible and maintainable websites. By the end of this lesson, students, you will be able to apply various styles to web elements and understand the fundamental principles behind styling a webpage.

Learning Objectives

Understand the separation of content (HTML) from presentation (CSS) and why it matters.
Learn about CSS selectors, properties, and values; applying styles to elements, classes, and IDs.
Get familiar with layout basics, including the box model, spacing, and simple responsive design ideas.
Discover how to maintain a consistent look across a site with a shared stylesheet.
Apply CSS to effectively style the appearance and layout of a web page.

The Importance of Separating Content and Presentation

The separation of content and presentation is a foundational design principle in web development. This principle allows for a more organized codebase and simplifies the process of updating the visual aspects of a webpage without altering its content markup.

Why It Matters

Maintainability: Separating HTML and CSS means that content changes do not require altering styles. For example, if you want to change the font size throughout your website, you can adjust it in the CSS file instead of changing each HTML element.
Accessibility: This separation aids in making websites accessible to screen readers and other assistive technologies since they can process the content without being affected by presentation styles.
Performance: CSS can be cached by the browser, which reduces the loading time of your website, leading to a better user experience.

CSS Selectors, Properties, and Values

CSS works by targeting HTML elements using selectors and applying specific styling rules defined by properties and values. Understanding how these elements interact is essential for effective styling.

Selectors

CSS selectors determine which HTML elements will be styled. Here are some common types of selectors:

Element Selector: Selects elements based on the tag name.

  p {
      color: blue;
  }

Class Selector: Selects elements with a specified class. Classes can be reused across different elements.

  .highlight {
      background-color: yellow;
  }

ID Selector: Selects an element based on its unique ID. Each ID must be unique within a page.

  #header {
      font-size: 24px;
  }

Properties and Values

CSS properties define the style attributes we want to change, and values specify what those changes will be.

Color Property: Changes the text color of elements.

  h1 {
      color: red;
  }

Background Color: Sets the color behind an element.

  body {
      background-color: white;
  }

Font Size: Controls the size of the text.

  p {
      font-size: 16px;
  }

Example of Using Selectors, Properties, and Values

In the following example, we will create a simple HTML structure and style it using CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 id="header">Welcome to My Web Page</h1>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p>This is a normal paragraph.</p>
</body>
</html>

/* styles.css */
#header {
    color: blue;
    font-size: 24px;
}

.highlight {
    background-color: yellow;
}

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

In this example, the h1 element has an ID selector that changes its text color and font size. The paragraphs utilize the class .highlight for background color.

Layout Basics: The Box Model

Understanding the box model is crucial for grasping how elements are displayed on a web page. Every HTML element is considered a rectangular box, which consists of:

Content: The text or image within the box.
Padding: The space between the content and the border.
Border: The border that surrounds the padding.
Margin: The space outside the border, separating the element from other elements.

Box Model Visualization

Let's visualize the box model for a <div> element:

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 15px;
}

The total width occupied by the box would be calculated as:

$\text{Total Width}$ = $\text{Width}$ + $2 \times$ \text{Padding} + $2 \times$ \text{Border} + $2 \times$ \text{Margin} = 200 + $2 \times 10$ + $2 \times 5$ + $2 \times 15$ = 260 \text{ pixels}

Example of Box Model

<div class="box">This is a box.</div>

In this example, the box has a total width of 260 pixels considering its margin, padding, and border. Understanding how to manipulate these properties is critical for effective layout design.

Simple Responsive Ideas

Responsive design ensures that a website is functional and aesthetically pleasing across various devices, from desktops to smartphones. CSS offers several techniques to build responsive layouts.

Media Queries

Media queries are a CSS feature that enables different styles based on device characteristics such as width, height, and orientation.

@media (max-width: 600px) {
    body {
        background-color: lightgrey;
    }
    h1 {
        font-size: 18px;
    }
}

In this media query, if the viewport width is 600 pixels or less, the background color changes to light grey, and the font size of h1 decreases.

Flexbox

Flexbox is a powerful layout tool in CSS that makes it easier to design flexible and responsive layouts.

.container {
    display: flex;
    justify-content: space-around;
}

In this example, the .container class will layout its children in a flexible row, distributing the available space evenly around them.

Consistency with Shared Stylesheets

One of the best practices in web development is maintaining a consistent look across your site using shared stylesheets. This means all your pages can link to a single CSS file, ensuring that any changes to styles affect all pages simultaneously.

Linking a Shared Stylesheet

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

Place this line in the <head> section of your HTML. This action links the HTML document to the styles.css file, enabling shared styling across multiple pages.

Conclusion

In this lesson, we've covered the fundamental aspects of styling with CSS, discussing the importance of separating content from presentation, understanding CSS selectors, properties, and values, as well as the box model, responsiveness, and maintaining consistency across a site. CSS is a powerful tool that, when used effectively, can greatly enhance the user experience of your website.

Study Notes

Separating HTML (content) and CSS (presentation) is crucial for maintainability and accessibility.
CSS selectors target elements, while properties define styles and values specify them.
The box model includes content, padding, border, and margin, affecting element layout.
Media queries and Flexbox help create responsive designs.
Shared stylesheets promote consistency across web pages.