Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have separate style sheets for our tables and forms, we have a few options for how to apply them to the pages that need them. The first option would be to add another link on the page to the necessary page. So, let me switch over to Code View real quick, and you can see right there is the link to our main style sheet. So, if we needed to, we could add on the link tag below this that would link to, say, the table styles or the form styles, whatever we would need. Now, we do have a title attribute. Notice this title attribute right there. Now, that lets the browser know that this is the default style sheet.
If you've got more than one link tag, it's really hard to blend all those guys together and let them know that those are the default style sheets. That can become an accessibility problem. So, we want to try to avoid that a little bit. All right! So, I want to switch over to our main. css, right up here in our related files. Honestly, it's going to take you forever to highlight this thing. There so many styles in it. So, here is my advice. Go ahead and highlight the character encoding and cut it. Then do a Select All, hit Delete, paste it back. Easy! Everything is gone.
I'm going to go ahead and save the file, switch back over to Design View, and oh, no, all the hard work, all the months of labor in getting our styles written shot. Well, don't worry about it. Let's go back into our main.css. In the main.css, go down the next line, and we're going to do an @import. Now, if you've never seen the @import, this is how it looks. A couple of lines below the encoding character, you're going to type in @import. Now, as soon as you do that, notice that Dreamweaver recognizes it and changes the color. So, I'm going to type in a space, and then url.
So, we need to indicate where these styles are located. What we're going to do is inside the parentheses here, I'm going to type in global.css, and then a semicolon. Okay, so if you remember, we pared down our main styles as global.css in the previous exercise. So now, using @import, we're basically telling this external style sheet, bring in those styles at run time and display them on the page. How cool is that! I'm going to do a Save All, and switch back over to Design View, and our styling is right back. Cool! So, our external sheet, main.css, is now actually bringing in global.css at run time.
Notice that in the related files, global is showing up here, which is really cool! Now, you want to be careful about trying to daisy-chain these. You wouldn't want to do an @import in the global style sheet as well. The problem with that is a lot of browsers don't recognize any type of an @import that is more than one layer nested deep. So, you want to keep those on the top-level style sheets. All right! I'm going to go ahead and close all of our open files. After I've closed all my open files, I'm going to scroll up and open up the _css folder, and I'm going to open up main.css from there.
Now, I know this is the file that we were just looking at, but it's now opened without being a related file, and I'm a little freer to do extra things with it, such as do a Save As. Okay, so here in our main.css, really, what we're bringing in is the global styles. We're going to need a version of this that's going to bring in the Table styles, and we need a version of this that's going to bring in the Form styles. So, let's go ahead and take a look at maybe the possibility of doing that. Let's do a Save As. Save it in the same directory. This time what I want you to do is save it as main_forms.css. There we go! In the main_forms.css, we're going to do another @import right below the first one.
We're going to do @import url, and here we're going to do form_styles.css. So, we're going to just look right over here, and bring in the one we need. Cool! So now, this main_forms.css is saying, okay, I've got all the global styles inside me, as well as the form styles. So, if you have a page that's using forms, go ahead and link media rather than the other one. Now, I want to talk about something else here, too. You'll notice that both of these @ imports are importing a singular file that's found in this directory.
One of the things you want to avoid is trying to do any type of importing past one level deep. What I mean by that is I wouldn't go under the global.css and put an @import in that one, because most browsers won't be able to drill down that deep and retrieve it. The other thing you want to be careful about here is the cascade. The order in which these styles are defined are the order they appear in the cascade. So, anything in these form styles that had a conflict would actually overwrite anything in the global styles. So, that's a very real concern when you're planning out how you're going to strip these styles apart and how you're going to work with them within the cascade.
I'm going to go ahead and save that, and let's do one more Save As. Now, this time in the same directory, save it as main_tables.css, as well. Here, we're going to replace the form_styles. So, I'm going to delete that. Now, the reason I deleted it is because I wanted to show you an alternate method of using @import. I'm going to go my CSS Styles panel, and I'm going to click to attach a style sheet. I'm just going to hit Browse, and I'm going to browse to the 04_04/_css directory.
Here, what I'm looking for is this table_styles. So, just like our forms, table_ styles has all of our table styling. Let me go ahead and click OK. Notice that Link is grayed out. The only thing available to us here is Import. So, when I click OK, I can see directly underneath that top one now, @import url("table_styles.css");. All right. We're going to go ahead and save that, and now we have our modular styles. We have one that's just bringing in all of our global styles. We have one that's bringing in the global plus the forms, and another one that's bringing in the global plus the tables. Now, as you could imagine, this is an incredibly simple example.
You could go ahead and import multiple style sheets on this. All right! Now, let's show this in action. So, I'm going to go ahead and close all of these. I'm going to go over to my Files panel, and I want to scroll down and open up the Contact page. Now, currently the Contact page has a lot of forms on it. But if I scroll down, the forms look horrible, or at least they don't look the way that I want them to. Now, why is that? Well, remember, main.css doesn't have those in it anymore; it just has the global. So, what we're going to do is we're going to change the page that's being linked here.
So, I'm going to switch over to Code View. I'm going to go up to the very top of the document. There is link href here. I'm going to change main.css to main_forms.css, just like that. I'll do a Save All. If I preview that in my browser, I now see that this one has the form styling, although the rest of the site doesn't need the extra code. So, we just sort of leave it off. Now, this approach is not going to work for everyone, nor is it appropriate for everyone. But for certain sites, you can certainly save bandwidth, increase organization, and that might be the most important part, and make modifying and maintaining styles easier by using modular style sheets throughout the site.
So, one team member could be working on the layout while another team member could be working on color, and you don't have to be worry about overwriting anything. Now, as with many things, proper planning is required in order for styles to render properly and not conflict with other modular styles at run time. As a matter of fact, that could be an absolute nightmare! Now, be sure to think through the execution of modular styles carefully, before attempting to implement them into your site.
Get unlimited access to all courses for just $25/month.Become a member