Do you think IIT Guwahati certified course can help you in your career?
No
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.
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:
Inline CSS - used to apply styling to a single element in the HTML tag using the “style attribute”.
Internal CSS - used to apply styling all the elements of the HTML file using the “style tag” inside the “head section” of the HTML.
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:
Creating a CSS file
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:
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.
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:
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:
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: