Tutorials, articles and quizzes on Software Development

Add CSS to a basic Webpage

Pre-requisite: An HTML Page

To add CSS to a page, we need to have a an HTML page to work with.

Click here to learn how to create a basic webpage in HTML

Creating a file with the css extension

To add CSS to our webpage, let’s go into the folder where our HTML file is located in and add a new file using our code editor. I will be using Visual Studio Code but the steps to create a new file should be the similar if not the same with other text editors.

To create a new file click on File >> New File.

Immediately we want to save it as a file with a .css extension so after you created the new Untitled file go back to the menu and click File >> Save As and save the file with the name “styles.css”.

<<Todo add image here>>

Using a CSS file in an HTML file

To use our newly created CSS file in an HTML file, we need to:

Open up our index.html file
Add a link tag inside the head tag
Have the link tag point to our styles.css file

After opening up our CSS file, let’s add a link tag. For our link tag, we don’t need both an opening and closing tag. We’re just going to be defining attributes in our tag.

Here is what our link tag will look like

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

The two attributes we’ve added are rel and href

rel tells us the relationship between our html page and the resource we’re pulling in using the link tag. In this case, this link tag is being used to pull in a stylesheet
href specifics the path of the resource we’re pointing to. In this case, our resource is in the root of our webpage folder in a file named “styles.css”

<!DOCTYPE html>
<html>
  <head>
    <title>Your first webpage</title>
    <link rel="stylesheet" href="./styles.css">
  </head>

  <body>
    <h1> This is my first webpage </h1>
  </body>

</html>

Using a CSS file to change the styling of an HTML page

In your code editor, go back to your styles.css file and add the following code to your blank file.

h1 {
  color: red;
}

This CSS style rule states that all h1 tags on your html page will have red text.

When you open back up your page by opening index.html with Chrome or another web browser, you should see the text “This is my first webpage” in the color red instead of the color black.