Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is CSS? And Its Importance In Web Development
2.1.
About CSS and its Uses
2.2.
Different Ways of Adding Styling to HTML Elements
2.3.
Steps To Add Styling Through External CSS
3.
Creating a CSS file
3.1.
Creating a Separate CSS file
3.2.
Naming conventions for CSS files
3.3.
Placement of CSS file within the project directory
4.
Linking the CSS file to HTML
4.1.
Link tag and its attributes
4.2.
Linking CSS file to HTML
5.
Frequently Asked Questions
5.1.
What are the different ways of adding styling to the HTML content?
5.2.
Why must a CSS file be in the same folder as an HTML file?
5.3.
What code is snipped to link an external CSS file into the HTML file?
5.4.
Can you have multiple CSS files for the same HTML page?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Add External CSS In HTML

Author Gaurav Singh
0 upvote
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Hi Ninjas, in this blog, we will discuss adding external CSS in HTML. HTML is simply the webpage content we see on the website. At the same time, CSS is designing the web page's content seen on the website. Talking about CSS, called Cascading Style Sheets, make websites more appealing, responsive, and user-friendly. Thus, external CSS could help us style all the content webpage simultaneously. Let’s explore adding external CSS in HTML in a more detailed way.

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 CSS? And Its Importance In Web Development

About CSS and its Uses

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
     
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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

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 Coding Ninjas Studio for more interview problems! Refer to our guided paths on Coding Ninjas Studio 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.

Happy Learning!

Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass