This little code can come very handy especially if you have many images to add too your web pages and wants to automate the job of styling them. There is not much if no difference whatsoever in what they do, or what the result will be, in other words the page will look the same, however, as a rule of thumb, you should only use one unique ID per element, (so ID “are” unique). Classes can be used multiple times in the same element. Not everyone even care of this when writing web pages code, however, if you want to do your job at best and you are concerned on passing HTML/CSS validation you should definitely select the right one according to how many times you are running your code on the same element. For more of this tutorials, stay tuned ..or, Follow me in any of the social network indicated by the small icons on my signature below. STEP 1 – Here is the code that you need to add to you stylesheet:
Now that we have added the code to our stylesheet let’s concentrate on to the web page where you would like to see the images displayed with the new styling.
STEP 2 – Add the html code to your web page body.
That’s it, job done. Just remember to replace the placeholder text with the name of your image and add any other customization you might require to your HTML code. Refresh your web page and now you can see your images with the new styling. One consideration, you might have noticed that I have used an ID instead of a class on our CSS code. If you are planning to have the same code running multiple times in the same element you might consider using a class.
Difference between ID and Classes
There is not much if no difference whatsoever in what they do, or what the result will be, in other words the page will look the same, however, as a rule of thumb, you should only use one unique ID per element, (so ID “are” unique). Classes can be used multiple times in the same element. Not everyone even care of this when writing web pages code, however, if you want to do your job at best and you are concerned on passing HTML/CSS validation you should definitely select the right one according to how many times you are running your code on the same element. For more of this tutorials, stay tuned ..or, Follow me in any of the social network indicated by the small icons on my signature below.
About the Author
Digital Designer, blog writer and also a tech enthusiast.
He loves to write content for blogs, podcasts, design websites, logos, brochures, banners and anything that sends a message to an audience.
You can contact Daniele at the link below:
