img class attribute
The class attribute on the img element:
- allows you to apply a CSS class on the img tag
- is a global attribute → can be applied on all html elements;
- when applied on the root element <html>, its value is inherited by all other html elements
Learn to ensure your website's cross browser compatibility »video.
Examples
| <img | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 2. | class | = | class name | < src="image.jpg" alt="alt text" class="class_name"> "class_name" = the value of the class attribute "class_name" = the name of a defined CSS class inside an internal ⁄ external style sheet |
Video demonstration img class attribute
HTML5 img class attribute Tutorial
| min | video details |
|---|---|
| 00:05 | video tutorial: class attribute on img |
| 00:11 | inside style element, we defined 1 CSS rule for elements having the class="bd" |
| 00:17 | multiple images are embedded into our document |
| 00:23 | let's apply this css rule to the 2nd image |
| 00:44 | the 2nd image has now a 4px outset border |
| 00:54 | the same class can be added on multiple elements on the same page → the CSS rule(s) corresponding to that class will apply to all those elements |
| 01:02 | the 1st and 3rd image have now a 4px purple outset border |