Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating a style guide

From: Managing CSS in Dreamweaver

Video: Creating a style guide

Depending upon what type of site you are building, you may want to consider building a style guide for your site. A style guide can assist anyone building content for a site by displaying the visual formatting for your site, explaining how certain styles are executed and even pointing to online resources to explain how specific techniques work. Style guides come in many shape and many sizes, and can be customized for your site's specific needs. And you can see there is a lot of stuff already on the page, and we're going to take a look at all the stuff in just a moment and explain kind of how this is structured.

Creating a style guide

Depending upon what type of site you are building, you may want to consider building a style guide for your site. A style guide can assist anyone building content for a site by displaying the visual formatting for your site, explaining how certain styles are executed and even pointing to online resources to explain how specific techniques work. Style guides come in many shape and many sizes, and can be customized for your site's specific needs. And you can see there is a lot of stuff already on the page, and we're going to take a look at all the stuff in just a moment and explain kind of how this is structured.

But we need to finish our style guide out, so a lot has been done, but we need to finish it. So right here the headline says, General Page Layout. I'm going to hit Enter or Return to create a blank line above that, and that's where we are going to enter in our content on this page. So the first thing I'm going to do is I'm going to type in Heading 1, and then I am going to use my Properties Inspector, make sure I'm on the HTML tab, and I am going to change the Format from Heading 3 to Heading 1. I'll hit Return or Enter to go down next line. I'm going to type in: Used once per page to identify page content.

So you can see we are showing somebody what a Heading 1 looks like, and then we are telling it how Heading 1 should be used on the pages within our Explore California site. I'm going to go down to the next line, and I'm going to type in Heading 2. I will format that as a Heading 2, again it changes, and just below that I am going to type in a paragraph: Used for all top level headings not identifying page content, again, setting some ground rules for when this should be used. Hit Return to go down to the next line, and I'm going to type in a Heading 3.

Once again, remember I can grab my pulldown menu here for Formatting and change that to a Heading 3, and below that, I am going to type in: Used for subheadings and any headings not categorized as a "main heading". And then finally I'm going to go to the next line, and I'm going to type in, Not used: and here we are going to follow our own advice. So if I have a subheading and any heading not categorized as a main heading, which I guess this is not a main heading, that would be a Heading 3.

So I am following my own advice in using the structure of the site. Go down to the next line, and I am going to type in: Headings 4-6 are not used in the Explore California Web site. So this style guide is not just showing you how something should look. It's telling you about when you should use something, how you should use those elements, that sort of thing. So we've just added some headings to the page, and letting people know how those are supposed to be used and how they are supposed to look like. You will notice that we also have an identifier that this is the style guide.

This is how our breadcrumb looks, and if we scroll down we can see that we have some information about the General Page Layout. This is telling it how pages are typically formatted, what type of accent images should be used, how our breadcrumb are used, how links should be styled and used, and things like that. We also have further explanations about Navigation, Sidebar & Extras, Call Outs within our main content, table styling, which we turn to Live View we get to see that's a little bit clearly, how Lists should be styled: ordered, unordered, definition list. And we have some information about validation: how we should validate our code, where our hacks should be placed so that proper validation occurs, that sort of thing.

So there is a lot of information on this page; however, we've left a lot of stuff off. There is no instructions on how to style forms, to show how those are done, a comprehensive navigation guide to tell exactly how the navigation should be done and show it, and things like that. So obviously, some style guides would be of single page; other style guides are going to be an entire section of the site, sort of explaining how the site works. Now I want to highlight on my style guide as an example of this. Here I have the New York Public Library's online style guide, and you can find this yourself at legacy.www.nypl.org/ styleguide/, so this is their old style guide.

They left it up here as a reminder for people working on their Web site. Now, the benefit to this particular style guide was that not only can we sort of see how the styling works, but you will notice they are giving clear guidelines as to how you should use things, which document types they are going to be using, and the benefits of working through them, how to make sure your XHTML valid, that sort of thing. We have a CSS: Style Sheet & Tips. They have guidelines on linking to Style Sheets, Style Sheets that you can use from the Public Library and CSS Validation. So this was really made because there are lot of developers and freelancers that are all not connected at all doing Web sites and pages for the New York Public Library.

Well they all need to look the same. So this style guide not only gives them access to the existing style sheets, which they can use for their projects, but it shows them how the documents should be formatted in terms of this XHTML, the best practices that they should follow, some places online where they can go and learn more about validation. It's a very comprehensive style guide, and it's something that, as a designer, if you are going to work on a project for them, this is godsend to have. You can come right here and figure out exactly what you need to do with the content you're creating. So that's really cool. Now not every site is going to need a style guide - the New York Public Library is huge; however, their flexibility in providing the exact information needed, makes them extremely useful and versatile, regardless of the type of site that you are building. Now, when working on sites that will use a development team, or any sort of outside vendors, a style guide can provide crucial information that ensures content is designed and developed according to your standards.

Now if you are using a smaller site, style guides can serve as a single-page overview of your site design, which is nice, and that makes actually a good way of communicating the design principles you are working with to your client, as they can just go online and look at the style guide. Now regardless of how you use them, style guides give you a living, breathing document that can change as your site changes, and an effective way of communicating your design and development strategy.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20804 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Managing CSS in Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.