<link> This is a link tag. It has no ending tag and will link an external file to your document. Your CSS style links are placed in the head tags.
<!DOCTYPE html>
<html>
<head>
<!-- Link for a CSS file-->
<link rel = "stylesheet" type = "text/css" href = "custom.css">
<title>Title</title>
</head>
</html>
➼ rel indicates the relationship between
the link and your file. For CSS file links, rel will equal "stylesheet".
➼ type indicates the media type.
For CSS file links type will equal "text/css".
➼ href indicates a file location or web address.
In this example the file is called "custom.CSS".
rel, type and href are the link's attributes You will learn more about attributes later on in this tutorial.
Attributes, such as "stylesheet", can be placed in single or double quotes.
Some text editors will give error/notice messages if you use single quotes and
your file saved as an HTML document (fileName.html). However, the content should still
display appropriately. If your file is saved as a PHP document (fileName.php), you
usually will not get error messages for using single quotes.
After you learn PHP, you may want to use PHP to build your HTML pages. This is
when the single or double quotes start to matter. For now, it doesn't really matter.
So for now, I suggest using double quotes in HTML documents. This will make it easier
for you to see real errors.
The file path indicates the location of a file. The href attribute is set equal to
the file's location. The first type of external files we will learn about are CSS files.
Note: You probably won't be using file paths until you get to the
CSS Tutorials or start adding media files (such as pictures and music).
You may want just glance over this section and come back to it when you are ready to add your first
external file. It may be more meaningful to you then.
File in the same folder: If the file you are linking is in the same folder as the file you are linking it to, you just have to indicate the name of the file.
Above is a the file explorer view of a project. This project is located in a folder called battleCardGame. Inside this folder is a CSS file called battleCard.css. Let's say we are currently working on the file called home.php. We want to put a link for battleCard.css in home.php. This is how the link would look:
<link rel= "stylesheet" type= "text/css" href= "battleCard.css">
File in outside folder: If the file you are linking is in an outside folder, you will use "../"
In the example above we are adding another style link to home.php. home.php is still located
in the folder called battleCardGame. However, in this example the CSS file we are linking is
located in the outside folder called lessonPlans. The stylesheet in lessonPlans
is called 'custom.css'.
In summary, the folder battleCardGame and the file 'custom.css' are both located in
a folder called lessonPlans. The file we are working on, 'home.php', is located
in the battleCardGame folder. This is how the link would look:
<link rel= "stylesheet" type= "text/css" href= "../battleCard.css">
Let's go outside one more folder. Let's say the folder called 'Projects' contains a CSS file called 'card.css'. We want to link 'card.css' in 'home.php'. This is how that link would look:
<link rel= "stylesheet" type= "text/css" href= "../../battleCard.css">
File in an inside folder: If the file you are linking is in an inside folder, you will use "folderName/fileName"
In the example above we are putting a stylesheet link in 'index.html'. In the same folder as 'index.html' is a folder called css Inside the css folder is a css file called 'custom.css'. We want to link 'custom.css' in our index.html document. This is how that link would look:
<link rel= "stylesheet" type= "text/css" href= "css/custom.css">
File in an inside folder: If the file you are linking is in an inside folder, you will use "folderName/fileName"
In the example above we are linking a stylesheet to 'index.html'. In the same folder as
'index.html' is a folder called css.
Inside the css folder is a css file called
'custom.css'. We want to link 'custom.css' in our index.html document. This is how that link would
look:
<link rel= "stylesheet" type= "text/css" href= "css/custom.css">
Now let's say inside the folder called css there is another folder called quizCss. Inside the quizCss folder is a file called 'level1.css'. We want a link to level1.css in index.html. This is how that link would look:
<link rel= "stylesheet" type= "text/css" href= "css/quizCss/level1.css">
Background:
You are creating a web site for a company that sells toys.
Assignment:
You are linking CSS style sheets to the appropriate pages. Read each statement, then
write the appropriate link tag. The picture below shows the file/folder layout.
Example:
You want to put a link to toy.css in index.html.
<link rel="stylesheet" type="text/css" href="css/toy.css">
Statements:
1) You want to put a link to custom.css in index.html
2) You and to put a link to custom.css in contact.php
3) You want to put a link for contact.css in index.html.
4) You want to put a link to contact.css in contact.php