Session 1.5 – CSS Introduction and Types

Module 1: Introduction to Web Design | Duration: 1 hr

Learning Objectives

By the end of this session, students will be able to:

  • Understand what CSS is and its role in web development
  • Differentiate between inline, internal, and external CSS
  • Apply different types of CSS to HTML documents
  • Use various CSS selectors effectively
  • Understand CSS specificity and the cascade
  • Follow best practices for organizing CSS code

Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. While HTML provides structure, CSS controls the visual appearance and layout of web pages.

HTML

Structure & Content

CSS

Presentation & Style

JavaScript

Behavior & Interaction

What is CSS?

CSS stands for Cascading Style Sheets. It's a language that describes how HTML elements should be displayed on screen, paper, or in other media.

Key Features of CSS
  • Separation of Concerns: Separates content (HTML) from presentation (CSS)
  • Reusability: One stylesheet can control multiple pages
  • Maintainability: Easy to update styles across entire websites
  • Efficiency: Reduces code repetition
  • Flexibility: Responsive designs for different devices
CSS Syntax
selector {
    property: value;
    property: value;
}

/* Example */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}
Selector

Targets HTML element(s) to style

Property

The style attribute to change

Value

The new setting for the property

Types of CSS

There are three ways to apply CSS to HTML documents:

1. Inline CSS

Styles applied directly to HTML elements using the style attribute.

<h1 style="color: blue; font-size: 24px;">Hello World</h1>
<p style="color: red; text-align: center;">This is a paragraph.</p>
Advantages
  • Highest specificity
  • Quick testing and debugging
  • Useful for one-time styles
Disadvantages
  • Not reusable
  • Hard to maintain
  • Mixes structure with presentation
  • Increases page size
2. Internal CSS (Embedded)

Styles defined within the <style> tag in the HTML document's <head> section.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        p {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
</body>
</html>
Advantages
  • Affects entire HTML document
  • Better than inline CSS
  • No external file needed
  • Useful for single-page sites
Disadvantages
  • Not reusable across pages
  • Increases HTML file size
  • Not cached by browser
  • Harder to maintain large sites
3. External CSS (Recommended)

Styles stored in separate .css files and linked to HTML documents.

HTML File:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
</body>
</html>
styles.css File:
h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: red;
    text-align: center;
}
Advantages
  • Reusable across multiple pages
  • Smaller HTML files
  • Cached by browsers (faster)
  • Easy to maintain
  • Complete separation of concerns
Disadvantages
  • Extra HTTP request (minor)
  • Page may render before CSS loads
  • Need to manage multiple files
Best Practice

Use External CSS for production websites. It provides the best separation of concerns, maintainability, and performance through browser caching.

CSS Selectors

Selectors target specific HTML elements to apply styles. Understanding selectors is crucial for effective CSS.

Selector Syntax Description Example
Universal * Selects all elements * { margin: 0; }
Element element Selects all elements of a type p { color: blue; }
Class .classname Selects elements with specific class .highlight { background: yellow; }
ID #idname Selects element with specific ID #header { height: 100px; }
Descendant parent child Selects all children within parent div p { color: red; }
Child parent > child Selects direct children only ul > li { list-style: none; }
Adjacent Sibling element + element Selects immediately following sibling h1 + p { margin-top: 0; }
General Sibling element ~ element Selects all following siblings h1 ~ p { color: gray; }
Attribute [attribute] Selects elements with attribute [type="text"] { border: 1px solid; }
Pseudo-class :pseudo-class Selects elements in specific state a:hover { color: red; } 
/* Element Selector */
p {
    color: blue;
}

/* Class Selector */
.button {
    background-color: green;
    padding: 10px;
}

/* ID Selector */
#main-header {
    font-size: 32px;
}

/* Combining Selectors */
div.container p {
    line-height: 1.5;
}

/* Multiple Selectors */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

/* Pseudo-classes */
a:hover {
    text-decoration: underline;
}

button:active {
    transform: scale(0.98);
}

CSS Specificity

Specificity determines which CSS rule applies when multiple rules target the same element. It's calculated based on selector types.

Specificity Hierarchy (Highest to Lowest)
  1. Inline styles: style="..." (Specificity: 1,0,0,0)
  2. IDs: #id (Specificity: 0,1,0,0)
  3. Classes, attributes, pseudo-classes: .class, [attr], :hover (Specificity: 0,0,1,0)
  4. Elements, pseudo-elements: div, ::before (Specificity: 0,0,0,1)
Example Specificity Calculations:
/* 0,0,0,1 */
p { color: black; }

/* 0,0,1,0 */
.text { color: blue; }

/* 0,1,0,0 */
#unique { color: green; }

/* 0,0,1,1 */
p.text { color: red; }

/* 0,1,1,1 */
div#unique.text { color: purple; }

/* 1,0,0,0 */
<p style="color: yellow;">
Specificity Rules:
  • Higher specificity wins
  • If equal, last rule wins
  • !important overrides everything (avoid using)
  • Inline styles trump all
  • IDs are more specific than classes
  • Classes are more specific than elements

The Cascade

The "Cascading" in CSS refers to the algorithm that determines which styles apply when multiple rules target the same element.

Cascade Priority Order
  1. Importance: !important declarations (avoid when possible)
  2. Specificity: More specific selectors win
  3. Source Order: Later rules override earlier ones
/* These rules target the same element */

/* Rule 1 - Specificity: 0,0,0,1 */
p {
    color: black;
}

/* Rule 2 - Specificity: 0,0,1,1 (WINS - higher specificity) */
p.intro {
    color: blue;
}

/* Rule 3 - Even though it comes last, lower specificity */
p {
    color: red;  /* Won't apply if element has 'intro' class */
}

/* Rule 4 - Overrides everything (BAD PRACTICE) */
p {
    color: green !important;
}
Best Practices
  • Keep specificity low for easier maintenance
  • Use classes instead of IDs for styling
  • Avoid !important unless absolutely necessary
  • Organize CSS from general to specific
  • Use external stylesheets for production
  • Comment complex CSS rules

Session Summary

Key Points
  • CSS separates presentation from content and uses selector-property-value syntax
  • Three types: Inline (style attribute), Internal (<style> tag), External (.css file - recommended)
  • External CSS offers best maintainability, reusability, and performance
  • Selectors include element, class, ID, descendant, and pseudo-classes
  • Specificity determines which rule applies: inline > ID > class > element
  • The cascade considers importance, specificity, and source order
Next Session Preview

In the next session, we will explore Basic CSS Properties for typography, colors, spacing, and text formatting to create visually appealing web pages.

Previous Session Course Home