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.
We have gone about as far as we can go using our embedded styles. It's time to create an external style sheet, but before we do that, let's save our document. Go up to File > Save As and let's change this to version 04. Version 04 will be our example of how external style sheets work. There are many, many reasons for using an external style sheet. One, it's a best practice and two, it certainly will make your work a lot easier when you are working with a team or publishing a large website.
The idea of an external style sheet is that you have one style sheet and in the head of the document, you link your HTML page to that style sheet. You can link it to as many HTML pages as you want. So if you have a large, large website, say 20 pages and you need to make one change, you make that change in your external style sheet and it will apply itself across that entire website. It saves you a lot of time and a lot of work. Yes, websites and pages can have multiple style sheets, but again, an external style sheet makes it easy to keep your presentation and your structure separated. You can have one team working on structure, one team working on presentation and if you need to update, edit, maintain a site, it's all in one location and spreads itself across and applies itself across the entire website.
So let's remove our embedded styles and place them inside an external style sheet. Select the Code button to go into Code view, scroll to the top and as I have said before, all of the styles that we have created so far appear between the opening style tag and the closing style tag. Let's just select the styles, nothing else. I'll select the body tag, all the way down to the last tag, the class tag that we created. Make sure you include the curlicue bracket that closes the blue tag.
Once you have selected that, make sure just visually check that you have all those styles in their pink. It's easy to see if you have got them or not. Make a right-click, scroll down your dropdown menu to CSS Styles, move to the right and then scroll down to Move CSS Rules. This is the trick to get it into an external style sheet. A dialog box will say, Do you want to move to an external style sheet? And the answer is yes, you do. Now for you had already started an external style sheet, at this point we could go out to our directory and browse for one, but we do not have any external style sheets. So let's create a new style sheet. Select this button and then click OK.
Dreamweaver opens up its directory. It says you are working inside this project folder. Where would you like to save your style sheets? We have already created a folder for our style sheets. Select that folder. Write the name of the style sheet up at the top. We will call this styleguide.css. CSS stands for cascading style sheet. Make sure that the directory is right in the folder CSS, the document name is styleguide.css. Keep it relative, which means it's linked to the document and then click on Save.
Now in Code view you see that all the styles have been removed. Let's take a look at the CSS panel on the right. There is our external style sheet. If we click on this triangle, it shows us that all of the styles that were embedded are now contained in that style sheet. This is terrific! However, when I click on the Style tag at the top and I look over in Code view, I see that I have now code that's really doing nothing. There is no content in that tag and I need to remove that and clean up my document. The easiest way to do this is to select the Style tag at the top of your CSS panel, go down to the bottom of your CSS panel, you will see a trash can, click on the trash can and Voila! You have cleaned up your code.
I am going to click on the styleguide. css, because I'm in Code view already, and what's great about this is right here inside of Dreamweaver by just a quick toggle I can see my HTML code, structure, see my style sheets, presentation. You don't need to know a lot of code to be able to understand a CSS style sheet, you just need to know that these are the tags and these descriptors or descriptions separated by a colon and followed by values are what's defining the look and feel of your website.
When you have multiple pages open like this, if you do a save, which I'm going to do right now, it only saves the document that I have open. Notice it just saves the style sheet. My style guide is still not saved. The easiest way to save all the documents that you are working on is to go up to File > Save All. That will save every document that's related to the project you are working on. Let's click on the Design button. Let's make sure that our linked style sheet works properly inside the browser, click on Preview in Firefox. Yes, it looks just like it did before and let's just use our web developer toolbar to see what appears now when we say CSS > View CSS.
Great! It's showing our external style sheet. Notice that it's in our CSS folder and notice that it is in our main project folder. All of the styles that we have created so far exist right here. So we have done a great job of doing it just like the pros. Let's go back into Dreamweaver, close out Firefox. I just want to show you where that link to the style sheet exists. I'm going to choose the Split button, choose Source Code. At the top of your document, in the head tag, you will now see something right here called link.
The href. Remember an href is a location on the Internet. It says that it's within this directory that we are working in, a folder called css/styleguide.css. So we have done our work, we are working with our linked external style sheet and we are now really practicing separation of structure and presentation.
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.