learntheweb

Menu
Sign Up
Log In

Lesson Content

Setting Up

Introduction

It’s time to finally start to dive into the language of CSS! In this lesson, we will go over the different ways we can write CSS in our code, how to setup CSS documents an stylesheets, and learn how to use comments in CSS! 

Overview

By the end of this lesson, you should be able to:
    • The 3 different ways to embed CSS within our webpage
    • Understand how to set up a CSS document/stylesheet
    • Understand how to link your CSS file to an HTML page
    • Understand CSS comments + comment syntax

Note:

    • This lesson is meant to serve as an introduction to the different ways to embed CSS onto our webpage. In order to show that, we will have to write a bit of CSS. Don’t worry about understanding the syntax just yet. This will be covered in the next lesson. For now, just understand the different ways to put CSS onto our webpage!

Internal CSS

As stated before, there are many different ways to go embed CSS within our webpage. The first way we’ll take a look at is Internal CSS. Internal CSS is defined within the <head> section of an HTML document using the <style> tags. Take a look at how this works:

<!DOCTYPE html>
<html lang="en">
  <head>

    <style>
      /* CSS Content goes here! */
    </style>

  </head>

  <body>
    <!-- HTML Content goes here! -->
  </body>
  
</html>

Take a look at the <style> tags. The <style> tags should always belong in the <head> section of our HTML document. Now, in our <style> tags, we can add any sort of CSS we want. Below is an example of some very basic CSS we can put in the <style> tags.

 

(Don’t worry about understanding the CSS just yet!)

<style>

    p {
        color: blue;
    }
    
</style>

Later in the lesson, we will learn about the pros and cons of using Internal CSS. For now, make sure you understand how we can implement it in our HTML files. Go ahead and make an HTML file, and try adding the <style> tags in the <head> section! Make sure you’re familiar with this style of embedding CSS.

Inline CSS

Another way we can embed CSS onto our HTML document is through Inline CSS. Inline CSS is a styling method where CSS rules are applied directly to HTML elements using the “style” attribute. Instead of putting our CSS in certain tags, we can embed the CSS directly into our HTML elements. Take a look:

<p style="color: red;">This text is in red.</p>

Although this is definitely a viable way to include CSS in our document, it is not recommended for a couple of reasons:

    • Inline CSS can make the HTML code more difficult to read and maintain, especially when you start writing more and more code. Inline CSS also makes it hard to edit our styles, since we need to manually comb through each HTML element, which is very time-consuming.

    • Inline CSS could also lead to code duplication, which increases the overall size of your document, making it messy. For example, if you have multiple elements that need the same styling, you would have to copy and paste the same style rules for each element which is just plain inefficient and a waste of time. 

    • Inline CSS is also going to override any CSS that we have from Internal CSS or External CSS. This can lead to some unwanted side-effects on your website. 

Now don’t go thinking to never use Inline CSS, just make sure that you use of better and more efficient methods like Internal CSS or External CSS. Inline CSS can actually be really helpful if we just want to add a single style to an element. 

External CSS

In both Internal CSS and Inline CSS, we stayed in the boundaries of our HTML file. External CSS involves writing our CSS code in a separate file rather than writing it out in our HTML document itself.

 

To use External CSS, we can start by creating a file with a .css extension. HTML files will use .html while CSS files will use .css. Here is an example a sample CSS file name:

If you remembered from our HTML Course, our first HTML file should for the most be named index.html. (This is not a strict rule, but rather a universal convention). In CSS however, our first CSS files can be named almost anything. The most common names are styles.css or style.css, but it’s up to you what you would like to name it!

Now, if you just created a CSS file and wrote some CSS in it, the changes would NOT show up on your webpage. The reason for this is because to actually see our CSS changes on our website, we need to link our CSS file to our HTML file. This is very simple to do; here is the code snippet for this: 

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

This line of code is linking an external CSS stylesheet file named style.css to the current HTML document. The rel attribute specifies the relationship between the current document and the linked resource, and the href attribute specifies the URL of the linked resource (which in this case is our CSS file styles.css )

 

Go ahead and add the line mentioned above to your code in the <head> tags. Your HTML file should look something like this now:

<!DOCTYPE html>
<html>
    <head>
      <title>My Website</title>
      <!-- Linking our CSS to HTML here! -->
      <link rel="stylesheet" href="styles.css"> 
    </head>
    
    <body>
      <!-- your HTML content goes here -->
    </body>
</html>

Now whenever you write CSS within your style.css, it will show up on your webpage! Note that our value for the href attribute should be the name of our CSS file. 

 

External CSS is the recommended method of CSS for a few reasons:

    • The first main reason is the reusability using external CSS allows. With external CSS, you can define a set of styles in one file and use them across multiple pages of your website. This makes it much easier to edit and debug everything in one place.

    • External CSS is also much more readable. Rather than having all of our CSS bloated on one HTML document, external CSS allows us to separate our CSS and HTML making our code look cleaner and makes it easier to read as well.

    • With this style of CSS, we only need to edit everything in one place. If you used Inline CSS or Internal CSS, you have to navigate pages to edit each pages CSS which is inefficient and time-consuming. External CSS makes it easy to have everything in one place.

Overall, using external CSS files can make your code more organized, efficient, and maintainable, which is why it is generally recommended over using inline or internal CSS. However, there may be instances when using Inline or Internal CSS is preferred, so keep your options open!

Note:

    • Make sure that in your href attribute, you are referencing the name of your CSS file
    • Make sure that the linking code goes in the <head> tags
    • When starting a new project, you should always be sure to link your CSS to HTML before it causes any unwanted errors

All Done!

Great! Now that you understand how to embed CSS on your website, we can start learning the actual syntax! Throughout the next few lessons in this course, you will learn about CSS properties, selectors, variables, and much more. Let’s get started!

Last Lesson
Course Page
Next Lesson