Skip to main content
Click logo to go to Libraries homepage

Web Design: CSS Basics

Workshop Materials

Building a Website: HTML Basics

Learn about different methods for building a website and how to get started hand-coding a simple site with HTML5, the latest version of the HTML standard.


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)

Introduction

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 (W3Schools.com)
  • 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!

Lynda.com @ Penn

lynda logo
Lynda.com 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: