Lecture 8: Introduction to CSS

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-05

Lecture 8

Introduction to CSS

Week 2 | Unit I: HTML Forms & CSS Introduction
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

  • Understand what CSS is and why it matters
  • Apply CSS using three methods
  • Write CSS selectors and rules
  • Use basic CSS properties for styling
  • Link external stylesheets

CSS: Cascading Style Sheets

CSS separates content from presentation

  • HTML provides structure
  • CSS provides styling
  • JavaScript provides behavior
HTML = Skeleton (structure)
CSS  = Clothes & appearance
JS   = Movement & interaction

Three Ways to Apply CSS

1. Inline CSS

<p style="color: red;">
  Red text
</p>

Least preferred

2. Internal CSS

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

In <head> tag

3. External CSS

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

Best practice!

CSS Rule Syntax

┌─────────────────────────────────────┐
│ selector { property: value; }       │
└─────────────────────────────────────┘

        ↓          ↓          ↓
     What    Which        To what
    to style  property    value

Example:

p {
    color: red;
    font-size: 16px;
    background-color: yellow;
}

Common CSS Selectors

Element Selector - Select all <p> tags

p { color: blue; }

Class Selector - Select by class attribute (. prefix)

.highlight { background: yellow; }

ID Selector - Select by id attribute (# prefix)

#header { font-size: 24px; }

Classes vs IDs

<!-- Classes (reusable) -->
<p class="highlight">Important text</p>
<p class="highlight">More important text</p>
<span class="highlight">Also important</span>

<!-- IDs (unique) -->
<div id="header">Page Header</div>
<h1>Title</h1>
<!-- There should only be ONE element with id="header" -->

In CSS:

.highlight { color: red; }    /* Affects all class="highlight" */
#header { background: blue; } /* Affects id="header" only */

CSS Color Properties

color: red;                    /* Text color */
background-color: #f0f0f0;     /* Background color */
border: 2px solid blue;        /* Border color */
opacity: 0.8;                  /* Transparency (0-1) */

Color formats:

color: red;              /* Named color */
color: #FF0000;          /* Hexadecimal */
color: rgb(255, 0, 0);   /* RGB values */
color: rgba(255, 0, 0, 0.5); /* RGB with alpha */

CSS Font Styling

font-family: Arial, sans-serif;  /* Font type */
font-size: 16px;                 /* Size -->
font-weight: bold;               /* Bold, 100-900 -->
font-style: italic;              /* Italic -->
text-align: center;              /* Alignment -->
text-decoration: underline;      /* Underline, overline, etc -->

Safe fonts:

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, serif;
font-family: 'Times New Roman', serif;

The CSS Box Model

Every element has padding, border, and margin:

╔════════════════════════════════╗
║       MARGIN (Outside)         ║
║  ┌──────────────────────────┐  ║
║  │ BORDER                   │  ║
║  │  ┌────────────────────┐  │  ║
║  │  │ PADDING (Inside)   │  │  ║
║  │  │  ┌──────────────┐  │  │  ║
║  │  │  │   CONTENT    │  │  │  ║
║  │  │  └──────────────┘  │  │  ║
║  │  └────────────────────┘  │  ║
║  └──────────────────────────┘  ║
╚════════════════════════════════╝

Margin & Padding

margin: 10px;              /* Space outside (all sides) -->
padding: 20px;             /* Space inside (all sides) -->
margin: 10px 20px;         /* Top/bottom, left/right -->
padding: 10px 20px 30px 40px; /* Top, right, bottom, left -->
border: 2px solid red;     /* Width, style, color -->

Individual sides:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

Dimensions in CSS

width: 300px;           /* Fixed width in pixels -->
width: 100%;            /* Percentage of parent -->
width: 100vw;           /* Percentage of viewport -->
height: auto;           /* Automatic height -->
max-width: 500px;       <!-- Responsive: max size -->

Responsive sizing:

width: 100%;           /* Fill parent container */
max-width: 1200px;     /* But don't exceed 1200px */
height: auto;          /* Maintain aspect ratio */

Linking External CSS (Best Practice)

Create a separate style.css file:

/* style.css */
body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    line-height: 1.6;
    margin-bottom: 15px;
}

In your HTML:

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

One CSS file styles all HTML pages!

CSS Best Practices

  1. Use external stylesheets - Separate content and design
  2. Use meaningful class names - .red-button not .x123
  3. Keep CSS organized - Group related styles
  4. Avoid inline styles - Use classes instead
  5. Use CSS variables - For consistent colors/sizes
  6. Mobile-first approach - Design for mobile, enhance for desktop
  7. Validate your CSS - Check for errors

CSS Custom Properties (Variables)

Define and reuse values:

:root {
    --primary-color: #0066cc;
    --secondary-color: #ff9900;
    --font-size: 16px;
}

h1 { color: var(--primary-color); }
p { color: var(--secondary-color); }
button { font-size: var(--font-size); }

Change color in one place, updates everywhere!

Resources & References

Questions?

Next: Week 3 - CSS Styling & JavaScript Introduction