HTML & CSS: Images, Borders, and the CSS Box Model
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:
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
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
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-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:
So using all three properties, it's very easy to create a simple 2px, black, solid border on all the images on the page:
1 2 3 4 5
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:
1 2 3
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-bottom properties. Using a
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:
1 2 3 4 5 6
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).