External CSS In HTML

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

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.

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:

• Introduction to CSS
• Versions of CSS

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 aptitude, competitive programming, interview questions, IT certifications, and data structures and algorithms for the best practice.