How long have you been thinking about taking the step from print to web? You may know a lot about Photoshop, paragraph styles in InDesign, or the steps it takes to get that transparency to print. So why not put that knowledge to use on the web? This seminar is for those of us who want to get that first CSS–based site out there, need to speak intelligently with those who already know CSS, or who simply want to design better web sites—knowing how they are put together. Taught from a print designers perspective, this CSS seminar will show you the step-by-step process of taking your web designs to the browser with HTML and CSS. Using a proven teaching method, you will learn the ins and outs of CSS, have a working knowledge of CSS by days end, and the confidence to turn that design into a web site for the world to see.

• 30-day trial to the Lynda.com Online Training Library™ ($25 value)*
*New subscribers only

Brian Wood is a seasoned web developer and web/print technology trainer. An Adobe Certified Instructor in Acrobat 9 Pro, Illustrator CS4, Dreamweaver CS4, InDesign CS3 and Photoshop CS3, Brian has authored several training books, including "InDesign CS2 Hands-On-Training," "Illustrator CS5 Classroom in a Book", and others, all published by Peachpit Press. He has also authored online training videos for Dreamweaver, InDesign, Illustrator, Acrobat, Expression Web and more.
Brian provides corporate training to companies nationwide, and is an active developer. He co-owns AskBrianWood.com, BrianWoodTraining.com, and has a training video blog, BrianWoodTips.com.
CSS from the Ground Up (9:00-9:45)
What is CSS, exactly and what does it do? How is it different from styles in a program like Adobe InDesign? It's important to understand the what, how, and why of CSS before you journey down the path. In this part of the day, you will learn all of this and how you can use knowledge from print design and using programs like Photoshop, InDesign, Illustrator, and even Microsoft Word to create a site. We will even compare and contrast layout in a program like InDesign and the web.
Create your First Styles (9:45-10:10)
Every web site or page, for that matter, starts with some styling that is really generic. This is styling that applies to virtually everything on your pages and sets up your main formatting for your text and other content. In this part of the day, you'll not only learn what styles to create first and why, but you'll gain an understanding of the formatting you are applying.
Intro to Page Layout Using CSS (10:10-10:30)
When it comes to web design, the layout of your pages is key. Discover how to set the width of a page, how columns work, and some of the different ways to go about layout in this part of the day.
Break - 10:30–10:45
Layout your Page Using CSS (10:45-12:00)
Now that you know how layout works, we'll begin to explore the pixel-level precision that CSS gives us over our HTML and images. You'll learn how to layout a 2-column page (with an option for more columns) that is a fixed width and centers in the browser window like most sites today.
LUNCH ON YOUR OWN - 12–1:15
Style your Text Using CSS (1:15-2:15)
CSS has some really powerful ways to style your text. In this part of the day, you'll learn how to make changes to your text from simple font and color changes, to line-height (similar to leading) and much more. Along the way, you will learn how to style links, headings, and also learn what type of text styling is useful and why.
Style Images and Other Content (2:15–3:00)
Now that you have a layout on the page and some text content, it's time to add and style some of the good stuff like images and tables. In this part of the day, you'll learn how to style other content in your page design including images (alignment, borders, text-wrap and more), background images for the page and layout objects, a sidebar, and tables.
Break - 3:00–3:15
Design Navbars and Other Pieces to your Pages (3:15-4:00)
Beginning with creating and styling lists on your pages, you'll build on that knowledge to create a navigation system to get around the pages in your site. You'll also learn some easy ways to add pre–built navbars using copy and paste.
Take It Further with Hosted Fonts and More! (4:00–4:20)
This part of the day will give you a quick peek into some of the other, more advanced features of CSS, including rounded corners, hosted fonts, and a few other things (time allowed).
Q&A (4:20-4:30)

Charlestown Campus - Lecture Hall C202
250 New Rutherford Ave.
Boston, Massachusetts 02129
The main campus of this multi-campus urban institution is situated on 42 acres in the historic Charlestown section of Boston in the shadows of the historic Bunker Hill Monument and the spectacular Zakim Bridge. The campus is literally steps away from the MBTA Community College stop on the Orange Line and is accessible from all major thoroughfares; it is also equipped with parking facilities for over 500 vehicles. This ideal location is minutes from downtown Boston.
By Public Transportation
Bunker Hill Community College is conveniently located at the MBTA Rapid Transit Orange Line’s Community College Station. Connections to the Orange Line can be made at MBTA subway stations throughout the system. Follow the Rapid Transit System maps posted in each station depicting the Forest Hills-Oak Grove (Orange) Line. Take the train to the Community College Station. The campus front door is only steps from the station exit.
For more information on transit schedules and station accessibility, contact the MBTA at 617-222-3200 or visit www.mbta.com.
By Car From the North and West Via I-95 (Route 128); I-93
Follow I-95/128 to Exit 37A (Route I-93 South to Boston). From the North, follow I-93 South to Exit 28. Pass through Sullivan Square and proceed straight onto New Rutherford Avenue. The Hood Dairy will be on the right as you proceed on New Rutherford Avenue and shortly after, Bunker Hill Community College will also be on the right. Enter on the College’s perimeter road and follow signs to Student Parking (Lots #1 & #2).
From Route 2 & Memorial Drive
Follow Route 2 to signs for Cambridge and Memorial Drive. Take Memorial Drive East along the Charles River past Harvard University. Enter “ Memorial Drive East” underpass and continue past MIT. Continue on Memorial Drive along Charles River. Bear right as road curves over water and then to the left onto Edwin Land Boulevard (toward Charlestown). Continue on Land Boulevard past Royal Sonesta Hotel (on the right) and straight ahead across major intersection (traffic lights) onto the Gilmore Bridge. At the end of bridge, turn right at traffic lights and take first right again into the BHCC Student Parking Lot entrance. At stop sign turn right or left, and proceed to BHCC Student Parking (Lots #1 & #2).
Via I-90 (Massachusetts Turnpike)
Follow I-90 East to Exit 18 (Allston-Cambridge). After toll plaza, follow ramp directions to “Cambridge.” At the traffic light, go straight across the intersection and across the bridge over the Charles River. At the end of the bridge, take a right at traffic lights onto Memorial Drive. Enter “ Memorial Drive East” underpass and continue past MIT. Continue on Memorial Drive along Charles River. Bear right as road curves over water (toward Charlestown) and then to the left onto Edwin Land Boulevard. Continue on Land Boulevard past Royal Sonesta Hotel (on the right) and straight ahead across major intersection (traffic lights) onto the Gilmore Bridge. At the end of bridge, turn right at traffic lights and take first right again into BHCC student parking lot entrance. At stop sign turn right or left, and proceed to BHCC Student Parking (Lots #1 & #2).
Via Route 3 North and the Southeast Expressway (I-93 North)
Follow Expressway through the Liberty (South Station) Tunnel. Continue past the TD Banknorth Garden and take Exit 28. At the bottom of the ramp, take right onto Washington Street. At next light take another right onto New Rutherford Avenue.As you pass the Hood Dairy plant, Bunker Hill Community College is on the right. Enter via perimeter road and follow signs to Student Parking (Lots #1 & #2).
From the Northeast Via Tobin ( Mystic River) Bridge - Route 1 South
Coming off the bridge, bear right and follow signs for “Charlestown/Rutherford Avenue.” At the traffic light, take a left turn into the far right lane onto New Rutherford Avenue that will bring you to Austin Street. Take a left at the U-turn before the traffic light to reverse direction on New Rutherford Avenue (Bunker Hill Community College will be visible on the far right). After the U-turn, the BHCC Student Parking Lot entrance will be on the right. Take first right into BHCC student parking lot entrance. At stop sign turn right or left, and proceed to BHCC Student Parking (Lots #1 & #2).