This “CSS in WordPress” series has been written by our awesome CSS and coding maestro, Brian. Thanks Brian!

An image tells a thousand words. So why not have thousands of words on your site? An important thing you’ll learn about images is spacing. There are a couple of different types of spacing, but we’ll be focusing on padding, margins and borders. Look around the room you’re in right now. You’re hopefully within four walls. In CSS, those walls are actually called borders. Now imagine you’re not in that room but a music studio recording booth. To absorb echoes you need materials to pad the walls, and you may have guessed that’s the padding. So imagine a picture of you in that studio. You’re in the middle, around you is padding, and beyond that is the walls (the border). What’s beyond that? Well in this example it could be anything, but lets say its the space between that room and the next. Now call that the margin, and you should have a good idea of the different spaces. {Margin

[Border(Padding/Image\Padding]Border]Margin}. Lets look at an example in CSS code.

img{

width: 800px;
height: 600px;
padding: 5px;
border-style: solid;
border-color: #000000; /* Black */
margin: 0px;

}

Now what is that going to do? Well lets read it.
It’s going to:

  • Set the width of the image to 800 pixels
  • Set the height to 600 pixels
  • Set the padding (remember, egg shell style noise cancellation inside the walls) to 5 pixels
  • Set the border (walls) to a solid, continuous style
  • Set the border to black in color
  • Set the margin to 0 pixels, so no margin

This spacing of padding, borders and margins is also usable on text, such as a paragraph <p> or a heading 1, <h1> tag. Now this is pretty valuable information, but what if we went a little deeper still? We’ve been setting our sizes in pixels all this time, but this may not look right on a smaller screen, such as a regular resolution smart phone. No luckily you don’t have to resize your image for every type of resolution. You can just as easily use percentages, or mix & match. Just remember, the highest you’ll ever want to go is at 100%, and not many people like scrolling left or right on a page, so all width or horizontal percentages should add up to 100%

img{

width: 80%;
height: 20%;
padding-top: 1%;
border-style: solid;
border-width: 2px 1px 2px 1px; /* Top Right Bottom Left Border-Size*/
border-color: #000000; /* Black */
margin: 0px;
}

Now up until this point, this code has been great if you want to style all your paragraphs, headings and images. But what if you just want to style one, or a few? Well that’s where classes and id’s come in. Say you have an image that is a photograph of a winter sky. Well think of your photograph and how you want to display it. By itself or beside other photos. Well think of an id as, well an ID card. There are many like it but this one is yours, similar but different, but most important of all, there is only one like it.

If your image only appears once (and only once) on a page, then you should use an ID, to well… Identify it. This will also affect the html because in there we’ll have to link in what is the name for each picture. For example your banner on your wordpress site, it only appears once per page. That makes it a good target for an ID. The CSS and the HTML for an id would be as follows:

#banner{
width: 90%;
}
<body>
<img id="banner" src="banner002.png">
</body>

This sets the ID in the html, and this hooks in to the CSS for the ability to style it, so that it knows what to look for. The ID in CSS is called with a #. Classes are very similar though they are to be used if the object appears more than once. The difference in CSS is that a class just uses a full stop. Lets look at that in our example.

.photograph{
width: 24%;
padding: 0px;
border: 0px;
margin: 0.5%;
}
<body>
<img class="photograph" src="photo002.png">
<img class="photograph" src="photo023.png">
<img class="photograph" src="photo054.png">
<img class="photograph" src="photo065.png">
</body>

Remember – No more than 100%, and this margin will be both sides of the images, adding up to 1% per picture, and 4% all together. 24×4 = 96. 96%+4%=100%.

Following this tutorial, you may end up with something like this:

A banner image, followed by 4 images side by side

So there was a lot to learn in this blog and hopefully it helped. Just remember there’s only one ID! Have fun trying out ID’s and Classes, as well as using percentages instead of pixels, and we’ll be back with more CSS tricks and tutorials!
right-track-media-pyramids-150
To find the rest of Brian’s “Adding CSS to your Blog” blogs, click here: Adding CSS to your Blog