Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating a Class Selector

  • We have a page in our website that contains a listing of specials that are being offered
  • We want to highlight a portion of the tour description
  • This is a good example of when you can use a class, you use a class when a tag cannot do what you want
  • We will create a new class called specials by clicking the + sign in the CSS Styles panel
  • Set the following styles for your specials:
    • Font-family: Tahoma
    • Font-size: 1.1em
    • Color: #333
  • Once a class has been created, it must be applied to the content
  • We will apply the class to our text
  • Select the text before the colon in each of the specials
  • If we tried to style this text using the present li tag, the entire line would change
  • To apply the class, select the text & choose the class name from the properties panel
  • You can use a class as many times on the page as you want

Creating a Class Selector

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Create New and Save 0:16
  • Add Title 0:48
  • Adding Text Content 0:59
  • Attaching a Style Sheet 2:05
  • Adding and Formatting Headers 3:18
  • Creating a Class 4:27
    • New CSS Rule
    • Setting Class Definition
  • Applying a Class to Text 7:30
    • Troubleshooting Class Errors
  • Editing Class Properties 8:53
    • Edit Rule Definition
  • Other Methods for Applying Classes 9:42
  • Preview in Safari 11:10
  • Summary 11:53

Transcription: Creating a Class Selector

We are now going to create a new page in Dreamweaver, and I want to use that page to show you how to create class selectors.0000

This will be a good example of when and why we should use a class selector.0010

I am going to create a new page; so just make sure something is selected in your Files panel and do a Ctrl/Command+N for a new page.0016

I am going to save this page, and it is going to be called specials; so, this is a page that people can go to to view the specials that are going on within our company ("the company," meaning Wanderlust Travel, the fictitious travel agency company).0027

In my title, I am going to say Specials at Wanderlust Travel: there we go.0048

Now, in our text file, I have a specials.txt, and we are going to open that up and drop that text onto our web page.0060

Now, this is a text file; and I am trying to show you a few different types of files when we go to copy content in, so you can get a feel for the types of files you can use in order to paste content.0071

I'll open up this specials.txt file; I am going to select everything on the page using Ctrl/Command+A, copy it using Ctrl/Command+C, and pop over to the HTML page and paste it in.0084

You can see, a text file pastes very nicely.0103

I'll close up the .txt version of this page, since it has the same name (it can get confusing), and I'll do a Save.0107

We just copied the content from specials.txt within the text folder onto our web page.0117

Now that I have that set up, what I want to do is attach my style sheet to this page; you can see, it's all default styles; there is no Related Files toolbar listed here.0125

And I'll open up my CSS Styles panel, click the little link down at the bottom that says Attach Style Sheet, and my styles.css file is in here.0139

Now, it is always a good idea, even though it's listed there, to browse out and make sure it is the correct path to that file, because as you open up files and start having more and more folders, sometimes the path might be wrong, even though the file name is correct.0153

I always double-check that; that will save yourself some time in making mistakes.0173

Now the media--I'm going to choose screen once again; I'll click OK, and there are our styles being applied to this page.0179

I have my Header 1 through 3, my p, and my li; and there is the specials page.0190

Now, what I want to do on this page is: first of all, I need a Header 1, so let's make Travel Specials our H1; "The following is a listing," right here, I am going to make a Header 2; and this is when I can determine these two are the exact same color--I am not sure I want them to be.0198

Let me go out and modify my H2 color scheme: you can see, it's really quick to do this, and what I am going to do is choose a little bit lighter color, so I have two different oranges on the page--for now.0221

Now, I can change these at any time, so I don't get too worried about it; if, in my design document and style guide, I have decided already on a color palette, I would have that available to use.0238

I haven't gotten quite to that point yet, where I finalized exactly what I want; and that is the benefit of styles.0252

We have our Header 1 and Header 2; I'll do a Save All; now what I want is to make the first part of these specials...I don't want this to have to go on a new line in order to stand out, but what I do want it to do is stand out in another way.0261

How can I get just the first part of this sentence a little bit more obvious to the user?--and I don't want to use a bold text to do it.0280

Well, this entire piece is inside a single paragraph tag; because it is in a single paragraph tag, if I changed the p tag, it would change all of the text.0292

So, this is a good example: it is just a part of this HTML tag that I want to change, so I am going to create a class.0306

In other words, a tag can't do what I want; I'll add a class.0314

Let's do that: I am going to create a class called Specials, and the way I do that is: I'll hit the + sign in the CSS Styles panel; notice, Class shows up by default, so I didn't need to change that.0319

And I am going to type in the word Specials.0335

Now, we know that a class always starts with a dot; I don't have to add it here--Dreamweaver will do that for me--I just want to make sure this goes into my present style sheet, the same one this page is using.0339

I'll click OK; you will see, .specials shows up in my Styles panel; and now I can decide what I want it to do.0353

I think what I am going to do is make this text just a little bit bigger; my H2...let's see, we had the paragraph tag, and I made it .95, so let me make this one...I'll choose the same font family, Georgia (let's stick with Georgia), and down in my font size, I am going to do 1.0--just a tiny bit bigger than my regular paragraph.0362

In terms of color, let me make it match my Header 1; and I can choose the eyedropper--I can click in this little Color chip here, drag it out just like we did in the Styles panel, hover over the color I want, and I'll select that and click OK.0393

Now, you will see, nothing changed on my page.0415

I created this class in my style sheet; and I tend to like to keep these somewhat organized, so I usually put my classes at the end.0419

I tend to find I change those the least of anything; so just click and drag it and put it down at the bottom.0431

I normally list these as ID's at the top; then I go to my tags; and then, I add my classes.0439

OK, so let's select this; how do I add a class to just that text?--there are two ways to do it; I will show you both, because people have a definite tendency towards one or the other.0448

I'll select the text; I am going to right-click my class in the CSS Styles panel, and I am going to say Apply (and it is down just a little bit in the menu).0461

Now, I have a little problem here: and notice, it looks like my text disappears.0475

What I try and do throughout this course is show you some of the most common issues that can happen in my classes--and literally every class, there are specific errors that happen--and that could really confuse you.0483

It normally does to whomever it applies to.0498

What has happened is: if I go over and look at my font size for this class, I changed the font size to 1 for the number, but I didn't change my unit to em.0501

So, what I have is a 1-pixel size text, which actually ends up as tiny dots on the page.0516

I can correct that by clicking here and choosing em; and now you can see, it worked just fine.0524

Now, I think this maybe should be bold as well: it's very easy to fix--I can select specials and click the pencil down in the bottom-right corner, and it pops me back to this interface.0533

I usually find people are very comfortable here; and under font weight, I am going to say bold.0548

Now, it looks like there are a lot of options here, but browsers don't support them; so basically, you have the first two options: is it bold, or is it normal?0555

I'll choose bold and click OK, and now my class has been applied.0565

What I will do is: everywhere I want this to apply, I select, go up here to the CSS Styles panel, right-click, and say Apply.0571

Now, that is the one method: let's take a look at the other for the last three.0583

I'll select this text (and I am including the colon at the end); I'll go down to the Properties area; and I'll choose this dropdown under Class; and up here, I can see what it looks like.0588

I'll click Class, and that is another method for applying a class; so there it is: click Class and choose Specials.0604

Now, I only have one now; this does get to be a bit long.0615

Now, I also notice that my text right here does not have a colon--it has a period; so, I'll go ahead and fix that.0619

And you want to be watching your page as you are doing this and adding it: make sure that, if I am going to add the colon, I do it on every one, since I am making the selection.0629

Click Specials, and there it is.0643

Let's take a look in the browser at what this page looks like.0646

Now, I did a File, Save; as you can see, it saved, because it's grayed-out; but notice, my styles file has not been saved--it has an asterisk.0650

As soon as you start working in external style sheets, you want to make sure you use that Save All.0663

Let's put it into the browser (I'll put it into Safari here; and it is not my default browser...I'll say no); there is my page--I'll make it look just a little bit narrower, because that is more typical of what it is going to be; and you can see, there is our Travel Specials page.0671

Now, I can always change the styles on this page, and every page that uses my external style sheet would adjust automatically.0694

This isn't perfect by any means, in terms of the styles; but I want to show you a few things as we go through the course.0703

So, we will come back and modify some of these later; but that is how you can work with your external style sheet; you can drop in text; you can create classes on that external style sheet.0713

And when you create a class, you do have to apply it personally--it is not an automatic process, like our HTML tags up above were--it didn't apply automatically.0730

That is how you can create a class and apply it using Dreamweaver.0744