Web Design 1 - HTML Lesson 14 - Image Borders, Google Fonts

Image Borders

Adding a border to an image can help it to stand out visually on your webpage.

Image without border

Image with a border style added

The code used for the above border looks like this:

<p><img src="images/birthday-cat.jpg" style="padding: 0px; border: 6px solid #4E2213"></p>

But you can use a variety of styles, sizes, and colors on your own pages.

Since you may not always want a border on your images it might be best to just add this in the line of code where you want it to show up rather than adding an img description in the style section

Using Google Fonts

While you can always just use typical fonts that should exist on most computers, there are times when you may like to be able to have more choices and control the font display a bit more.

Google provides over 818 different font styles that you can include.

Step 1. Go to https://fonts.google.com/

Step 2. Choose a font that you would like to use by clicking on the red + sign up on the right

You will notice a black box at the bottom of the screen that says "1 Family Selected"

** you can import more than one font at a time if you like but start with just one to get it to work

Click on that box and then choose the EMBED option

From here all you need to do is copy the @import line and put it in your existing <style> section

Then add a font-family of the type you chose and include it in one of your styles (such as the headings or paragraph)

Here is an example - if this is in the style section then all p tags on my page will use this font

p {
font-family: 'Barrio', cursive;


* You can import more than one font, and there are also options to customize the sizes, weights, etc when you are selecting on the Google Fonts page


Assigment for HTML Lesson 14

1. Include a new image on your page and add a border

2. Include at least one Google font and use it as the font for either a paragraph or a heading

Challenge: Have more than one image with different borders, import more than one Google font and use different ones for paragraphs, headings, or classes