CSS Styling Code Along

Objectives

1. Review linking an external CSS file.
2. Review writing selectors.
3. Styling text content.

Introduction

In this code along exercise we will be adding style to our pages by linking an external CSS file. If you open this lab on the in-browser Learn IDE, all the files you need for following along will be available, and will automatically clone down. However, if you were following along using a personal exceptional-realty repository in the previous HTML lessons, you can continue from where we left off by running the following in your terminal:

git clone https://github.com/<your_username_here>/exceptional-realty
cd exceptional-realty

Steps

Tasks for LearnIDE Environment Users

1. Click the "OPEN IDE" button

Tasks for Local Environment Users

1. Fork this repository.

2. Clone your fork locally.

3. cd into the local repo you just cloned.

4. Code along with the included video below. While coding work in your cloned copy of this lab! The instructors foldername will be different than yours.

5. After the video: stage, commit, and push up your changes.

6. Then make a pull request.

Create a new branch for this lesson called css-styling by typing git checkout -b css-styling from inside the project folder before continuing.

Code along with the included video below. Some parts of the video, such as folder names, will be different than your own.

<iframe width="640" height="480" src="//www.youtube.com/embed/aA8k-hK8qzg?rel=0&controls=1&showinfo=1" frameborder="0" allowfullscreen></iframe>

When you're finished, add, commit and push your work up. Then, checkout master, and merge it with the work you've done on the css-styling branch, and push up the master as well. The commands should look like the following:

git add .
git commit -m 'add external css file and connect it to project'
git push -u origin css-styling
git checkout master
git merge css-styling
git add .
git commit -m 'merge css-styling branch'
git push

View CSS Styling on Learn.co and start learning to code for free.