- How to Link CSS to HTML – Stylesheet File Linking
- How to Link CSS to HTML
- Attributes of the Link Tag
- The rel Attribute
- The type Attribute
- The href Attribute
- Final Thoughts
- How to Link CSS to HTML: CSS External Style Sheets Explained
- Contents
- How to Link CSS to HTML: Main Tips
- Styling Multiple HTML Pages
- How to Link CSS to HTML: Useful Tips
How to Link CSS to HTML – Stylesheet File Linking
Kolade Chris
HTML is the markup language that helps you define the structure of a web page. CSS is the stylesheet language you use to make the structure presentable and nicely laid out.
To make the stylings you implement with CSS reflect in the HTML, you have to find a way to link the CSS to the HTML.
You can do the linking by writing inline CSS, internal CSS, or external CSS.
It is a best practice to keep your CSS separate from your HTML, so this article focuses on how you can link that external CSS to your HTML.
How to Link CSS to HTML
To link your CSS to your HTML, you have to use the link tag with some relevant attributes.
The link tag is a self-closing tag you should put at the head section of your HTML.
To link CSS to HTML with it, this is how you do it:
Place the link tag at the head section of your HTML as shown below:
Attributes of the Link Tag
The rel Attribute
rel is the relationship between the external file and the current file. For CSS, you use stylesheet . For example, rel=»stylesheet» .
The type Attribute
type is the type of the document you are linking to the HTML. For CSS, it is text/css . For example type=»text/css» .
The href Attribute
href stands for “hypertext reference”. You use it to specify the location of the CSS file and the file name. It is a clickable link, so you can also hold CTRL and click it to view the CSS file.
For example, href=»styles.css» if the CSS file is located in the same folder as the HTML file. Or href=»folder/styles.css» if the CSS file is located on another folder.
Final Thoughts
This article showed you how to properly link an external CSS file to HTML with the link tag and the necessary attributes.
We also took a look at what each of the attributes means, so you don’t just use them without knowing how they work.
How to Link CSS to HTML: CSS External Style Sheets Explained
TL;DR — CSS external stylesheet means that you upload all styling properties and values to a separate .css file. Then, you link the document to your website. Learn how to link CSS to HTML to boost website performance and to update CSS rules easily.
Contents
How to Link CSS to HTML: Main Tips
- CSS external stylesheet is a .css file with all CSS rules.
- You can link CSS to HTML by using the element.
- After learning how to link a CSS file to HTML, you can style multiple pages and separate style from content.
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
Styling Multiple HTML Pages
CSS external stylesheets refer to .css documents that contain CSS properties and values for the entire website.
Tip: .css files cannot contain HTML tags.
The following example shows how to link CSS to HTML by adding an external .css file into an HTML section:
head> link rel="stylesheet" type="text/css" href="style.css"> head>
Note: modifications and updates to the .css file will apply to the whole website. Linking HTML to CSS is the best option for easy website maintenance.
- rel describes the relationship between the HTML document and a linked document.
- type determines what type of data should be taken by an input element.
- href points to a specific file that you’re uploading.
Note: you can create a .css file with any text editor. The document must have the .css extension.
The example below illustrates how a .css file from the first external CSS example looks like:
h1 < color: red; margin-left: 20px; > p < color: blue; >
Note: never leave a space between property value and unit. Write 10px, not 10 px.
How to Link CSS to HTML: Useful Tips
- CSS external stylesheet is the standard option for web design.
- Knowing how to link a CSS file to HTML lets you optimize code and create websites with a consistent style.
- Linking many external stylesheets to websites might increase website loading time.
- Use inline CSS for styling a single element, and internal CSS for one page.