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 why I'm Eli the computer guy, and in today's class, I'm going to show you how to use CSS to modify your formatting of text and images based off of if somebody is using their mouths and hovering over those text or images.

So this could be a useful way to give a little bit of, ah, pizazz to your website or your HTML document, or simply make it easier for your visitors for your users to be able to understand what's going on, eh?

So basically what we're going to be doing today is we're gonna be using P tags were going to be using T R tags, and then I'm going to be showing you how to do this with images.

And basically what's going to happen is if you highlight over AP tag, it is going to have a background color of grey.

So let's imagine.

I'm reading through a document.

I see something.

Oh, somebody else should probably see this.

I can put the mouse over that p tag area.

It will show up gray.

And then I could say, Hey, hey, read this.

And then when the person comes over, they're not going to like, uh, what do you mean by this?

What?

What am I supposed to read, right?

You can hover over the paragraph and it will be great.

It's what's in the gray, right?

Or again if you're going to be doing things like looking at reports and you have a table, one of big problems with tables.

If you get a big table, you got a lot of columns.

You gotta wrote a lot of rose.

You got a lot of data.

You're just simply looking at it, trying to discern some information.

One of the issues, especially on a computer screen, is it could be difficult to determine what information is in a particular row.

So if that entire row turns to a color when you hover over it, it's easy to use your mouse and just kind of roll down the rows me later.

Okay, that information looks good, and that information looks good.

Oh, yep, Right there.

That's the problem.

And so if you have that entire row highlighted, it makes your life a lot easier than when we get to emit his.

This is just something that you can use to give a little pizazz a little pop to your HTML document, and what I'm going to be showing you today is I'm going to have a single image.

So let's say you have a single image on your HTML document, and when you roll over it, it's simply going to get bigger, and it's going to have a border around it.

So let's let's say is, let's say you have, like, little small images in your document and maybe for, like, diagrams something like that.

And so maybe most people are just going to skip by.

They're not going to really care about looking at the diagram, so you want to make it small s so that it doesn't disturb the flow of when people read your HTML documents, but they're going to be some people that are actually gonna be interested in that diagram of that image.

And so what you can have is they can roll over that image and then that image can get larger on emphasis.

Could be brought to it so people would go.

Oh, okay.

That's what this person is talking about here on.

And then I'm gonna show you, creating a very basic image gallery.

We're gonna have a lot of images in a row.

And then again, when you roll over one of the images in that gallery, it will get larger s so that you can look at it a little bit better.

And so this is really cool.

You do not need Java script.

Do this.

This is basic eight email and basic CSS.

All this is doing is you're with CSS.

You're saying when you hover over some tag some element within your HTML document, you want the CSS styling to be modified and to show up in a different way, and that will actually give you a bit of a dynamic website so that let's go over the computer and I can show you how this works.

So here we are, back in my demonstration machine again.

I'm using a Mac book and I wrote this code in text edit.

But all you need is a basic asking text editor.

So if you're in the Windows world, you can use note pad in the Mac world, even use text at it.

And if you're in the Lenox World, you can use G edit nano vim, whatever you want.

Basic.

Ask you, Text editor.

We have two documents for this project today.

One is going to be the hover dot HTM mouse is actually the document that you're going to double click, and it's going to open up with the Web browser and then that is going to be pointing back for CSS to hover style Nazi SS.

So this will be our CSS style sheep before actually go and start showing you the code.

I figure probably be best if I show you the demonstrations.

So you understand what the CSS is doing?

What?

I'm explaining it.

And so here I have a demonstration of different examples of what can be done when you hover over an element or a tag in the HTML with CSS eso up here, I have some P tags so appear the 1st 3 things I have RP tags.

And when these P tags, what you'll notice is if I hover over at the P tags, the background color goes to grave.

So again, think about this from a user experience perspective.

Imagine if you have some kind of technical documentation or you have some kind of report.

You're looking through it.

You see something of interest you want a coworker to to read it, see what their feelings are about it.

And basically, instead of simply pointing them at the screen or getting your fingers on the screen or whatever else to show them what you're talking about with this, basically, you can have the CSS.

You can simply hover over that particular paragraph.

You could say, Hey, Bob.

Hey, Sue.

Uh, what do you think about this paragraph?

Do you think this is something that we should care about?

And when they come over and take a look, they're not going to have to guess at what?

You're what you're saying.

They can.

They can obviously see Oh, that's being highlighted.

Yes, they they agree they disagree.

Whatever else, we're gonna go down here, and I also created a table.

So this is a table.

Again.

Tables are big deals, especially like in the i o t world.

When you're dealing with reports, imagine if you have a lot of sensors.

Imagine if you have a lot of information coming in and then you're spitting out a table so that an end user can then see what the results are.

One of the problems you run into is with these tables.

They could be very large.

Imagine if they have 20 or 30 columns.

Imagine if they have 1000 rose.

And so somebody is trying to scan through and take a look at all of this, information a table and try to figure out what's important and what's not.

Simply by being able to hover over a row and have that entire Roby highlighted that can make their life a lot easier.

Saying, Okay, this is this is row one item one Good.

I am too good.

Item three.

Good road to item one.

Good.

I'm too good.

Item three.

Good.

Wrote three.

I don't want good.

Oh, what about item two?

And then again, since it's highlighted like this, I'm gonna go.

Hey, Tim.

A Sally I don't know tha row three here.

How do you feel about those numbers?

I'm a little worried about those numbers again is a simple way to make the user experience better when somebody's trying to read through reports and things.

Bye said.

We could go down to images.

So just like you can use the hover on text, you can do it on images.

And so what I have here is I have ah, formatted.

I formatted this image to be a certain size when it's not being hovered over, and when I hover over it, you can see that it gets a lot bigger and it gets a border around.

It s o for a user experience perspective.

Imagine if you have an HTML document with a lot of diagrams.

Let's say, has a lot of diagrams that has a lot of pictures and for the most part, let's be honest.

Most people are going to ignore all those diagrams and pictures, so if you make them really big in your document, that's what users are going to have to scroll by, and it's going to make it more difficult for people to be able to read that document.

So imagine if basically you make all the images relatively small on the page.

So if people don't care about them, they can keep scrolling on by.

But then, for the engineers or four people that actually care about those pictures of those those diagrams, they can simply scroll over it and they can take a look.

Go.

Oh, OK, now.

Yeah, OK, I see the power goes X wires a year.

The water goes X, y or z right on.

So this is one of things you can do with CSS.

Pass that down here.

I have, like, a little image gallery.

So imagine creating a simple gallery on with this again.

All the images are of a certain size.

And then when I scroll over them, you can see they increase in size, and then I just put a lucky little yellow border around them.

Just so and so you'll notice we may not notice.

Yeah, but basically, the important thing here is that this is all CSS.

There is no javascript.

There's no additional coding involved with this.

This is simply html and CSS.

So let's take a look at how this works.

Uh, we have our HTML document like we normally d'oh, we'll talk about this in a second.

The important thing is that this is pointing back to the hover style dusty CSS style sheet.

So let's go take a look at that.

Here we have the hover style dot CSS sheet and basically, here's just the CSS that have created eh, So what we have here for the hover is basically I have the tag or in CSS the element.

So we have the P tag or the P element.

We have the TR.

So this is for a table row.

We have the i m g er these two places.

Then I've created class of gallery and I have this for the gallery.

And so basically what this is is you have the tag or element basically the tag or the class You knew colon and then you basically just right hover soapy colon hover or dot gallery colon hover, and it says when something is being hovered over.

This is how the CSS should be modified.

Eso for here For P.

I simply I'm saying that the background color should be modified to light gray for the tr for hover.

I'm simply saying the background color should be modified to yellow.

For I am G hover.

I'm saying the width should be 300 pixels.

The height should be auto and the border should be that 10 pixels, solid gray and then dot galleries.

You do remember the period period Gallery colon hover, The width should be 200 pixels.

Thehunt should be auto and the border should be three pixels solid yellow.

So the important thing here is white space.

It doesn't matter when you're doing this, so do make sure you have the class or the tag.

Then you have the colon.

Then you have hover all smooshed together.

Do you worry about what space with this part?

Then passed that I did have to define what the default CSS should be for the I.

M.

V and for the gallery class.

So what I have here is a normal image of I use the image tag and a female on with the display to be a block.

The margin left to be auto, the market right to be auto.

So what this is going to do is this is going to center the image the image is going to be in the center of the Web browser, and then I simply want the width to be 150 pixels and the height to be audit.

Right?

So this is going to center the image in the middle of the Web browser with a with a 150 pixels.

When I hover over the image, it will then modify the wet to be 300 pixels to get height to be auto that is going to give the border that is 10 pixels of solid gray.

Then what I've done for the gallery class.

So I've created a gallery class period gallery.

So this is going to be a display in line block.

So when I showed you basically that image gallery so for the images to be basically be in a line look like that you use display in line block, I then did the width of 100 and 50 pixels, height to be auto and then for this for the standard class of gallery.

I actually gave a 10 pixel, a solid white border s.

So when you take a look at the example, that's what see how, see how there's that nice little gap between all of the images and default.

That's what does that I basically give it.

Gave each image a 10 pixel white border.

It's spaces, the images out a little bit.

And then when I hover over the image, I guess he gives a little space.

It's not not so bad.

That's why I did that.

Then we have down here again.

Gallery hover where they're going to enlarge the images to 200 pixels from 150.

Height will be auto again.