Working with Image Styles
Let’s take a look at some techniques, that you can use to style images. An image style is represented as a class style within your <img> tag and looks like this in your HTML code:
<img class="my_img_style" src="/images/sampledata/myimage.png" />
This works by calling to a CSS image style which is found within your websites templates and looks like this:
This is built up in 3 parts. The ' img ' part defines the object type as being an image, the ' . ' defines that it is a class while the last portion ' my_img_name ' is the name.
This is important because most editors come with the ability to filter ‘Styles’ by object types. For instance, if you select an image object with your mouse the editor will prioritise image objects and display image styles first.
We can do this by selecting the 'image' object as seen in the screenshot (below in point 1.) and next select a predefined image style from the list as see in point (2.) which can be used to add a style to your image.
Here are a few examples of image styles: