Importing CSS Files
CSS stands for Cascading Style Sheets, which is a language that describes how our page looks - how elements in our web page look.
The <link> element can be used to import (include/link) the external CSS file to our web document. We use the rel="stylesheet" and href="path_to_css_file.css" attributes inside the <link> element.
To include an external .css file in our HTML page, we write:
<link rel="stylesheet" href="style.css">
The above snippet includes/imports the external style.css file to our web page. The rel attribute sets the relationship to the stylesheet value and the href attribute represents the path to an external CSS file.
Note: The above code assumes the style.css file is placed in the same folder as our HTML files.
If the stylesheet file was placed inside some css/ folder, we would use a different URL for our href attribute:
<link rel="stylesheet" href="css/style.css">
Note: It is good practice to create a dedicated css/ or similarly named folder for all our CSS files.
Here, we used a relative path for our CSS file. In production, on a live web server, you might want to use the /css/style.css path. Here, the / symbol represents a root folder. The code snippet now becomes:
<link rel="stylesheet" href="/css/style.css">
The complete, minimal index.html web page that includes the external style.css file now has the following source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Including multiple CSS files
We can also include multiple CSS files in our web page by using multiple <link> elements/statements:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="other-style.css">
The full index.html page listing now looks like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="other-style.css">
</head>
<body>
</body>
</html>
The above code now imports (links to) two separate .css files to our web page.
To include the remotely hosted, external CSS file, we specify the full remote URL:
<link rel="stylesheet" href="https://www.example.com/style.css">
Internal CSS
We can also specify CSS styles internaly by placing them inside the <style> element:
<style>
body { background-color: antiquewhite; }
h1 {color: darkgreen; }
p { color: darkgray; }
</style>
The entire <style> element should be placed inside the <head> section, so now, our index.html file looks like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<style>
body { background-color: antiquewhite; }
h1 {color: darkgreen; }
p { color: darkgray; }
</style>
</head>
<body>
</body>
</html>
Note: While it is possible to have internal CSS styles, it is recommended to keep all our CSS styles in external .css files instead, and then import those files into our web page(s). This way, we can better organize and maintain our code.
Summary
We use the <link> element to import external .css files to our web page.
The <link> element must use the rel="stylesheet" attribute to specify the stylesheet relationship and a href="path_to_css_file.css" attribute to specify the URL to an external .css file.
