Wednesdays starting April 27th, 2011 6 – 7:30 PM
Learn CSS in a practical workshop format!
We will use the 2010 theme that comes with WordPress to demonstrate the features of CSS. As you learn the rules, you can see how you can dramatically modify a theme to adapt it to your requirements. By the end of the class, you will be able to create your own stylesheets for your own HTML pages.
Students will learn the basics of CSS, the relationship of the stylesheet to your WordPress installation, how to use firebug – a tool for quick testing of CSS changes, and how to integrate graphics with your layout elements. We will look at samples of existing code to illustrate different techniques. We will compare the CSS for 2010 with another WordPress theme, and to a theme on a Drupal site, so that you can see the similarities and will be able to generalize your new knowledge.
Students should be familiar with WordPress and with some HTML. You should have a WordPress site you are willing to experiment with installed already. Most hosts will allow you to set up multiple WordPress sites. If you are hosting at WordPress for free you will need to pay the $15 WordPress charges to let you edit the CSS that comes with your free WordPress installation.
Class 1: how WordPress puts together a page for a browser
what is a stylesheet?
how does a stylesheet work with the html
how to edit your stylesheet from WordPress
what to edit
first CSS: coloring text, backgrounds, and borders
why is it called a cascading stylesheet?
— last 15 minutes = different ways to edit your stylesheet and best practices
what is a childtheme?
Class 2: using firebug
CSS effects: managing layout with margin and padding
CSS fundamentals: divs, spans, ids and classes
playing with images and backgrounds
more about the cascade and the DOM
CSS effects: text — sizing, fonts, line-spacing, bold etc
Class 3: more divs, spans, ids and classes
CSS layout with floats: exercise — moving the sidebar
how a menu is constructed
still more about the cascade
CSS fundamentals: links, lists, the “a” tag in HTML
Internet Explorer and the world of browser incompatibility
Class 4: CSS layout with position relative and position absolute
adding graphics to your CSS elements
adding fancy fonts to your websites
CSS and plugins
how to make a childtheme in WordPress
how to make a page template in WordPress and create new CSS
CSS3 and HTML 5
Class 5: Advanced CSS technique:
How to cut up a PSD (Photoshop document) and install it on your site.
This session will be taught by Anca Mosoiu.
Handouts: list of HTML tags, how to add fonts, how to create a template, sample HTML from 2010 theme
Important websites: w3schools
Recommended reading: Zen of CSS, Handmade CSS