Skip to main content

CSS, Bootstrap

Introduction​

This lecture explores how we style HTML documents using CSS and introduces Bootstrap, a powerful CSS framework for rapid, responsive web development.

What is Style?​

In an HTML document, style refers to the visual formatting of elements:

  • Font type, size, and color for headings and paragraphs
  • Background colors for sections
  • Size and shape of images
  • Appearance and behaviors of hyperlinks
  • Placement and alignment of elements

Key Concept: Styling separates design from structure, making HTML pages more maintainable.

What is CSS?​

  • Controls layout, appearance, spacing, colors, fonts, positioning
  • Applies styles hierarchically: parent styles apply to children
  • Enables consistent styling and easier maintenance

CSS Tutorial: W3Schools CSS Tutorial

Why Use CSS?​

  • Maintain consistency across web pages
  • Enable faster development and easier maintenance
  • Support responsive designs and mobile-first layouts

Applying Style to HTML​

Cascading Style Sheets (CSS)​

  • CSS is an external .css file containing rules that define the look and layout of a web page.
  • Linked into HTML documents to apply consistent styling across multiple pages.

Guidelines for Writing a CSS File​

  • A .css file should not contain any HTML tags.
  • It should consist only of CSS rules.
  • Save the file with a .css extension.

Linking a CSS file:

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

How CSS Works​

  • Hierarchy: Child elements inherit styles from parent elements unless overridden.
  • Overrides: More specific styles or later-declared styles override earlier ones.
  • Inline styles take precedence over external and internal styles.

Quick Test: Which will take precedence—an inline style or a linked stylesheet? Answer: Inline style (because it has higher specificity).

CSS Syntax​

selector {
  property: value;
}

Example:

body {
  font-size: 16pt;
  color: blue;
  background-color: pink;
}

h1 {
  font-size: 24pt;
  color: black;
}

p {
  margin-left: 10%;
  margin-right: 10%;
}

Adding CSS​

  • Inline:
<p style="color: red;">This is red text.</p>
  • Internal (in <head>):
<style>
  body {
    background-color: lightgrey;
  }
</style>
  • External:
<link rel="stylesheet" href="styles.css" />

Hierarchy:

  • Inline > Internal > External
  • Use !important to override

Selectors and Identifiers​

Selector TypeSyntaxExample
Elementh1h1 {}
ID#id#main {}
Class.class.highlight {}
Grouph1, pStyle multiple types
Nesteddiv > h1Child selector

Additional examples:

TypeSyntax ExampleDescription
Element + Classh1.demo_class { color: blue; }Targets <h1> with a specific class.
Groupingh1, h2 { color: purple; text-align: center; }Applies styles to multiple elements.

Overriding Styles​

Sometimes, you want a rule to always apply despite other rules.

Use !important:

<p style="color: green !important;">This paragraph will always be green.</p>

Warning: Use !important sparingly to avoid making your CSS difficult to maintain!

Useful Style Properties​

Some commonly styled properties:

  • font-family
  • font-size
  • color
  • background-color
  • margin
  • padding
  • border
  • width, height
  • text-align

Introduction to Bootstrap​

What is Bootstrap?​

  • An open-source CSS framework that simplifies designing responsive and mobile-first websites.
  • Provides pre-built components like buttons, forms, grids, cards, modals, and more.
  • Helps standardize design with minimal custom CSS.

Documentation: Bootstrap 5.3 Introduction

Bringing Bootstrap into Your Page​

Add the following <link> to your HTML <head> section:

<head>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
</head>

Bootstrap Components​

Example: Using Bootstrap Classes​

<button class="btn btn-primary">Primary Button</button>

Create a responsive grid:

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

Best Practices​

  • Write semantic and accessible HTML before styling.
  • Keep CSS files modular and clean.
  • Avoid excessive use of !important.
  • Prefer class selectors over element selectors for scalability.
  • Use frameworks like Bootstrap to speed up development and ensure responsiveness.

Practice Activities​

  • Build a basic homepage with HTML and CSS
  • Create a contact form using form elements
  • Apply styles using inline, internal, and external CSS
  • Use Bootstrap to add a navbar, layout grid, and styled components

Recommended Editors:

Reflection Questions​

  1. Which style rule has the highest priority: inline, internal, or external?
  2. What is the correct way to link an external CSS file?
  3. Name two advantages of using Bootstrap.

Summary​

  • CSS controls the visual style of web pages.
  • There are multiple ways to apply CSS: inline, internal, and external.
  • Bootstrap provides pre-built responsive components.
  • Good CSS practices result in faster, cleaner, and scalable web development.

Disclaimer: Generative AI was used in part to generate these lecture notes.