+ 3

How we can increase the width and height of an image in external css?

I am trying to find answer of this question.

6th Oct 2017, 12:40 PM

mohit verma

2 Answers

+ 2

Let's say you have an image: <img src="mountain.png" alt="A mountain."/> Now, with external CSS, you must reference the img object. So, add an ID or a Class to the tag (the class or ID can be anything you want, just no spaces, as that will give multiple IDs or classes. ID: <img src=" mountain.png" alt="A mountain." id="mountain"/> Class: <img src=" mountain.png" alt="A mountain." class="mountain"/> Let's say you have your external CSS file opened. We have to now style the img. We can do this by referencing the ID/class: ID: #mountain { width: 300px; # can be anything you like height: 500px; # can be anything you like } Class: .mountain { width: 300px; # can be anything you like height: 500px; # can be anything you like } Finally, you must link the CSS to the HTML. To do this, add the <link> tag, replacing the link with the name of your CSS file (normally style.css): <link rel="stylesheet" href="name_of_css_file.css"> Now, the image should now have a width of 300px and a height of 500px! :D Happy coding! 👍

6th Oct 2017, 1:55 PM

LunarCoffee

+ 1

In External styling the same styles can be used across multiple pages of the site . External styles are defined in the <head> section of an HTML page, in the <link> tag . <!DOCTYPE html> <html> <head> <link rel="External" href="style1.css"> </head> <body><img src="picture.jpg" class="class" alt=" Your message"> </body> </html> Style1.css: (Remember to keep the external css file and html file in the same folder) .Class{ Width:y px; Height: x px ; }

6th Oct 2017, 5:43 PM

Rishita