What is external CSS file?

This post was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-3/#what-is-external-css-file

Planning the structure of the project and how we want to solve most cases should be done when we start the project.

One of the issues that we need to solve in the front-end project is "how to add styling".

There are a few possibilities of adding styles to make our layout looking well.

Of course, there are many more of them when we use 3rd party packages or some frameworks, but when we use pure HTML and CSS, there is a bit less.

We can write styles directly in the HTML file in the "style" tag, we can do inline styles, write some js script that adds styling to our elements, or use external CSS files.

An external CSS file is just the ".css" extension file, that we write CSS code inside, next, we can import that file into the front-end template, where we need to use that code.

In some cases, like using CSS frameworks like bootstrap, Antd, Bulma, or something else, we can import external CSS files from the remote CDN instead of handling them in our local directories.

The way of adding styles into the external CSS file is a very popular solution in the pure HTML/CSS/js projects, but not only.

Even when we build projects with frameworks like React, Angular, or Vue, we can use external CSS files, and it's a perfect solution, especially with the bigger projects or projects where our UI is separated from the front-end logic.

Let's see the code example below, where I've created a simple CSS file.

body {
  background-color: #fefefe;
  color: #444;
}

.container {
  width: 80%;
  margin: auto;
}

.card {
  border-radius: 15px;
  padding: 10px;
  background: white;
}

Thank you for reading,
Radek from Duomly