How to use downloaded image or font(zip file) in CSS - 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

Answer 2

Ok, sounds like you're trying to add images to a website. Your images need to be hosted somewhere to be used on a website.
When you use a URL of one that is already on the Internet, that image is hosted by someone else.
If you've downloaded it, you'll need to add it to your web project, which means you'll be hosting it yourself. It will then use a URL to reference the image and display it, but that URL will be on your own domain.
Depending on the software you're using to build this, sometimes you can drag and drop the image into your web page, and the software will do the rest.

Answer 3

Images on your website
Like Andrew says, in order to use images in your website, the images should be on any place on the web.
You can use Amazon S3 for storing your website images.
https://aws.amazon.com/s3/.
Once you get the image online url, you can use it on your html just pasting it on the src attribute of an img tag.
<img src="url/of/the/image">
Custom Fonts on your website
Now, if you want to use a custom-font to your website, you should paste your font files into your website folder and create a css3 rule like below:
#font-face {
font-family: myfont;
src: url(route/to/your/font/my_font.woff);
}
Then, if you want to use the font, for example on all you h2 tags:
h2 {
font-family: myfont;
}
Hope it will help you.