CSS class example for images

Code:

#content img.alignleft {display:inline; float:left; margin:5px 15px 5px 0;}
#content img.alignright {float:right; margin:5px 0 5px 15px;}
#content img.aligncenter {display:block; margin:10px auto;}
#content img.border {background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}

Adding the alignment class

The sample image in the content of the Variant Creative template is shown using this image tag in the file index.html:

Code:


<img class="alignright" src="img/test.jpg" height="225" width="300"
alt="Example content image using the class .alignright" />

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Custom stle class for images

The css class will be like this:


img.class-alpha
{background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}




html5 example:

alt="Example content image using the class " />