CSS ZEN GARDEN – The Beauty of CSS Design
(http://www.csszengarden.com/)
A demonstration of what can be accomplished through CSS-based design.
Quizzes
Activity – CSS Multiple Choice Quiz – Test Your Knowledge
Activity – CSS Quiz – Using CSS and Selectors
Activity – CSS Quiz – Positioning and Layout
Activity – CSS Quiz – Advanced – Using CSS, Selectors and the Box Model
PowerPoint – What are Cascading Stylesheets (CSS)?
Handout – What are Cascading Style Sheets? – Short Version
Handout – What are Cascading Style Sheets – Long version
Handout – Cascading Stylesheets
Activity – Introduction to CSS – Starter Exercise
Activity – CSS Practical Exercises
Handout – Further CSS Selectors
Activity – Changing the Size of Fonts
Handout – CSS Properties and Values
Handout – Advanced Cascading Style Sheets
Activity – CSS-Overflow Property
Activity – Working with Internal Frames
Activity – Scrollable content areas with CSS
Activity – Beginning CSS – The Basics – Introducing Cascading Style Sheets
Beginning CSS – The Basics Zipped Files
Beginning_CSS_The_Basics text file
Activity – CSS Exercises – Section1 – Getting Started
Activity – CSS Exercises – Section2 – Boxes and Selectors
Activity – CSS Exercises – Section3 – Text Formatting
Activity – CSS – Simple Box Model Exercises
Images for CSS Box Model Exercises
Activity – More About the CSS Box Model
Activity – CSS3 Rounded Corners
Activity – Introduction to CSS – Box Model and Rounded Corners Exercises
PowerPoint – Cascading Stylesheets (CSS) – Intermediate – Page Layout
Activity – Float tutorial – Simple Exercises using CSS Floats
(image.gif)
Handout – CSS Positioning Basics
Activity – Single Column CSS Layouts
Activity – Creating More Classic CSS Layouts
More Classic Layouts Zipped File
Activity – First CSS Page Layout Tutorial
FirstCSSPageLayoutTutorial Zipped File
Activity – Creating a 2-Column Layout Using Floats
Two-Column Liquid Layout Using Floats – No CSS (html file)
Activity – Creating a 3-Column Layout Using Floats
Three-Column Liquid Layout Using Floats – No CSS (html file)
Activity – Creating a 2-Column Layout With Colour
2 Column with Colour Zipped Files
Template for Web Page – CSS Layout and Navigation Bar (html file)
Activity – Creating a Simple Flexible 3-Column CSS Page Layout
Selectors Exercise Zipped File
Activity – CSS Positioning and Layout
Images for CSS Positioning and Layout Zipped File
Activity – CSS Positioning and Layout – Task 1
Activity – Creating a Simple CSS Navigation Bar Using Lists
Navbar Using Lists – Incomplete Zipped Files
(arrow.gif)
Activity – Basic CSS Navigation
Activity – Creating Lists, Menus and Navigation Bars
Images for Lists,Menus and Navigation Bars Zipped File
Activity – Creating a Simple CSS Navigation Bar
Images for My CSS Navigation Zipped File
Activity – CSS Navigation 1 – Replacing Image-Based Navigation with CSS
Activity – CSS Navigation 2 – Styling a Structural List as a Navigation Menu
Activity – CSS Navigation 3 – Use CSS to Create Rollover Navigation without Images or JavaScript
Activity – CSS Navigation 4 – Using CSS and Lists to Create a Navigation System with Sub-Navigation
Activity – CSS Navigation 5 – Creating a Horizontal Menu using CSS and Lists
Activity – CSS Navigation 6 – Creating Button-Like Navigation using CSS
Activity – CSS Navigation 7 – Creating Tabbed Navigation with CSS
Activity – CSS Navigation 8 – Creating Pure CSS Drop-Down Menus
Images for My CSS Navigation Zipped File
Activity – Introducing CSS3 Animations
Activity – Learning CSS3 – Animations and Transitions – Introducing Transforms
Activity – Introducing CSS3 Transitions
Activity – Introducing CSS3 Transforms
Activity – Learning CSS3 – Animations and Transitions – Building a Bicycle
Activity – Learning HTML and CSS -The Diving Club – Create a Basic HTML Page
Activity – Learning HTML and CSS -The Diving Club – Adding Some Style
Activity – Learning HTML and CSS -The Diving Club – Shaping Up Using CSS
Activity – Learning HTML and CSS -The Diving Club – Using Images on Your Website
Activity – Learning HTML and CSS -The Diving Club – Tables – Tools for Organizing Data
Activity – Learning HTML and CSS -The Diving Club – Forms – Interacting with Your Audience
Diving Club – Basic Zipped Files
Activity – CSS Tutorial 1 – Creating your First Styles
CSS Tutorial Site Zipped Files
Activity – CSS Tutorial 2 – Working with Selectors
Activity – CSS Tutorial 3 – Saving Time with Inheritance
Activity – CSS Tutorial 4 – The Cascade in Action
Activity – CSS Tutorial 5 – Text Formatting in Action
Activity – CSS Tutorial 6 – Margins, Backgrounds and Borders
Activity – CSS Tutorial 7 – Creating a Photo Gallery
Activity – CSS Tutorial 8 – Using Background Images
Activity – CSS Tutorial 9 – Styling Links
Activity – CSS Tutorial 10 – Styling a Table
Activity – CSS Tutorial 11 – Styling a Form
Activity – CSS Tutorial 12 – Multiple Column Layouts
Activity – CSS Tutorial 13 – Negative Margin Layout
Activity – CSS Tutorial 14 – Positioning Page Elements
Activity – CSS Tutorial 15 – Building a Print Style Sheet
Activity – CSS Tutorial 1 – Practice – Creating your First Styles
Activity – CSS Tutorial 2 – Practice – Working with Selectors
Activity – CSS Tutorial 3 – Practice – Saving Time with Inheritance
Activity – CSS Tutorial 4 – Practice – The Cascade in Action
Activity – CSS Tutorial 5 – Practice – Text Formatting in Action
Activity – CSS Tutorial 9 – Practice – Styling links
CSS Tutorial Practice Site Zipped Files
Activity – Home Page Design – DogWorld
Images for DogWorld Zipped File
W3C – The Box Model (http://www.w3.org/TR/CSS2/box.html)
W3C – Training – The CSS Box Model (http://www.w3.org/community/webed/wiki/CSS/Training/Box_model)
The following explain importing stylesheets using @import:
Handout – Planning, organizing, and maintaining your stylesheets
Content with Style – Modular CSS (http://www.contentwithstyle.co.uk/content/modular-css)
High Performance Web Sites Blog – don’t use @import (http://www.stevesouders.com/blog/2009/04/09/dont-use-import/)
What’s the Difference Between @import and link for CSS? (http://webdesign.about.com/od/beginningcss/f/css_import_link.htm)
Using @import in Cascading Style Sheets (http://webdesign.about.com/cs/css/qt/tipcssatimport.htm)