CODEWITHSUNDEEP
htmlcss
snazzyconnor
snazzyconnor

Reputation: 37

How to add external css into html

I've used inline and imported css loads but having trouble with external and never tried it before.

I copy and pasted everything from this link css link

into a css file, I don't actually know specifically which animations I want to keep and get rid of yet, that will come later. How do I actually add it into the html though? In the Header I have the

<link rel="stylesheet" type="text/css" href=\animate.css">

link so my html is inked to my css.

If I wanted to add for example .animated.hinge to a <p> how would I do this?

Preferably without any javascript or php, haven't progressed that far yet! Thanks!

Upvotes: 1

Views: 155

Answers (4)

Amol Patil
Amol Patil

Reputation: 23

We can include external css file through the link tag in head tag. Please see below syntax for the same. also check the file path(href path), it should be relative or absolute.

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

You are missing one double inverted comma at start and you have to use '/' in the href attribute instead of '\'.

Upvotes: 0

RickD
RickD

Reputation: 79

Also you would add classes to the p element like so

<p class="animated hinge">Paragraph</p>

Upvotes: 0

alexhenkel
alexhenkel

Reputation: 602

Web sites are all about files. If you have a file called animate.css in the same folder as your index.html, you can simply call it with the next tag

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

This means that you are referencing the animate.css file. There you select your objects by clases and just use them in the html file.

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

The problem is that you are using a backslash instead of a forward slash and missing a double quote when you are linking to the CSS file.

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

Upvotes: 5

Related Questions