Using CSS Best Practices with External Stylesheets
This guide walks through how to use external CSS stylesheets to properly organize a website codebase. This includes a discussion on system and server paths to ensure that the HTML pages properly call the stylesheet.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this video, we are going to learn the preferable way of using CSS-- external stylesheets.

So far, we've seen inline styles where you place the style within the content itself and embedded styles, where you put the style on the top section of the same HTML file. Now, external stylesheets where you'll have an external file that contains all the styles you need for the entire application.

This is the best way to avoid code repetition. For example, a homepage could be coded with all the styles as an embedded. Now, if another page was needed to have a similar style, you'd have to copy and paste this code to the new page. Such a practice results in unnecessary code duplication. Also, making a change can be cumbersome, as you'll have to do in every single page.

Now, let's create a file called styles.css in the same folder where you have your HTML file. Then, open both the files, and in your HTML file, create a <link> tag that'll link the CSS file to this HTML file. So, the code is

<link href = "styles.css" rel = "stylesheet" >

<!DOCTYPE html>
<html>
  <head>
    <title>Embedded CSS</title>
    <link href="styles.css" rel="stylesheet">
  </head>

  <body>
    <div>
      <h1>My Heading</h1>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </body>

</html>

This code connects our CSS file to our HTML one. By explicitly saying this is a CSS file, the browser can process it accordingly. Here, we are simply mentioning the name of the file without giving its path because the CSS and HTML files are located in the same folder. If the CSS file is in a different folder, then we may have to give its relative file path. Notice, we have no CSS code in our HTML file

Next, open your styles.css file, and type the embedded style code we had earlier. You can also try different styles and options just to get familiar with it.
Test it in the browser, and everything should look as coded.

Now, all this is enough for small applications, however, larger applications need many CSS files, making it beneficial to have them all grouped in a separate folder. You can even make a subfolder for all your CSS files. If you do so, you should also update the new path in HTML file. 

<html>
  <head>
    <title>Embedded CSS</title>
    <link href="css/styles.css" rel="stylesheet">
  </head>

Here, I've put my styles.css inside a subfolder called CSS.

If you've never worked with file paths, all that you're doing here is traversing through the file system to find the location where your CSS file is located.

Let's say you move your styles.css to another subfolder inside CSS and call it custom, then your path should be:

<html>
  <head>
    <title>Embedded CSS</title>
    <link href="css/custom/styles.css" rel="stylesheet">
  </head>

So, that is how you can use external stylesheets, and for the rest of this course, we'll be using only this type of CSS file.