- Impact
- 70
Ok, Here's my second tutorial for NamePros, My last one was on creating HTML pages, I feel its time to step it up and start to learn CSS.
In this first CSS tutorial will will create something VERY simple but it's something that you will use as a web designer a lot, Image Manipulation. I say Image Manipulation, its more just a fancy hover.
Step 1
Ok, We need to start by creating 2 files:
Step 2
Next we need to connect the stylesheet (style.css) to the html page (index.html), Insert the below code between your <head> and </head> tags.
Step 3
We now need to create our div, this is simply a container that will allow the stylesheet to relate to the html document. Insert the below code between your <body> and </body> tags.
Step 4
Now open your CSS file (style.css) and enter the following first set of functions. This will set your original image. Please replace SIZE with your image size and "original_image.jpg" with the image you want to show before the hover.
Step 5 - FINAL STEP
We will now create the hover. Below your last group of functions in your CSS file enter the code below, note that the first line now says ":hover" this will make the div be replaced with these settings when the user hovers over the original div. Like before, please change SIZE and "new_image.jpg", this should be your new image.
That's it your done.
Enjoy!
P.S Mind the spelling
In this first CSS tutorial will will create something VERY simple but it's something that you will use as a web designer a lot, Image Manipulation. I say Image Manipulation, its more just a fancy hover.
Step 1
Ok, We need to start by creating 2 files:
Code:
index.html
style.cssStep 2
Next we need to connect the stylesheet (style.css) to the html page (index.html), Insert the below code between your <head> and </head> tags.
Code:
<link href="style.css" rel="stylesheet" type="text/css" />Step 3
We now need to create our div, this is simply a container that will allow the stylesheet to relate to the html document. Insert the below code between your <body> and </body> tags.
Code:
<div id="image_roll">
</div>Step 4
Now open your CSS file (style.css) and enter the following first set of functions. This will set your original image. Please replace SIZE with your image size and "original_image.jpg" with the image you want to show before the hover.
Code:
#image_roll {
display: block;
width: SIZEpx;
height: SIZEpx;
background: url("original_image.jpg");
}Step 5 - FINAL STEP
We will now create the hover. Below your last group of functions in your CSS file enter the code below, note that the first line now says ":hover" this will make the div be replaced with these settings when the user hovers over the original div. Like before, please change SIZE and "new_image.jpg", this should be your new image.
Code:
#image_roll:hover {
display: block;
width: SIZEpx;
height: SIZEpx;
background: url("new_image.jpg");
}That's it your done.
Enjoy!
P.S Mind the spelling
