How to Connect CSS
There are 3 ways to connect CSS with a HTML document.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
When it is nedded to change a single element in a unique style then inline CSS may be used.
Example:
Internal CSS
When it is needed a specific design for a specific document then internal CSS is used.
Example:
External CSS
External CSS is the most important and usable way to connect CSS with a HTML document. By using External CSS the style of whole website can be changed by one file. Here each page must be linked with the reference of the external file.
Here is the linking of External CSS file with HTML document inside the <link> elemnt.
Example:
<link rel="stylesheet" href="style.css">
</head>
The External CSS code can be written using any text editor. No HTML tags should not be written in the CSS file and the extension of this file must be saved in .css such as style.css.
Here is the code of style.css file.
Example:
background: blue;
font-size: 20px;
}
h1 {
color: white;
}
p {
font-family: verdana;
}
Run Example