Table of contents
1.
Introduction
2.
What is the external CSS in HTML?
3.
What is CSS? And Its Importance In Web Development
4.
Different Ways of Adding Styling to HTML Elements
4.1.
Steps To Add Styling Through External CSS
5.
Creating a CSS file
5.1.
Creating a Separate CSS file
5.2.
Naming conventions for CSS files
5.3.
Placement of CSS file within the project directory
6.
Linking the CSS file to HTML
6.1.
Link tag and its attributes
6.2.
Linking CSS file to HTML
7.
Advantages of External CSS
8.
Disadvantages of External CSS
9.
Frequently Asked Questions
9.1.
What are the different ways of adding styling to the HTML content?
9.2.
Why must a CSS file be in the same folder as an HTML file?
9.3.
What code is snipped to link an external CSS file into the HTML file?
9.4.
Can you have multiple CSS files for the same HTML page?
10.
Conclusion
Last Updated: Nov 12, 2024
Easy

External CSS In HTML

Author Gaurav Singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

External CSS is a powerful method for styling HTML documents that keeps design and structure separate, making it easier to manage and update website styles. By linking an HTML file to an external CSS file, developers can apply consistent styles across multiple web pages, enhance page load speed, and simplify maintenance. This approach not only helps create a more efficient workflow but also improves website performance and flexibility, making it a preferred choice for professional web development. In this blog, we’ll explore how to use external CSS.

Add External CSS in HTML

So in this blog, we will discuss about what is CSS and its importance in Web Development, along with understanding the different ways of adding CSS to HTML content. We will see an example also of adding External CSS to the HTML content.

What is the external CSS in HTML?

External CSS is a stylesheet saved in a separate .css file, which contains the design rules for an HTML document. Instead of embedding CSS directly in HTML, the HTML file links to this external CSS file using a <link> tag in the <head> section. This keeps the HTML clean and enables centralized styling, where one CSS file can control the appearance of multiple HTML pages.

What is CSS? And Its Importance In Web Development

CSS, or Cascading Style Sheets, is used for website design. It helps make any HTML page more responsive. The website gets user-friendly when the CSS is applied to the content. It allows us to control a webpage's layout, colors, fonts, and other visual elements, making it more appealing to the users when they access the websites.

One of the most essential uses of CSS is to make websites responsive. Also, it helps to create designs to adapt to different screen sizes, such as tablets, laptops, mobile phones, etc. Thus making it usable to a wide range of users viewing the content on other devices.

Different Ways of Adding Styling to HTML Elements

There are three ways to add CSS to their HTML file:

  1. Inline CSS - used to apply styling to a single element in the HTML tag using the “style attribute”.
     
  2. Internal CSS - used to apply styling all the elements of the HTML file using the “style tag” inside the “head section” of the HTML.
     
  3. External CSS - used to apply styling in a whole new CSS file which is different from an HTML file where the styling is done for the elements simultaneously.
     

Having a separate file for CSS helps the developers know exactly where to edit the changes if required. It helps them with good documentation and does not require them to change the content of the HTML page when applying any styling changes to the HTML page.

Steps To Add Styling Through External CSS

This blog will mainly study how to add styling to HTML using external CSS. So, adding external CSS in HTML involves two steps:

  1. Creating a CSS file
     
  2. Linking the CSS into an HTML file
     

Creating a CSS file

Creating a Separate CSS file

When building a website, one starts with writing the HTML part since it contains all the page content without any design. But to make it look attractive, we use CSS. In this blog, we will only work on the External CSS.

We will need a text editor or a software program like VS code, Sublime Text or Notepad++, etc., to create a separate CSS file. Open the editor and click the New File from the menu bar. You will see a new blank text editor opened up.

Naming conventions for CSS files

Now, as we have opened the text editor. But it is still a text editor with a “.txt” file format. And thus, we need to change it so that the device understands that this is a CSS file, and thus we use the “.css” extension after the file's name. We can do this by selecting “Save” in the menu bar. The convention we use is to name the file as “style.css”. 

Placement of CSS file within the project directory

Also, ensuring the CSS file is in the same folder where one’s HTML file is stored is essential. It helps us to locate the files we are working on quickly. There are two ways to increase efficiency and good documentation:

  1. Placing the CSS file in a dedicated folder: All the CSS files could be stored in a single CSS folder. This is mainly done if a big project requires many CSS files for different HTML files.
     
  2. Placing the CSS file in the same folder as the HTML file: It helps have a simple approach, making it easier to link the CSS file. This is mainly used when there is a small project that one is working on.
     

Linking the CSS file to HTML

Link tag and its attributes

When adding styling to the HTML content through external CSS files, we use the “<link>” tag to link an external file to the HTML document. Below code snippet shows how the linking is done:

<link rel="stylesheet" type="text/css" href="path/to/your/css/file.css">

Now the “<link>” tag has three main attributes, those are:

  1. ‘rel’ - this attribute tells the relation between the HTML and the CSS file. For CSS, we use “stylesheet”.
     
  2. ‘type’ - this attribute tells about the MIME type of the linked file. For CSS files we use “text/css”.
     
  3. ‘href’ - this attribute tells about the path of the linked CSS file. It can have either a relative path or an absolute path.
     

Linking CSS file to HTML

The HTML code for our website is below:

<!DOCTYPE html>
// head part starts from here
<html>
<head>
// title is defined in here
	<title>My Webpage</title>
</head>
<body>
	<header>
// main heading for the page is given here using h1 tag
		<h1>Welcome to My Webpage</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>

	<main>
// here we added the about me section fo the page
		<section>
			<h2>About Me</h2>
			<p>Hi, my name is Gaurav Singh, and I'm a web developer based in Bangalore.</p>
			<p>Here's a link to my <a href="#">portfolio</a> if you're interested.</p>
		</section>

		<section>
			<h2>Recent Projects</h2>
			<ul>
				<li><a href="#">Project 1</a></li>
				<li><a href="#">Project 2</a></li>
				<li><a href="#">Project 3</a></li>
			</ul>
		</section>
	</main>
// now we add the footer of the page using @ sign
	<footer>
		<p>&copy; 2023 Gaurav Singh</p>
	</footer>
</body>
</html>

This is how the page looks like when its viewed on our local browser

Webpage without external CSS

This page looks elementary kind with only textual content inside the website. We will add external CSS to this ti make it look more attractive. Here is the code for the CSS file:

html {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
}

body {
	margin: 0;
	padding: 0;
}

/* Style the header section */
header {
	background-color: #444;
	color: #fff;
	padding: 20px;
}

h1 {
	margin: 0;
	font-size: 36px;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav li {
	display: inline-block;
	margin-right: 20px;
}

nav a {
	color: #fff;
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

/* Style the main content section */
main {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

section {
	margin-bottom: 40px;
}

h2 {
	font-size: 24px;
	margin-bottom: 20px;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

li {
	margin-bottom: 10px;
}

a {
	color: #0077cc;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

 

But we need to make changes to the HTML mentioned above code to link the external CSS to the HTML file so that the changes are made. We add the code:

<link rel="stylesheet" href="style.css"> in the “head” tag of the HTML file. Make sure the CSS file is in the same folder, though. Otherwise, you might want to change the href attribute to the exact location of the “style.css” file. Here is what our new “index.html” looks like:

<!DOCTYPE html>
<html>
<head>
	<title>My Webpage</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<h1>Welcome to My Webpage</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<section>
			<h2>About Me</h2>
			<p>Hi, my name is Jane Doe and I'm a web developer based in San Francisco.</p>
			<p>Here's a link to my <a href="#">portfolio</a> if you're interested.</p>
		</section>

		<section>
/* adding pages like Home, About, Contacts without any links */
			<h2>Recent Projects</h2>
			<ul>
				<li><a href="#">Project 1</a></li>
				<li><a href="#">Project 2</a></li>
				<li><a href="#">Project 3</a></li>
			</ul>
		</section>
	</main>
/* This HTML content shows the footer of the page */
	<footer>
		<p>&copy; 2023 Jane Doe</p>
	</footer>
</body>
</html>

Here is the new look of the webpage after adding external CSS to the HTML file.

Webpage after applying external CSS

Advantages of External CSS

  • Separation of Concerns: Keeps HTML structure separate from design, making both easier to manage and maintain.
  • Reusability: A single external CSS file can be linked to multiple HTML pages, ensuring consistent styling across the entire website.
  • Faster Load Times: Since the CSS file is cached by the browser, it doesn’t need to be reloaded on every page visit, improving page load speed.
  • Cleaner HTML Code: HTML remains uncluttered with style rules, making it more readable and easier to edit.
  • Easier Maintenance: Updates to the website's design can be made by modifying one CSS file, reducing redundancy and errors.
  • Collaboration-Friendly: Designers can work on the CSS file separately from developers working on the HTML, promoting teamwork and efficiency.

Disadvantages of External CSS

  • Initial Loading Delay: The browser needs to load the external CSS file before rendering the page, which may cause a slight delay in page load time.
  • Dependency on External File: If the external CSS file is missing or the link is broken, the page may load without styles, leading to poor user experience.
  • Increased HTTP Requests: Linking to external files requires additional HTTP requests, which can increase the number of server calls, especially on slower networks.
  • Harder Debugging: Debugging styles may be more complex compared to inline CSS since the styles are stored separately from the HTML structure.

Frequently Asked Questions

What are the different ways of adding styling to the HTML content?

There are 3 ways of styling the HTML content. Those are Inline CSS where we add styling for a particular element of HTML using the “style” attribute, Internal CSS where styling is done to all the elements of the HTML using the “style tag” inside the “head section”, and External CSS applies styling in a whole new CSS file which is different from an HTML file where the styling is done for the elements all at once.

Why must a CSS file be in the same folder as an HTML file?

It is necessary to have both files in the same place since it helps us reduce the confusion for file path, which is to be linked in the “href” attribute of the “style” tag in the “head” section of the HTML file. EX - <link rel="stylesheet" href="style.css">: this has a file named style.css in the same folder as the HTML file, so we can directly write the CSS file name without having to write the actual file path.

What code is snipped to link an external CSS file into the HTML file?

We use the code: <link rel="stylesheet" href="style.css">, where rel defines that we are importing stylesheet. The “href” attribute refers to the destination of the “.css” file. And all this is kept in the “link” element.

Can you have multiple CSS files for the same HTML page?

Yes, one can have multiple CSS file for an HTML page. For example, we want to have different styling for the sidebars and the rest of the page. Then we will use the “link” element two times, one for sidebars and one for the rest of the page.

Conclusion

Thus we have seen in this blog the different ways of adding CSS to the HTML file. We saw specifically how to add external styling with the help of a CSS file into the HTML file. We saw what the naming conventions for CSS file are and why it is important to store the CSS file in the same folder where the HTML file is stored to avoid confusion. We saw a live example of what extra lines of code is needed to link the CSS file in the “head” section of the HTML file.

For a more detailed discussion of what CSS is, you can refer to this blog of Coding Ninjas:

Please have a look and also visit our platform Code360 for more interview problems! Refer to our guided paths on Code360 to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available; look at the Top 150 Interview Puzzles interview experiences, and interview bundle for placement preparations. Read our blogs on aptitudecompetitive programminginterview questionsIT certifications, and data structures and algorithms for the best practice.

Live masterclass