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
- CSS Zen GardenClick a design in choice pane to change the CSS sheet selected. Pick one scheme and download for later.
- W3Schools CSS TutorialA popular, easy-to-use site with extensive tutorials and references on web development languages. Users can experiment with changing code to see what happens. Particularly helpful for beginner and intermediate web developers.
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.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: