• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 7/15/19

Decide where to write CSS

Log in or subscribe for free to enjoy all this course has to offer!

Your CSS must be written in the right place so that it communicates with your HTML. Otherwise, you won't see any changes to your elements!

CSS can be written either:

  • outside your HTML file

  • inside your HTML file

Writing CSS in the same file might sound easier — the fewer files, the better, right? However, by shoving all your HTML and CSS into one file, you often end up with a long and unreadable mess.

We'll first look at writing CSS in a separate file because it's what you'll do most often.

External CSS

In a HTML and CSS project, you often have the following file structure:

Typical website project structure
Typical website project structure

There is:

  1. A general folder for the project ("website").

  2. The "website" folder contains a file called index.html.

  3. The "website" folder contains another folder called "css."

  4. The "css" folder contains a file called "style.css."

This is what most of your simple website projects will look like! You'll write HTML in an index.html file and CSS within a style.css file.

The HTML file is what's read by a user's browser. Therefore, you need a link in there to the CSS file; otherwise, your groovy styles won't be applied to the HTML elements you want. 😢

<!DOCTYPE html>
<html>
    <head>
        <title>YOUR PAGE TITLE</title>
        <link href=“css/style.css” type=“text/css” rel=“stylesheet” /> 
    </head>
    <body>
        <h1>SOME HTML, WOOHOO</h1>
    </body>
</html>

Look at line 5.

The <link> element in the HTML's <head> tells the page where to find its matching CSS. It should have the following attributes:

  • href: the file path to the CSS. If you structure your project as shown in the image at the top of the chapter, this will be "css/style.css."

  • type: describes the type of link, which will always be "text/css" for your stylesheets

  • rel: describes the relationship between the pages, which will always be "stylesheet" for your stylesheets
    There is no closing tag necessary for the <link> element!

Internal CSS

You can also write CSS in your HTML as follows:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS</title>
        <style type=“text/css”>
            h1 {
                color: green;
            } 
        </style> 
    </head>
    <body>
        <h1>SOME HTML, WOOHOO</h1>
    </body>
</html>

Look at lines 5-9.

A <style> tag within the HTML file's <head> defines the CSS for the page. This is fine if you only have a couple lines of CSS. However, it can quickly become unwieldy. It's not fun to read lines and lines of CSS in a file before the actual page content even starts!

Inline CSS

You can even write CSS directly on elements in the HTML's body. In that case, you don't need to actually select them, since it's clear (based on where you place the style tag) which element you want to change the appearance of using CSS:

<h1 style="color: blue;">This will be a blue heading</h1>

I advise you to use external CSS most of the time because writing styles in HTML can quickly become unwieldy and disorganized, unless you're working on a very small project.

Exercise: Add a link to your CSS stylesheet

Let's dive into color in the next chapter, so you actually have something to write in your CSS files! For now, though, try taking a brief spin at adding a link to a stylesheet yourself:

https://www.codevolve.com/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=002bdb11-51ee-4577-a78c-19de73915090

Example of certificate of achievement
Example of certificate of achievement