- View Offline
- Building a CSS-friendly workspace in Dreamweaver
- Creating style sheets visually
- Hand-coding styles
- Working with code hinting
- Organizing style sheets with color coding and sections
- Writing global classes
- Eliminating style conflicts
- Deploying styles
- Dealing with browser compatibility issues
Skill Level Intermediate
Using snippets to reuse CSS code requires a good deal of planning to build a strategy around how your code will be reused and how much of your layout and presentation will be saved in your Snippet library. In this movie, we'll begin to build a small-scale CSS Snippet library that can be used over and over again for other projects. To do this we'll need to examine our current site, evaluate elements or structures that we could reuse in other projects, and then modify existing CSS rules to create a more neutral snippet version of them.
And if you were to really take a look at this layout, you would call it a two-column layout. The header, instead of panning the entire width of the page, is really just a small little area. It could be a badge, or a banner, or something of that nature. The main content fills up the entire right side of the page, and we have a footer at the bottom. Everything else, in terms of the colors being used, the graphics being used to the way that the navigation is structured, is really designed specifically for the Explore California Web site. So unless we were going to have to reuse these snippets in order to build more pages for the Explore California Web site, it really wouldn't make a whole lot of sense to use the existing CSS to build snippets.
We need to modify them a little bit more, and make them a bit more neutral. Now that way any time I wanted this particular layout or even color schemes and things like that, if I want to keep those, and typography, I could save those as snippets. So what I'm going to do is I'm going to go over to my Files panel. I'm going to go into the 03_04, which is my root directory here. Open up the _css folder and open up main.css. Now yes, we can access the code from here, but we need to do something very special with this. I'm going to go to File and choose Save As.
I'm going to save this in the same folder, the _css, and I'm just going to call this one snippet_source.css. So, snippet_source.css. Now why are we doing this? Well, as I mentioned before, we're going to have to modify some of these styles, some of them quite extensively. The last thing in the world you want to do is make changes to your site's CSS file when you're building your snippets. You want to leave that alone. So we're just creating a copy of this. I'm going to close the main.css that we had opened and focus on my snippet_source file.
Now the next thing I'm going to do is go to my panels and click on my Snippets panel to activate that, and sort of expand that out a little bit more. I really like being able to see this panel, read some of the descriptions and tell what's going on here. Okay, so the first thing that we're going to take a look at is our global constants. As I scroll down a little bit, I get down to about line 43 in my code, I can see some constants that are going to be used kind of over and over again. To be honest with you, this is one of the selectors that I have at the top of almost every single one of my style sheets. It takes a default margin and the padding for documents in different browsers, and just sort of zeros them out, so that you can do with them what you want.
So we've other ones like the body tag that we could reuse, our limited-scale reset, so we've got some pretty generic global classes and constants in here anyway, so we could go ahead and start our CSS Library based on those. Now I'm going to go over to our Snippets panel and clean up some of the stuff that we've been working with before. I'm going to go inside that CSS folder, click on the h1 selector that's currently sitting in there and I'm just going to delete that by clicking the Trash Can. So anytime you want to delete a snippet, just highlight it. Click the Trash Can. It says, Are you sure you want to delete it? I'm going to go and say, Yes, and now my CSS folder is empty again.
It's empty because I want to give it a little bit more structure than what they've got. So I'm going to click on the CSS folder to activate that folder, create a brand-new snippets folder, and I'm going to go ahead and call this one Global Constants. Now sometimes you could have snippets that relate to a specific layout, so we can create an Explore California theme, for example, and have snippets related just to this particular layout. You can also have snippets that could be used for really any site, and Global Constants really fits that bill. You could have snippets that you use anytime you create a project.
You can just create and start putting some of these things in here. Okay, so I'm going to go back over to my snippets_source.css. Highlight the html in the body selector. Once again, make sure you get the opening and the closing curly brace, as well as the selectors itself. I'm going to go ahead and either right -click or Ctrl+Click that and choose Create New Snippet, and I'm just going to go ahead and call this snippet html & body reset. You can name snippets anything you want. You want to be a little descriptive, but you don't want to be the overly long. And for the Description, I'm going to type in: Resets the default browser page margins.
Again, the Snippet type is going to be Insert block. Whenever you're dealing with CSS-based snippets, you're always just going to insert the block of code. CSS doesn't work that way. You are not going to wrap code with it. I'm going to have my Preview Type be Code and again, I'm going to double-check the style, make sure everything is in its right place - it is - and go ahead and click OK. So now over in my Global Constants, I've my html & my body reset. Excellent! Now I'm going to go down to the body tag, and here I'm going to create a couple of different versions of this body tag. So I'm going to go ahead and copy this and then paste it on a line below it.
So now we've two body selectors, two body element selectors, and we're going to change up a few things in it. First off, we're going to take the margin top and get rid of that. That margin top is very specific for the Explore California Web site. If we were creating just some generic body tags that we can use on any site that we want, we're going to go ahead and take things like that away. Now the next thing I want to do is the top body tag is using Georgia, Times New Roman, Times, and serif. It's a font stack I use a good bit, but it's not always the font stack I want to use. So what I'm going to do is on the body selector below that, I am going to go ahead and replace that Georgia, Times New Roman, Times, serif.
So I'm going to go ahead and delete that, and then I'm going to type in ar, and it actually gives me, Arial, Helvetica, sans-serif. Now remember you want a space between the % for size, and Arial, Helvetica, sans-serif. Okay, so now we've two body tags, one using Georgia and one using Arial. We're going to go ahead and add them to our CSS Library. So I'm going to highlight the first one. Now, we want to do these individually. So I'm going to highlight the first one, I'm going to right-click that and choose Create New Snippet, and I'm just going to go ahead and call this one, body 100% Georgia.
And that way I can scan these body tags here. So I have got some body tag selectors, 100% font size and Georgia. And for description, again, I can be a little bit more descriptive here. I'm going to say, Neutral body tag, meaning no margins associated with it or anything like that, 100% font size, Georgia stack. For me that short for Georgia font stack, you could be a little bit more descriptive there if you'd like. And that's good. Now I'm going to look at everything here to make sure everything is okay, and everything is not okay.
What I left in there that I didn't mean to leave in there was the background. So here's the beauty of the Snippet dialog box. I'm going to click on the Insert block and then this background part, I'm just going to go head and get rid of it. I can even adjust my spacing by moving those guys up. So you can edit in your Insert Code dialog box the same way that you could code within the CSS Style panel. So that's pretty cool. So I'm going to go ahead and click okay, and it creates that. Now notice how it doesn't affect the style in your CSS. So if you do have a selector that you need to make slight modifications for, but you don't want to disturb it in the native style sheet, you can go ahead and create a snippet and just make your edits in that little window, and you'll be okay.
All right. Now, I definitely don't need it for my next one, so I'm going to remember go ahead and get rid of that. I'm going to highlight it, create a new snippet out of this, and I'm going to call this one body 100% Arial, since we're using Arial as a font stack, and for the Description, I'm going to type in: Neutral body tag, 100% font size, Arial stack. And you always have to remember to do Insert block, the default is Wrap selection.
So if you keep doing CSS snippets over and over and over again, keep in mind that you're going to have to continually insert that block. I am going to go ahead and click OK. Now you'll notice that the way that these guys are stacked up, it's really easy to scan this. It says, body 100% Arial, body 100% Georgia. You might be wondering, why don't I just name it body1 and body2 and let the Description tell me what it's doing? Well, you can see I've got my Snippet panel really extended to see the description at all. More than likely, you're going to view your Snippets panel like this. So you want those names to be descriptive enough to where you know which one you're going to use for a given situation.
Now let's do one more. I am going to go down to the limited- scale reset, and I'm going to go ahead and highlight that. Remember, you can choose to add the comment as part of this, as well, if you think you'd always want to put a comment above that, which I think is a pretty good idea, actually. I'm just going to go ahead and highlight that as well, and Dreamweaver can be really tricky sometimes when we're highlighting this code. So double-check that you've got the comment before it and the closing curly brace. We're good there, and then I'm going to go ahead and create a new snippet. Now you can also simply highlight your text, instead of right-clicking, you can go right over to the Snippets panel and click right there on New Snippet, and as soon as you get that, the Name comes up, and we're just going to call this one limited reset, limited reset.
Now I don't like the way that these guys are all on separate lines, so I'm just going to take just a brief moment to bring them all back on one line. I probably could have done that in the code using my AutoFormat Options, but this is not that strenuous. So we're going to go ahead and do that for each one of these guys, get them all up in the same line. And I noticed when doing this that we're leaving somebody out here. We have got an ul, which stands for unordered list. We have the list item, but we don't have ordered list, and that's because we're not using ordered list in the Explore California Web site. It doesn't mean that for our limited- scale resets on other sites that we shouldn't have that.
So I'm just going to add an ol in the mix there, and make sure I have a comma, so that the ol and li tag are separated. Now this is a limited reset. I'm just going to give it a brief Description here. I'm just going to do a brief, little title here that says CSS margin and padding reset for basic HTML elements. And then I'm going to click Insert block. Always remember to do that. That's so easy to forget. So just force yourself, every single time you do this, to remember to click Insert block.
Go ahead and click OK. Now here is the nice thing about this, because I can preview which elements are added to the limited reset by looking above that. I probably don't need that identifier in there either. So if you want you can edit your snippets, you can right-click a snippet and choose Edit. It brings up this dialog box, again, you can make any edit you wanted and click OK, and you are in good shape. Now this looking pretty good, but more than likely, for any type of library, I'm going to have more than one resets. This is a limited reset. What if on one site I want to do a full reset, or use the Yahoo user interface reset? Well, if I go up to my CSS folder right here and click on that, I can create a brand-new folder.
I can call this CSS Resets, and just like that, I can take my limited reset and drag it in there. So if you don't get the organization that you want at the beginning of it, you can add it at the end. Okay, cool. We're now well on our way towards having a library of CSS snippets that we can call on whenever we're building a CSS file for our projects. Now as you can imagine, you can go on from here and add more CSS resets, add global classes and other site-neutral styles. The limits on what type and how many snippets you have are entirely up to you.
Now when creating snippets, try to imagine how often you'll use certain rules and how you might need to modify them for other sites or projects. It's going to go a long way to telling you what type of snippets you need and really how ought to be structuring them. So as we continue to explore snippets in more detail, we're going to move on to discuss the topic of creating CSS-specific libraries of snippets.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.