Lesson 21 Style.css

In this lesson you’ll be creating your first style file. You’ve seen me sneak in a little styling into our HTML files. We can do a little more of that later, but mostly we want our styling to happen in its own file. Why? Because we like to stay organized!

Our HTML file, the index.html contains the structure for the page. It’s also the nucleus of your site. It’s going to produce the instructions that set all the other files into use.

As the title of this lesson implies, we’ll be calling our file style.css. Now this isn’t as important as naming your main website page index.html. That is a MUST. The other pages on your site could have names like contact.html, directions.html, menu.html, more descriptive names of the pages themselves.

Our main css file is normally called style.css.  The CSS at the end says that it’s a cascading style sheet file. We could call it anyName.css and it would be okay, but I suggest using style.css. You can have one main css file for your whole project, or unique ones for each page.

Open Atom and save a new file as style.css. Save it in the folder where you have Lesson 9 saved.  You can add your first CSS by adding

* {background-color: blue}

Open the lesson9 file, or any of our lesson html files. In the head, tell it to use this new styling sheet by linking to the file you just made. The code needs to look like this. You should recognize href.

<link href=”./style.css” type=”text/css” rel=”stylesheet” />

To work on the style of your firstProject, I would recommend creating a folder/directory called resources if you don’t already have one, and inside that, create a folder named CSS. Then save your style file in that folder. Again, keeping it organized. You would link to it like this.

<link href=”./resources/css/style.css” type=”text/css” rel=”stylesheet” />

What’s the difference? The file path. The ./ says to look in the same directory as the file you have open now. The second example says to look in the css directory in the resources directory in the directory that’s in use now.

Take a look at your blue page. If it’s not blue, then check that the file names match in the directory and in your link. Also check the file path.

Here’s the video lesson.