CSS Lesson 2: How To Create Your First CSS File

Today we are going to write and save our first CSS file. Let’s begin by opening a text editing program. If you are on a Microsoft Windows PC open the program named Notepad (hold down the Windows Key on your keyboard and press R, then type notepad and press enter). If you are using a Macintosh computer, launch the application named “TextEdit” (which can be found in your Apps folder).

Let’s Write Our First Bit of CSS

Let’s imagine we have a simple web page with a heading, and we want the heading to be orange and center aligned. Add the following code into your new blank text document:

h1 {
color: orange;
text-align: center;
}

Hopefully, you remember this code from our previous lesson. The task for today is to save our CSS file and link it to an HTML page.

Step 1: Saving The CSS File

Create a new folder on your desktop (or another location you prefer) and name it CSS-Test. Now, back in your text editing program save your document as “style.css”.

Save CSS file

Linking CSS File to an HTML Page

Our new CSS file is worthless if we don’t apply it to a web page. Let’s create a quick HTML page for this lesson. Create a new blank file in Notepad (or TextEdit) and add the following code:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>CSS-Test</title>
</head>
<body>

<h1>CSS-Test</h1>

<div id="box-one">
<p>This is box one.</p>
</div>

<div id="box-two">
<p>This is box two.</p>
</div>

</body>
</html>

If you’ve read my first few HTML Lessons, then this code is at least somewhat familiar. I’ll explain it as the lesson continues; for now save this document in our “CSS-Test” folder and name it “index.htm”.

Save HTML File

Linking the Two Files Together

We still need to tell the web browser to load our “style.css” file when the “index.htm” page is viewed. Add the following code to “index.htm” directly above our </head> closing tag:

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

This line of code tells our browser that we want to link a Style Sheet, that it’s located in the same folder as our HTML page, and that it’s named “style.css”.

Now, when you view “index.htm” page in a web browser you should see a centered, orange heading:

Create your first CSS File

Let’s Style Those Two Boxes

If you look at the code of our HTML page, you’ll see two <div> elements. We added an HTML attribute of “id” for these two elements and assigned them values of “box-one” and “box-two.” We can use an element’s “id” to select and style it with CSS. For example, let’s make the first box gray, and the second box yellow. Add the following code to your CSS file, directly below our original <h1> rule:

#box-one {
background-color: gray;
}

#box-two {
background-color: yellow;
padding: 10px;
}

When an element has an “id” we can access it with a CSS selector by placing a pound sign (#) in front of it’s id value. So to select the first <div> element we simply type “#box-one” and then begin our CSS Rule.

Our New Fancy Boxes

When you save your CSS file and refresh our HTML page in a web browser you should see something very similar to this:

First CSS file

Yay For Style

It may not be beautiful, but we styled our first HTML page with CSS! Let’s recap your CSS knowledge so far. You know:

In our next lesson we’ll continue learning about CSS Selectors and the different ways to target specific elements with your CSS.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

15 thoughts on “CSS Lesson 2: How To Create Your First CSS File

  1. I am currently going to school online at the Art Institute for Web Design/ Interactive Media. I have only been working with HTML and CSS code for a couple of months now, and your tutorials have really helped me so much man, I really just wanted to take this opportunity to thank you for posting such great tutorials, and making everything really easy to understand. Every sense I have found your Web site last week,I have been religiously referencing back to your site for help, and it has made my online experience with Coding a hell of a lot easier. (lol) I even go as far as leaving your site open in my Task Bar constantly for quick reference. Thanks you so much buddy, your work is very appreciated.- Norton

  2. I wrote and was trying to save my first CSS file today. I’m using TextEdit. When I tried to save it in plain text format as “style.css”, I got the following message… “You cannot save this document with extension “.css” at the end of the name. The required extension is “.txt”. You can choose both, so that your file name ends in “.css.txt”.” How do I proceed? Thank you!

  3. Hi Patricia,

    While in TextEdit look in the top OS X menu bar for “Format.” Once you click “Format” there should be an option to “Make Plain Text.” That should do the trick – saving the file with a .css extension should now work.

    The keyboard shortcut to switch to plain text is Command+Shift+T.

  4. Why create separate file for CSS and then link it to html when there is a possibility to make it all together in same file?
    I don’t try to suggest, because I’m just beginner , but as I sow in other html and css tutorials, there was a way to do css and html in same field and it was way easier for me to understand. Thank you.

    1. Hi Giorgi,

      That is a great question. It may be simpler to include the CSS code within the HTML page when you are learning, but I like to get people started on the right foot from the very start. I want to get you in the habit of keeping your CSS in a separate file because it is the industry standard.

      The key concept is “separation of presentation and content.”

      Think of it this way: Imagine you have a website that has 50 or 100 pages and you want to change the background color. If we keep our CSS in a separate file we can make a change to one file and the background color will change for all 100 pages. If you keep the CSS code in the HTML file then you would need to edit 100 files.

      Another example: Imagine all of your CSS code is about 10 kilobytes of data. Imagine a user visits your site and views 15 different pages. If you include the CSS in your HTML file they would be re-downloading the same 10 kilobytes of CSS data 15 times! If we keep our CSS in a separate file they would only need to download it once.

  5. I have been studied an html lesson at volcano web and w3 school. Your css lesson give me a good practice and amazing knowledge for me. Thanks, dude.

  6. Striving to be self-taught CSS/HTML proficient. Officially going to use your site for both, until I run out of lessons! Was seriously considering going to school for this since it seemed so daunting. Thanks for saving me from a $40K college education debt ;)

  7. Yeah, I am old school and still stuck on HTML going back to the old days of Geocities, if anyone remembers that. It was a free web host in the 90s. I have put off learning CSS for a long time. I am tired of going back and editing each individual page one at a time in all of my stuff on the net. Just changing a simple footer is a lot of work. I like how your lessons are very very simple, and takes your hand and slowly walks everyone through it step by step. I just found this site a couple of weeks ago. Wish it would have been earlier. It has helped me finally understand the concept of CSS. I have CSS for Dummies but still didn’t get it. I haven’t become an expert by any means in two weeks, but I am just excited to be learning.

    Thanks , Drew F.

  8. I’m taking a web class right now and I found the book hard to follow. I ran across your site and it is great!

    I was wondering if you had any lessons showing diagrams inserted on both web page and the .css file.

    Thank you,
    Tee

  9. This site is very helpfull for me. keep continue the sharing of your best knowladge about designing.
    Thanks.
    Jay Hind

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>