Skip to Main Content

Web Design: CSS Basics

Workshop Materials

CSS for Beginners

Explore the use of Cascading Style Sheets (CSS) for your website. We will discuss templates, page layouts, easy ways to create and adapt styles.

Web Resources

Books from the Catalog (Franklin)


What is CSS? What is the difference between CSS and HTML?

  • CSS stands for Cascading Style Sheets
  • HTML = "What it says" and CSS = "how it looks"
  • Separate CSS styles by browser, mobile phone, screen resolution, etc.
  • HTML = "Frame of building" and CSS = "paint, drywall, decorations"
  • Cascading means you can layer styles, from outside in - Order Guidance (
  • Three ways to include styles: inline, top of page and separate file - HTML Dog Tutorial Page

CSS Syntax

A rule has:
Selector: targets which element to change. Can be HTML tag (p, h1, h2, etc.), ID or Class, or more complex based on position of element in the document
Declaration: made up of properties (what to change) and values (how to change it),
e.g. color: red

(Image courtesy of Creative Commons - see full site)

Style sheets are composed of a series of rules.

Pay attention to the punctuation - Spaces don’t matter, but colons, semicolons, braces do! @ Penn

lynda logo provides over 77,000 training videos related to new technologies and software. Faculty, students, and staff can access Lynda through pennkey access via Lynda Campus.

Check out a few of Lynda's CSS courses: