Subscribe or Login to watch video

Login or Subscribe to watch video

22 - HTML selector types: Tags vs Classes


Questions & Comments

Jay - 1 year ago

Hi Dan,
Great videos!
I have h1 in the main.css as you have explained in this video. Unfortunately, my h1 tag is not giving any text colour to generic h1 text in the index.html. However, I created a separate class then it worked. Any help will be much appreciated.
Regards
Jay

Administrator Daniel Scott - 1 year ago

Check that your Main.css is underneath your bootstrap.css. You'll find this listed in the <head> of your HTML page. (probably index.html). Basically the last H1 list wins the battle. Let me know if this helps Jay.

Andy - 1 year ago

When I clicked the heading text, it didn't define it as a separate element (giving the pop-up to edit to <p> or h1>. Instead, it just only gave the option for the entire text block (so all the text had to be <p> or <h1>.

At first, I thought you may have used a separate row of the heading (or added some form of <h1> format to it right at the start, but I don't think you did. Guess I'll just have to add a class to the heading text.

Andy - 1 year ago

Don't worry, not sure why I didn't just think of using the code view to manually make the line <h1> (which then made the line selectable with the correct h1 blue pop-up box) lol

Administrator Tayla Coman - 1 year ago

Good idea for the fix Andy! Awesome that you figured it out yourself.

Ron Doran - 1 year ago

Hey Dan,
Any reason that the course numbers and the videos do not match? If I select this lesson # 22 in the video it shows as 21 I was getting confused. Then again I am easily confused.
Cheers
Ron

Administrator Tayla Coman - 1 year ago

Hi Ron, this is because we added an extra video which threw them all out. If you check the title of the video against the title of the page, you'll see that they're the same and everything is as it should be. Let me know if you have any more issues :)

William - 1 year ago

Hi dan, I have been trying to control "P" tags, and getting into trouble please will you help. As you can see I have 3 cols two of 3cols each and one with 6cols. Where I am struggling , in the centre box with six cols, I am trying to place some text from notepad. Then experiment with fonts sizes, colours, spacing etc, but I have run into a problem with line spacing as you will see in the attached. Dreamweaver cc 2018 is displaying completely different layouts in "Live view" and "Design view"
and when previewed it looks more like live view.
Am I starting with the text layout wrong in "Note pad"
Secondly Why does the RH picture drop down below out of position in design view please.
Regards Brian

William - 1 year ago

Code for above

William - 1 year ago

This is the result

Stephen Fawcett - 1 year ago

Hi Dan, Great tuts. I'm trying to style the text in 'grid rows with columns' but my CSS Designer panels are not responding, the properties pane (grayed out). and the same trying to click on main.css in Sources. They come back live when I click on all the '.container-fluid' bands, do I need to add a Class/ID to them ?
Thank you (see attach)
Steve

Stephen Fawcett - 1 year ago

Just noticed my main.css is not updating?
see attach.

Stephen Fawcett - 11 months ago

This no longer an issue for the moment. Thx

Stephen Fawcett - 11 months ago

My weak point is folders. I cannot get my head round arranging folders at the start of a new site. I'm building a site of my own in parallel, I'm up to tutorial 22 with Dan, my folders out of sequence with the lesson folders, at one point my main.css was 'outside the local disc' but I've managed to retrieve the site, I also get confused with 'save as' please see screen shots......where am I going wrong?

Stephen Fawcett - 11 months ago

Update; The tried to rearrange my folders which broke up the site and I lost main.css, but I've retrieved the site as I kept a folder copy. I don't understand how my site has an index.html folder and Dan's has not?
I will carry on working my site along side Dan's Bootstrap for now.
Q; I've been opening the Bootstrap demo site and my site in the DW pane (two tabs) is this a no no?
I've included a Screen shot of the DW files pane to show the folder arrangements but both sites are working. Thx

Administrator Tayla Coman - 11 months ago

HI Stephen, you definitely shouldn't have a index.html folder, it should only be a file called 'index.html', as for why this is happening, I can only assume that you made the folder by accident.

Its not really a problem to open both sites within Dreamweaver, you just need to keep track of which one you're editing.

You should probably start the website folder from scratch, follow Daniel's folder structure and replace the content of the index.html and main.css files. Sorry for the late reply also.

Administrator Tayla Coman - 11 months ago

And if you find that your site is being broken after taking your index.html file out of the folder, it's because the links to the javascript and css are now incorrect, they need to be relinked

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hi my name is Dan and in this video we are going to look at the difference between tags and classes. Now we have looked at classes quite a bit through this class and we kinda saw them when we were down here, we applied a class to this image here. And it was a full stop at the beginning and then it said image responsive. We also did it for down here, we made it centered. We applied something called center, a full stop and then a center hyphen clock. Now that is considered a class.

 

Now a ta, a tag is something that’s predefined in html and that is things like the p, can you see here? There’s the p tag already made. Now tags are premade in html. A p tag is a p tag, you can’t have a q tag and get it do the same thing. P tag is a bit of paragraph text and h1 is what is considered a heading 1, an a tag is what we use for doing hyperlinks. So they’re predefined by html. Whereas our classes, we get to name and create ourselves. We get to call them, say for what we did for the banding in the back here. We called it band hyphen hero. And for that we got to give it a name and decide what it looks like. So p tags quite generic and classes are quite specific. Now the reason we need both is say I've got two bits of p tags but I want them to be different.

 

I want this text to be very different from the p tag in this one. If I style the p tag, great, but they would be exactly the same. So what we style some kind of generic styling to the p tag, it might just be the font and the colour. 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 lets go through and do that, lets start at the top here and let’s look at this thing, which says lets make things awesome. And what we are going to do is change it from a p tag to a heading 1. So it’s going to be the main heading on the page. Now you can do it a few different ways, down here you can see it’s a paragraph tag; I could switch this to a heading 1. You will notice that it changes, I might have to have a refresh, I do. But it becomes big and bold, that’s the default for h1s. We can go and style it, that’s fine. Or I can click it up here, there’s one here which says h1 or p tag, it doesn’t really matter which way you go about it.

 

Or say you prefer to do it in code, you can see down the bottom here, if I click in here, there’s my h1, it kind of highlights it down here in code view, it does normally. If it stops doing that, it does it for me, its stopped working, sometimes Dreamweaver needs a file, save all and then a close and a reopen. Actually it didn’t need to reopen in this case, so there it is there. I click on my h1 and it grabs it in the code there. So if you prefer to work in code view, you can change it remember in these two options or go into the code view here and change the beginning. Say I want this to be an h2 now, its now an h2, except I need to do the closing as well. So you got to make sure you do that beginning and the end. If I want this back to a p tag, watch this. Delete hat, you are a p tag, make sure you leave the forward slash there, put in the p tag and its back to being a p tag.

 

So either way you want to do it, I'm going to put him back to h1, this is how you change the tags. So what I want to do now is I want to style this tag. Lets make sure we are all where we are. And lets go into our css designer view. Lets put our style in our main.css, and here is its selector. It might default to it, its defining too much by default. You can delete everything here you just want the h1. Or you can use your up and down arrows on your keyboard. Press it up a few times, it get back just to style h1. I don’t want to style all the rest of the stuff, just him. So, I'm going to turn show set off, so it gives me all the things I want to do to it. And what I'm going to do now is I'm going to go through and I'm going to pick a, lets leave the, go to the type, lets pick a colour. And the colour for this one is going to be the same as, what are the boxes down here, that guy here. I'm going to steal it from the list of colours that we've got, there’s our h1. I'm going to copy it, make sure you get the hash as well. That’s going to Dreamweaver, h1, the colour, I'm going to replace it down here, you could pick any colour you like. And you can you see that? I've styled the h1, and that’s going to style all the h1s on every page. Generally you only need one h1 per page. And now I'm going to go through and change the size. So it says font size medium, I'm going to change it to pixels and instead of zero pixels I'm going to make this one lets say 20, actually let’s make it a lot bigger, 30, great.

 

So that’s how you go and style a tag. Now lets do the same thing for the p tag and have a look. So the p tag down here I want to style, so I've clicked inside here, kind of sometimes clicking this kind of helps it know when we click new selector, it 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 going to go through to my font and I'm going to change the colour to white. So I've styled all p tags, it looks like I've styled just this one but look down here, anything that is also a p tag, can you see he is white now as well? All these guys down here are white, remember there were words in here, print; they’re white so they’re really hard to see. So by changing the tag, you change all instances of that p tag.

 

Now you can see why classes are going to be quite useful. Say that I want just a little bit of this text to be a different colour, so what I'm going to do is lets say I want this, so lets just say this p tag at the top here, I want all 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 design in Photoshop. You can see its actually a bigger font and even bigger down here. So what I'm going to do is I'm going to create a class. So if I change the p it’s going to change them all, so lets create a class. Its in the main.css, lets click on selectors, I'm going to make one member, remember full stop goes in front, that makes it a class and I'm going to call this one first paragraph. Actually I like putting text at the front of it, just to make it easier to find, I might call it text and call this one paragraph, lets call this one first para. And what I want it to do is I want it to change the size.

 

So lets grab the font, lets grab the font size, lets pick a pixel and lets go to 16. Now nothing changes over here right, even though I had it selected, what we need to do with a class is, once we've created it, is go over here, can you see my p tag? You can add a class and hopefully if you put a 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 gone and applied this one. And all he does, that little class, is change the font size. But you could get it to do all sorts of things you want to do separate from the rest of the p tags. Can you see? This guys still the original size, same with the guys down the bottom here. So you can leave the p tags alone, just do some broad kind of style changes and then do some real specific ones using classes.

ALL ACCESS: $12 per Month + Cancel anytime