Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
A web site is just a web site unless it’s designed with a unique style. Creating a CSS Style Guide: Hands-On Training highlights the importance of a CSS style guide, which serves as an interface for the design team and a communication tool for the client. Laurie Burruss calls on her background as director of digital media at Pasadena City College and takes an informative, real–world approach to this topic. She shows how Dreamweaver CS4 can be used to develop a coherent site–wide emotion that boosts brand identity. The course culminates with building a working web style guide for professional use. Exercise files and a downloadable PDF quiz accompany the course.
Download the exercise files from the Exercise Files tab.
Now, we have a finished CSS style guide that we can use for ourselves, use in our portfolio, or share with our entire design team. Let's just take a look at some of the things that we have learned. We've learned how to create an XHTML document with proper structure and correct formatting and semantic markup. We've learned how to create external style sheets that link to the head of our main document. We have learned some of the essential HTML tags that we use consistently throughout website design.
How to insert an image, how to create a simple text navigation bar and create active and interactive links. How to insert, styles, format our headers. How to style and design our paragraph or body text. We also learned how to create three types of lists, the unordered list, the ordered list and the definition list. And we learned the power of using the O'Reilly reference tools. We learned one of the most interesting tags that we can use: the blockquote that's used frequently, but not available in Property Inspector. We generated a color palette based on the header image that we inserted at the top of our page.
We inserted and experimented with selecting and dragging and changing our table and also understanding what tags make up a table and how nesting works. And finally, in our footer we created a div tag that holds the content, that displays the name of the company, gives contact info, gives the legal information, as well as the date that we've created this website. So all in all we did a professional job following best practices, using web standards and making an accessible website. So what are some next steps for this project? Consider adding a montage inspiration image that you create from Photoshop or Fireworks. Play around with some of your typographic elements and do some experiments there. Make this your online style board where you can put your ideas up and let your company see how you are thinking, or your team members see how you are thinking. Feel free to play, feel free to create additional external style sheets. You might want to create two more ideas by just using two more style sheets and then show your company three different proposals.
So congratulations! You have just finished your first style guide, but I want you to focus on three key concepts because this will ensure success for you, as you go on designing and communicating in this medium. Just remember, understand the technical limits of the web, learn and keep up with the web standards and the adopted best practices, and infuse your work with your design, passion, and emotional content. I am very excited by this medium. It's amazing what web designers and developers can do using this medium, and it's amazing to think about the possibilities of who we can communicate with and the ways we can communicate and all the new techniques that will be developed in the future.
There are currently no FAQs about Creating a CSS Style Guide: Hands-On Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.