HTML & CSS: Images, Borders, and the CSS Box Model

Images

Images are a vital aspect of the web as it is today (although they are slowly getting less important!) and obviously allow you to display what are essentially preset patterns of pixels on a webpage (whether this preset pattern be in the format of a JPG, a PNG or whatever). Images are accomplished in HTML using the img element -- it's an empty element which means it doesn't have an ending tag, and so you may or may not want a / just before closing the angle bracket of the tag depending on your version of HTML and personal preference. The img element then can be set to a certain image by specifying the location of the image in the src attribute. This can be a fixed path (something like http://www.dev-hq.net/images/logo.png) or a relative path (something like images/logo.png). So an example of an image in HTML is simply displaying the logo of this website, like so:

<img src="www.dev-hq.net/images/logo.png"/>

The image will by default simply display with the width and the height that the actual image has - we'll learn how to change the image size in a later tutorial using the width and height properties in CSS!

Borders (and the CSS Box Model!)

Borders can be applied to almost any element, and since we've just talked about how to put images in your web pages - what a better way to demonstrate borders!

But first, since I'm presuming you'll all know what a border is (I literally can't think of any way to describe a border without using the word 'border') and we've covered margin and padding, it's probably about time we covered the CSS Box Model! Basically, every element on a web page is a box. This isn't too difficult to get your head round, just try taking a look at any webpage - it's just made up of a bunch of boxes with styling and some text! But what do these boxes consist of? That's where the CSS Box Model comes in! Chris Coyier wrote a really good article about it which also contained a really good diagram of the model which I've nabbed from him and is displayed below.

The diagram shows that each box consists of a width, height, padding, border and margin! The total width of an element is simply the width value, plus the padding-left, plus the padding-right, plus the border-left, plus the border-right! But away from that tangent (which is super useful to know by the way, if you want to know more about it - go to Chris' article I linked earlier) and back to borders! You can create a border using the border-style, border-width and border-color properties in CSS. These do exactly what you'd expect -- border-width takes a value and set's the element's border width to that value and border-color takes a colour value like we are used to with the color property (hex, rgb or name) and set's the element's border to that colour. The two above properties however will not do anything without a border-style being set -- this can be set to a variety of preset values, including:

dotted
dashed
solid
double
groove
ridge
inset
outset

So using all three properties, it's very easy to create a simple 2px, black, solid border on all the images on the page:

img {
	border-width: 2px;
 	border-style: solid;
	border-color: #000;
}

We can make this even shorter and neater by compressing it into simply the border property -- this takes the width, the style and then the colour:

img {
	border: 2px solid #000;
}

Note that I used #000 as a hex colour to define the colour #000000 as a shortcut. It's also worth noting that you can set individual borders for each side if you so wish by using the border-left, border-right, border-top and border-bottom properties. Using a border-left or border-right property for some anchor tags can be useful for creating a 'separator' between links, for example something you might find in a navigation bar. Since we haven't gone over targeting specific links yet though (we'll do it soon and everything will come together - I promise!), let's just target all links on the page:

a {
    display: inline;
    border-left: 1px solid black;
    margin-right: 25px;
    padding-left: 25px;
}

In this case I've added display: inline so that the links all display as inline elements, and so are all on the same line (to create the navigation bar effect I was looking for).