Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli the computer guy dot com.

Welcome back.

As you know, I'm Eli the computer guy, and today I'm going to be showing you how you can assign attributes to ideas within your HTML documents.

Eso before I did a class and I showed you how to assign attributes to classes.

So, basically, if you want different types of text to all, have a similar feel.

So let's say all of your heading texts and all your P text h 1 82 83 84 85 86 your pee.

Maybe you want them all to be the same color.

Or maybe you want them all to be the same thought, that type of thing.

What you can do is you can create a class, then whenever you're right now, the HTML code, whenever you put the H one tag or the P tag.

You can then say it's a class equals and then whatever class you created within your CSS, and then that tag will gain of the attributes of whatever it is you put into the CSS.

So if you want everything with that class to be a certain font, it will be that fun.

If you want to be a certain color will be the certain color, so on and so forth.

Well, you can also do the same thing with I.

D.

So I d.

S are useful thing within HTML Web pages, mainly because what they do is they allow you to do what are called anchor links within a single page of HTML.

It's a lot of people understand how normal hyperlinks works.

All right, if you create a hyperlink on a page, normally what you're doing is you're actually linking to another Web page within the overall site, or you're linking to an entirely different sites.

You do the a ref on.

Then you plug in again the domain name or the location to wherever you want the people to go when they click on the link.

Well, one of things that you could do with anchors is you can actually create links within the same Web page.

So let's say you have a Web page.

It's really long, right?

So instead of instead of having a whole big website, so numerous different small pages on a large website, let's just say you have one really, really, really big Web pig.

That could be a real pain in the butt to try to navigate through.

And so one of things you can do is you can create ideas.

Basically, these are anchor points within that Web page.

And then you can create hyperlinks just to be able to jump to those different places in the Web page based off of those those those anchors based off of those ideas.

Well, when the interesting things is when you're using those ideas for things such as anchors for links within your Web page, you can actually also assign CSS attributes to those ideas again.

Let's say if you wanted to do something specifics of different sections of your Web page, maybe you want different sections to have different colors.

You want them to have different fonts are different, something depending on the different sections.

So let's say you had 10 different sections within one really long Web page.

Maybe the first section, the background would be yellow.

In the second section, the background would be green again, just a way to give a visual differentiator.

So as people try to navigate through your page, they have an idea of what's going on.

Honestly, what I'm going to be showing you how to do basically assigned CSS attributes to an I.

D.

Today.

I think most people would argue it's actually a better idea to idea to assign these attributes to a class so basically creating I D and a class.

But I just want to kind of show you how this works with ideas.

If you're using IEDs within your website anyway, maybe instead of creating classes and numerous other different things, maybe if you just simply assign attributes to a spit to your ideas instead, this might be a useful way for you to do things.

So with that, let's go over to the computer, and I can show you how the I.

D.

S and how assigning CSS CSS attributes to those ideas work.

Here.

We are back at my demonstration machine again.

I am using a Mac book pro again for these basic kind of coding classes.

I would like to use a basic asking text editor just to show you that's all you need in order to do this type of thing in the Macworld used text at it.

If you're in the Windows world, you can use note pad.

If you're in the Lenox World, you can use G edit them.

Nana, whatever the important thing to remember is, whenever you create an HTML document, basically, this is what's actually opening up in your Web browser.

It has to end with a dot HTM eat HTM or dot html.

When you create your CSS file, that has to end with dot C S s.

So for this particular project that we're doing today, um, I haven't i d dot html file.

This is the document that will actually open in the Web browser.

In this points back to an i d style dot CSS.

This is the cascading style sheet that gives the style for everything going on with these ideas today.

So again, whenever we do it, the HTML documents the first thing we need to do is open up the html a tag, then we're going to open up the head tag.

And then for these particular projects, all we're going to be doing is creating the link tag to the style sheet in the head.

You're going to link.

Relation is a style sheet or F equals.

And then again, you put the name and location of the style sheet.

So with this, it's in the exact same folder a CZ This particular document is so I could just put the name there if it is in a different folder for summaries, and you just have to put the full file path there.

You close.

You put that little, uh, forward slash there and you close the link, and so this links us to the i d style dot CSS.

Now, if I go over here and I take a look at the I d style that CSS, we can see that I've put in a few things here now.

The 1st 30 things that I've put in here is I've put in settings for three ideas, so when you're doing ideas when you're doing ideas, you're going to put that pound to sign that hash sign in front of it.

You're doing classes.

You put the period sign in front of it again.

Just one of those simple memorization things.

Just remember, if you're going to be creating attributes for I d.

S, you put a hash sign in front of the I D.

If you're going to be doing attributes for classes, you put a period Sinan from the name of the class.

So with these again, I am simply calling these I d one I d to or I d three.

You could name these ideas.

Whatever you want to name them.

I'm just being simple.

What I've done here is for I d one.

I'm simply saying that the background color should be yellow that I'm doing for i d to the background.

Color should be pink.

And for i d three, I'm saying the background color should be green.

So when I referenced these I.

D.

S, the background color for the text will be those different colors.

I also created these classes here, So basically, just to show you that you can add classes within I d.

S.

And so for class one, I'm doing the text color itself So this is the background color.

So with this I'm saying the text color is going to be orange.

And then class, too.

That color is going to be read.

So this is the basic CSS.

The main thing to remember here is when you're dealing with I d.

S again pound or hash sign in front of the name of the I D.

And then when you're doing classes, you put a period in front of the name of the class.

Then we're gonna go over here, actually take a look at the HTML document, and this is a bit of a mess just because I wanted to give you an example of why I desire useful as anchor points.

So let's go in first.

Just kind of walk through this.

The first thing that I'm showing you here as I'm assigning an i D.

He I d.

Here of I d one simply to this h one text.

So all this is is 81 text and this is going to be I d one.

So if I wanted to create a hyperlink here, it will come directly here.

Then the next thing that I do it done is I created a division.

So basically this is a div.

This is saying all of this stuff goes together, do the same to everything between these two tags.

And I've assigned this for I D too.

So basically the H one, we have normal H one tag here.

We have normal p to tag here, but everything within this particular div will get the values for I D to.

So if we go over here, you take a look at I d to sew.

Everything here will be in pink.

So the age one up here, this will be in yellow.

All of this will be in pink.

Then we're going to go down here to do another def tag.

This will be for I D three, so I d three I's going to be that background color of green.

But then here what I've done is for the actual text tags.

I have added classes so the background will be green and then h one will have the attributes of class one, and the P will have the attributes of class to The final thing that I've done here is just to show you how the anchor things work with an I D.

In case you don't know is I've created a hyperlink within this document to I d four.

So this hyperlink basically it's an a ref.

It looks a lot like a normal hyperlink.

The only difference is you're going to do that.

Pound I d.

Four.

So this is where that pound comes comes in again.

You'll notice here when they do the div I d.

I simply did the I d, too.

I did not do the pound sign here for the A hair.

If I actually do the pound sign and I just say this is a link to I d four, then all I did as I put a lot of periods in a lot of breaks.

Basically, all I'm doing here is actually just creating a big file so I can actually go somewhere.

And when I click on that link that's going to come down here to this Div.

I d i.

D four.

So basically, when I click on that link that's going to come down here, and this is just gonna show you that ideas could be used for hyperlinks.

I then added some more periods and breaks just so it flushes everything out and it actually runs pretty smoothly again.

What this should be is you should have lots and lots of paragraphs and writing and images and all that kind of stuff.

And so you're linking throughout the page again for a demonstration like this doing showing.

So it was then all we have to do is you coming down here to safari.

Let me do the refresh and as we can see here.

So you see, this is basic H one.

So again, that body I d.

One that that has the CSS where the background will be yellow and so that's yellow.

Then we have the div i d i d to So, for i d to everything within the I.

D two will have a background of pink and we can see now that the h one and the P tag all of that is pink.

Then we go down to the diff for i d three So I d three the CSS said the background is green And then what we did here is we added some information for the H one and for the P.

So h one gets a class of one.

That means it'll be orange text and the P will get a class of two.

That means it will be their red attacks.

And so we have the orange and the red sitting here on this green background.

Then you're gonna come down here, You're gonna see a ref.

This is going to point to that I d four again if we're looking here so we can see this is a link to I d four.

I can click on this and see that jumps us down to where i d four is in the page.

And again, all you're seeing is periods here because I'm just kind of simulating that this would be a large pick and again just to give you that I d idea if you don't know what an I D is used for for these anchor points in a page just to give you a bit of a clue here.

So this is how ideas can be used to assign attributes to your text, whatever other kinds of formatting you're going to be doing with CSS, depending on what you're doing with your particular site, it may make sense.

It may not, but this is the basic idea.

So now you know how to assign CSS attributes based off of an I D name.

So again, do you remember on that CSS style sheet ideas?

Start with that pound, that hash symbol.

And then whatever the name of the I d.

ISS again for dealing with classes, you start with a period, and then whatever the name of the classes, that's just kind of rote memorization thing and then passed that.

Whether doing with ideas or classes, you simply type in everything, using the normal CSS syntax and away you go again.

One of the most valuable things about ID's in the HTML world is the ability to create links within one single Web page.

Again, you go to some of those Web pages that are really long, right?

If if somebody actually printed out that paid you only like 50 pages long, so having a lynx internal to that page probably makes a lot of sense now.

One of the things that you do have to be thinking about in the CSS world, like a lot of things in coding, is you do have to think about the most appropriate way to assign the CSS attributes again.

As we're going along with these classes, you will notice there's multiple ways to assign attributes to anything within an HTML document.

Again, you can have it the extent of external style sheets you can have in line CSS.

You can assign CSS based off of class.

You're gonna sign CSS based off of I D.

You can assign CSS based off multiple other things within your age came out document.