3

Now we’ve got the hang of the image code and how to add styling to individual images from Part 1 we shall now move on to look at how to style images in a more efficient way and help you reduce errors in your coding.

Our Aim

The image displayed on the right is what we are aiming to achieve in this part of the series. To do this we will be using classes

This tutorial will give your images a nice bordered effect to your images which is found quite widely over the internet. The style makes use of margins, padding and thin border.. as you can see.

What’s New?

In this part we shall begin looking at CSS (Cascading Style Sheets). In short a CSS file is a file separate to the html file that codes for the styling of all your web-pages (for example Wordpress and all major content management systems use CSS files).

Why Are CSS Files Used?

They are used because they offer lots of flexibility to large multi-page websites. For example if the styling for a black background was coded into each individual page then you would have to change each page individually which would be very time consuming, but if the back background code was in the CSS file you would only have to change one line of code to change the background on every page… clever stuff..

CSS: The Basics

We are going to make use of this CSS and add some styling to the CSS file which you can then apply to your image via classes. By using class we reduce the length of the <img> code and make your website more efficient. We no longer need to use style in the image code (class=”" is used to replace style=”").

The reason for changing over to classes is that they allow you to apply several styling effects to an image using just one word. It also means that you don’t have to write out each style over and over.

Here is an example of a style

style=”margin:4px; padding:4px; border: 1px solid #000;”

Now here is a example of a class

class=”imgstyle”

That class refers to a line of code in the CSS file which would look something like this

.imgstyle {margin:4px; padding:4px; border: 1px solid #000;}

As you can see the styles are in the same format they are now just placed between curly brackets. You will also notice that there is a full-stop before the “imgstyle”, this simply denotes that this line of code is a class in your css file. (Note: The full stop must be there.)

The Nitty Gritty

The next step is to locate your CSS file. This can be done as follows (Wordpress only):

1. Go to your Wordpress admin
2. Press “Design” (or “Presentation” for those on versions before 2.4 or earlier)
3. Then go to the subheading “Theme Editor”
4. Find your CSS file on the right and go to it (usually you land on your CSS file, it may be called style.css)

Adding Classes To You Style Sheet

Now we have located your style sheet it is time to add the classes to it so that we can then use them on any images you may be using.

Scroll to the bottom of your style sheet and copy and paste the following at the bottom:

/*–image styles–*/
.imagestyle {margin:0 8px 8px 8px; padding:4px; border:1px solid #eaeaea;}
.floatleft {float:left;}
.floatright {float:right;}

The full-stop tells the browser that the line of code is a class and this is then followed by the name of the class (this can be anything, I’ve just used relevent ones in this example). This is followed by the style elements in curly brackets.

You can see that we have 3 classes..

• one to add a margin, padding and border to the image
• one to make the image sit on the left of the content
• one to sit the image on the right of the content

We will only ever need to use 2 of these classes to style the image. You would always use the .imagestyle class to add the effects to your image and then apply either .floatleft or .floatright depending on which side you would want your image to show. This allows for a little but of flexibility for you as a publisher.

Adding Classes To The Image

Now we have the classes we have to apply them to the image

We do this in almost the same way as we did for the styles in Part 1

Find the image code:

<img src=”image-url” alt=”">

Now we need to insert the following section of code into the image to get our classes working:

To display you image on the left

class=”imagestyle floatleft”

OR

To display you image on the right

class=”imagestyle floatright”

This would leave you with something like

<img src=”image-url” alt=”" class=”imagestyle floatleft”>

Note: the full-stop is not used when defining classes to an image. The full-stops before the name of the class are only used in the CSS file.

With all that said, you’re now done!

Save your changes and check out your image to see how it looks.

We hope you enjoyed this article and found it useful.

Continue onto Part 3 where we will be giving you a list of awesome image styling effect for you to chose and implement on your site with minimum hassle. You just copy and paste the styles as we’ve explained in the last 2 parts. Take me to Part 3..

Trackbacks

Leave a reply...

Name (required)
Mail (will not be published) (required)
Website