🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.

HTML selector types: Tags vs Classes

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

1
0
0
0
0
0
0

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hi, my name is Dan and in this video we're gonna look at  the difference between tags and classes. Now we've looked at classes quite a bit through this, um,  through this class and um, we kind  of saw them when we were down here. Um, we applied a class to this image here  and it was a full stop at the beginning  and then it said image responsive. And we also did it from down here. We made these centered, okay. And we applied something called center, uh, full stop.

Then a center Hyen block. So that is considered a class. Now a tag. A tag is something that's predefined in HTML  and that is things like the P okay? You can see here, this is the P tag already made. Now tags are pre-made in H TM L, okay?

Ptag is a PT tag. You can't have a Q tag and get it to do the same thing. PT tag is a bit of paragraph text,  and H one is what's considered a heading one. Uh, an A tag is what we use for doing hyperlinks, okay? So they're predefined by HTL, whereas our classes, we get  to name and create ourselves. We get to call them, say we did  for these banding in the back here, okay?

We called it, uh, band hyphen hero,  and that we got to call, give it a name,  and we got to decide what it looks like. So, uh, PT tags quite generic and classes quite specific. Now, the reason we need both is that, say  that I've got two bits of PT tags  that I want 'em to be different. I want this text to be very different from the P tag. And this one, if I style the P tag, great, okay,  but that'd be exactly the same. So what we do is we style kind  of some generic styling to the P tag.

It might be just the font and the color,  and then we get to add classes to the individual pieces  of text to kind of tweak it or change it a little bit. So let's go through and do that. Let's start at the top here  and let's look at this thing  that says, let's make things awesome. And what we're gonna do is change it from a  p tag to a heading one. Okay? So it's gonna be the main heading on the page.

Now you can do it a few different ways. Uh, down here you can see it's a paragraph tag. Um, I could switch this to a hitting one  and you'll notice that it changes. Okay? It might have to refresh, I do  and becomes big bold, okay? That's the default for H ones.

We can go install it, that's fine. Um, or I can click it up here. There's one here. It says H one or PT tag. It doesn't really matter which way you go about it. Also, you prefer to do it in code.

You can see down the bottom here, um, where we go. If I click in here, here's my H one, I click on it, it kind  of highlights it down here in code view. It does normally, if it stops doing that, okay,  it's done it for me, it stopped working. Sometimes Dreamweaver needs a bit of a file. Save all and then it close and a reopen. Okay?

Actually didn't need to reopen in this case. Um, so there it is, there. I click on my H one  and it grabs it in the code there. So if you prefer to work in code view,  you could change it member in these two options  or just go into the code view here and change the beginning. Okay? So I want this to be an H two now,  it's now an H two accept.

I need to close do the closing as well. So you gotta make sure you do the beginning and the end. If I want to do this back to a  PT tag, watch this, delete that. You are a P tag. Make sure you leave the forward slash there  and put it in a PT tag and it's back to being a PT tag. Okay?

So either way you wanna do it,  I'm gonna put 'em back to H one. This is how you change the tags. Okay? So what I wanna do now is I wanna style this tag. So let's go and do that. I'm gonna hit file save all just  to make sure we're all where we are.

And let's go into our CSS design view. Let's put our style in our main css. And here it says selector. It might default to it. It's, it's defining too much. By default.

You can delete everything here. You just want the H one. Or you can use up and down arrows on your  keyboard up a few times. Gets back just to style the H one. I don't wanna style all the rest of the stuff, just him. So, uh, I'm gonna turn show set off.

Um, so it gives me all the things I wanna do to it. And what I'm gonna do now is I'm gonna go through  and I'm going to pick, uh, let's leave the,  let's go the type, okay, let's pick a color. Okay? And the color for this one is gonna be the same as um,  one of the boxes down here. Um, That guy there,  and I'm gonna steal it from that  list of colors that we've got. There is our H one.

Gonna copy it. Make sure you get the hash as well. And let's go into Dreamweaver. H one, the color. I'm gonna replace it down here. You can pick any color you like  and you can see that I've styled the H one  and that's gonna style all the H ones on every page.

Generally you only need one H one per page. Okay? And now I'm gonna go through and change the size. So it says font size, medium. I'm gonna change it to pixels. And instead of zero pixels, I'm gonna make this one.

Let's say 20. Okay, actually let's make it a lot bigger. 30. Great. Awesome. So that's how you go and style a tag.

Now let's do the same thing for the P tag and have a look. Um, so the P tag down here, I wanna style. So I've clicked inside here, kind  of sometimes clicking this kind  of helps it know when we click new selector  kind of guesses the right one. If it doesn't say it guesses the total wrong one. You can just type in P and click enter. It doesn't really matter what you've got selected over here,  just type it in, hit enter.

And I'm gonna go through to my font  and I'm gonna change the color to white. Okay, so I've styled all P,  it looks like I've styled just this one. But look down here anything that is also a PT tag. You see, here's white now as well. All these guys down here are white, okay? Remember there was words in here, uh, print, they're whites.

They're very hard to see. So by changing the tag,  you change all instances of that P tag. And now you can see why classes are gonna be quite useful. 'cause say that I want just a little bit  of this text to be a different color. So what I'm gonna do is, let's say I want this, um,  So let's just say this P tag at the top here. I want all the generic P okay,  or the generic P tags to be that size.

That's fine the way it is,  but I want this top one to be a little bit bigger  to match my, uh, design in Photoshop. Okay? You can see it's actually, uh, bigger font  and even bigger down here. So what I'm gonna do is I'm gonna create a class, okay? Because if I change the P, it's gonna change them all. So let's create a class.

It's in the main CSS. Let's click on a selectors. I'm gonna make one member full stop goes in  front that makes it a class. And I'm gonna call this one, uh, first paragraph first. Actually, I like putting text at the front of it just  to make it easier to find. Actually I might, yeah, call a text  and call this one, uh, paragraph.

Now let's call this one first P, okay? And what I wanted to do is I wanted to change the size. So let's grab the font, let's grab the font size,  let's pick a pixel and let's go into 16. Now nothing changes over here, right? Even though I had it selected. What we need to do  with the class is once we've created, it's go over here  and you see my PT tag, you can add a class  and hopefully if you put full stop in  and you start putting in text and a hyphen,  and then you put in F for first  and can you see it's gonna apply this one  and all he does that little um,  class is change the font size,  but you can get it to do all sorts of things you want to do  separate from the rest of the P tags.

And can you see this guy's still the original size? Same with the guys down the bottom here. So you can leave the PT tags alone just  to do some broad kind of style changes  and then real specific ones using classes. Alright? And hopefully  that explains a little bit about tags versus classes. Tags are predefined,  already written things like the P tag or the H one.

And then classes are used to modify those tags. So you do some basic adjustments to the tags  and then little extra bits using the classes.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025