How to use downloaded image or font(zip file) in CSS

Question

A beginner question: I know how to use online image--copy paste in url but don't know how it works if downloaded. I downloaded the font as a zip file but I don't know what to put in the url, the same question for image. Thanks.

Answer 1

As you a beginner I will explain everything to you step by step.

In the beginning you must unzip the compressed file sansationlight.zip

Right click on sansationlight.zip then click on Extract files

You will get the following window

Click on OK

You will get sansationlight folder

Create a folder next to the index.html file and name it Fonts

Copy the folder sansationlight that you unzip to the Fonts folder

Copy

Paste in Fonts folder

Add the following style code to the style tag in the index.html file:

@font-face {
    font-family: 'SansationLight';
    src: url('Fonts/SansationLight/SansationLight.eot');
    src: url('Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),
         url('Fonts/SansationLight/SansationLight.woff') format('woff'),
         url('Fonts/SansationLight/SansationLight.ttf') format('truetype'),
         url('Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

div{
    font-family: 'SansationLight';
}

Here you will see how the code will appear on the your HTML page:

The result:

Here is the font before adding the style code:

If you want to use an external style file, follow these steps:

After copying the sansationlight folder to Fonts folder, create another folder next to the Fonts folder, name it stylesheets

Inside the stylesheets folder, create the style.css file and open it.

Copy the following code into the style.css file:

@font-face {
    font-family: 'SansationLight';
    src: url('../Fonts/SansationLight/SansationLight.eot');
    src: url('../Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/SansationLight/SansationLight.woff') format('woff'),
         url('../Fonts/SansationLight/SansationLight.ttf') format('truetype'),
         url('../Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

.mydiv{


font-family: 'SansationLight';
}

Note, I've added ../ for one step back out of the stylesheets folder

Here you see how the code will appear on the your style.css file:

To link the style.css file with index.html, use the link tag in index.html:

<link rel="stylesheet" type="text/css" href="stylesheets/style.css">

This is how the code will appear in the index.html file:

Note In the first way I made the font style for all divs div{ }

In the second way, the class was used .mydiv

For adding images:

Create a folder next to the index.html file and name it images

Add the image you want to use to the images folder

Use the <img> tag to add an image

<img src="images/image.jpg" style="width: 50%; height: 50%">

The result:

Useful Links:

HTML Tutorial

CSS Tutorial

HTML, CSS and more

HTML5 video Tutorial

CSS3 video Tutorial

The image I used