Web Design 1 - HTML Lesson 18 - 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.

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"

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 <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