← Back to Module

CSS Fundamentals

CMU422: Fundamentals of Web Design - Session 3

Birmingham Newman University

Lecturer: James Williams

Styling and presenting your HTML content

3-hour session • 26 slides • 2 interactive tasks

Session Timeline:

  • 10 min: Registration & waiting
  • 20 min: Opening slides
  • 45 min: Task 1
  • 15 min: Break/Catch up
  • 20 min: Secondary slides
  • 45 min: Task 2
  • Remaining: Self-study

Learning Objectives

  • Understand what CSS is and its role in web development
  • Learn CSS syntax and selectors
  • Master essential CSS properties
  • Apply CSS to HTML documents
  • Create basic styling and layouts

What is CSS?

CSS = Cascading Style Sheets
  • Describes how HTML elements should be displayed
  • Controls layout, colors, fonts, and visual design
  • Separates content (HTML) from presentation (CSS)
  • Enables responsive and accessible design
h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

Watch: CSS in 90 Seconds

Quick introduction to CSS - the styling language for web pages

CSS Syntax

selector {
  property: value;
  property: value;
}
  • Selector: Targets HTML elements
  • Property: What you want to change
  • Value: How you want to change it
  • Declaration: Property-value pair
  • Rule: Complete selector + declarations

CSS Selectors

/* Element selector */
h1 { color: red; }

/* Class selector */
.highlight { background: yellow; }

/* ID selector */
#header { font-size: 20px; }

/* Descendant selector */
div p { margin: 10px; }
  • Element: Targets all elements of that type
  • Class: Targets elements with specific class
  • ID: Targets element with specific ID
  • Descendant: Targets nested elements

CSS Specificity

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

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

/* Specificity: 0,1,0,0 */
#content { color: red; }

/* Specificity: 0,0,0,0 */
* { color: green; }
  • Determines which styles are applied
  • Higher specificity wins
  • ID > Class > Element > Universal
  • Use !important sparingly

Adding CSS to HTML

<!-- Method 1: External CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Method 2: Internal CSS -->
<style>
  h1 { color: blue; }
</style>

<!-- Method 3: Inline CSS -->
<h1 style="color: blue;">Title</h1>
  • External: Best for multiple pages
  • Internal: Good for single page
  • Inline: Avoid for maintainability

Text Properties

h1 {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  line-height: 1.5;
}

Sample Styled Text

CSS Color Values

/* Named colors */
color: red;

/* Hexadecimal */
color: #ff0000;
color: #f00;

/* RGB */
color: rgb(255, 0, 0);

/* RGBA (with transparency) */
color: rgba(255, 0, 0, 0.5);
Named: red
Hex: #ff0000
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5)

Background Properties

.box {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
Background color example

The CSS Box Model

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}
Content Area
  • Content: Actual content area
  • Padding: Space inside border
  • Border: Border around element
  • Margin: Space outside border

Border Properties

.border-demo {
  border-width: 3px;
  border-style: solid;
  border-color: #007bff;
  border-radius: 10px;
}
Rounded border example
Dashed border example

Display Properties

/* Block elements */
.block { display: block; }

/* Inline elements */
.inline { display: inline; }

/* Inline-block elements */
.inline-block { display: inline-block; }

/* Hidden elements */
.hidden { display: none; }
Block Element
Inline Element Inline-Block

CSS Positioning

/* Static (default) */
.static { position: static; }

/* Relative */
.relative { position: relative; top: 10px; left: 20px; }

/* Absolute */
.absolute { position: absolute; top: 0; right: 0; }

/* Fixed */
.fixed { position: fixed; bottom: 20px; right: 20px; }
Absolute

CSS Units

/* Absolute units */
font-size: 16px;
width: 2in;
height: 3cm;

/* Relative units */
font-size: 1.5em;
width: 50%;
height: 100vh;
margin: 1rem;
  • px: Pixels (fixed)
  • %: Percentage of parent
  • em: Relative to font size
  • rem: Relative to root font size
  • vh/vw: Viewport height/width

CSS Comments

/* This is a CSS comment */

/* Header styles */
header {
  background: #333;
  color: white;
}

/* TODO: Add responsive styles */
/* @media (max-width: 768px) { ... } */
  • Use /* */ for comments
  • Comments are ignored by browsers
  • Help document your code
  • Can be single or multi-line

CSS Best Practices

  • Use meaningful class names
  • Keep selectors simple and specific
  • Organize properties logically
  • Use consistent naming conventions
  • Comment complex rules
  • Minimize use of !important
  • Test across different browsers
Remember: Clean, readable CSS is easier to maintain and debug.

Task 1: Basic CSS Styling

Instructions:

  1. Create a new HTML file called styled-page.html
  2. Add internal CSS in the <head> section
  3. Style the following elements:
    • Body: Set background color and font family
    • H1: Blue color, centered, large font size
    • Paragraphs: Dark gray color, line height 1.6
    • Links: Blue color, no underline, hover effect
    • Create a styled box with border and padding
  4. Add some sample content to test your styles

Time: 45 minutes

This task will help you understand basic CSS syntax and styling

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

CSS Inheritance

body {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.5;
}

/* All child elements inherit these properties */
  • Child elements inherit some properties from parents
  • Inherited: font-family, color, line-height
  • Not inherited: margin, padding, border, background
  • Use inherit to force inheritance

The CSS Cascade

/* Rule 1: User agent (browser default) */
/* Rule 2: User styles */
/* Rule 3: Author styles (your CSS) */
/* Rule 4: Author !important */
/* Rule 5: User !important */
  • CSS stands for "Cascading Style Sheets"
  • Multiple rules can apply to the same element
  • Specificity and order determine which wins
  • Later rules override earlier ones

CSS Shorthand Properties

/* Long form */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Shorthand */
margin: 10px 20px;

/* Even shorter */
margin: 10px;
  • Combine related properties into one
  • Saves time and reduces code
  • Common shorthands: margin, padding, border, background
  • Order matters: top, right, bottom, left

CSS Debugging Tips

  • Use browser developer tools
  • Check specificity conflicts
  • Verify property names and values
  • Test with temporary borders
  • Use CSS validation tools
  • Check for typos and syntax errors
/* Debug with temporary border */
* { border: 1px solid red !important; }

Organizing CSS

  • Reset/Normalize: Browser consistency
  • Base styles: Typography, colors, defaults
  • Layout: Grid, containers, positioning
  • Components: Buttons, forms, navigation
  • Utilities: Helper classes
  • Responsive: Media queries

Task 2: Advanced CSS Layout

Instructions:

  1. Create a new HTML file called layout-demo.html
  2. Build a simple webpage layout with:
    • Header: Fixed at top, full width, dark background
    • Navigation: Horizontal menu with hover effects
    • Main content: Two-column layout with sidebar
    • Footer: Fixed at bottom, centered text
  3. Use different background colors for each section
  4. Add proper spacing and typography
  5. Make it responsive with basic media queries
  6. Include sample content in each section

Time: 45 minutes

This task will help you understand CSS layout and positioning

CSS Tools and Resources

  • Browser DevTools: Chrome, Firefox, Safari
  • CSS Validators: W3C CSS Validator
  • CSS Preprocessors: Sass, Less, Stylus
  • CSS Frameworks: Bootstrap, Foundation
  • CSS Grid Generators: CSS Grid Garden
  • Color Tools: Color pickers, palettes

Session Summary

  • CSS controls the visual presentation of HTML
  • Use selectors to target specific elements
  • Understand the box model and positioning
  • Follow best practices for maintainable code
  • Test your styles across different browsers

Next Session:

CSS Layout and Box Model - Advanced positioning and layout techniques