How to Apply a CSS Class to an Inserted Image

Assign a CSS class to your image by editing the HTML code.

If you have a Cascading Style Sheets (CSS) class that you want to apply to your image, you can do this by modifying the HyperText Markup Language (HTML) that controls the picture on your page. The CSS rule enables you to modify your image in various ways, such as positioning it where you want, depending on the attributes you include in your class. Use your computer's text editor to assign the CSS class to the image you prefer.

Instructions

1. Bring up your text editor application, and open the file that has the image to which you want to apply a CSS class.

2. Locate the image code that displays your picture. For example:

   <img src="http://www.website.com/images/picture.jpg" />

3. Position your cursor after the source declaration and enter "class=" followed by the name of the class rule, like so:

   <img src="http://www.website.com/images/picture.jpg" class="example" />

4. Save your file and view your page in a Web browser to see the CSS class take effect.

Tips & Warnings

• If you do not see your image change, refresh your page so all updates are displayed.

• You have the option to apply your CSS class to more than one image.

References

• W3Schools: HTML <img> Tag
• W3Schools: HTML Class Attribute

Resources

• Tizag: CSS Tutorial -- Class
• HTML Dog: Class and ID Selectors
• World Wide Web Consortium (W3C): Class Selectors