Styling with Style.css

Back to: Web Design for All Ages

Have fun adding CSS the right way: via an external style.css file in the head of your index.html file

Pre-requisites

This exercise assumes the following:

1. You should already have a Github pages repo setup (e.g. https://github.com/yourusername/yourusername.github.io).
2. You should have already established a local dev environment (e.g. already cloned your Github repo to your local computer. If not, please refer to the previous lesson(s).
3. You should already have a bare-bones, minimal index.html file already created.

In Finder, create a new folder and name it css (all lowercase)

This new css folder is where we are going to place our CSS in the next step.

In VS Code, open up your home page index.html and link it to a new external CSS file style.css

• Launch your text editor, VS Code, open your project folder, then open your home page index.html file.
• Next, create a new file (File > New File) and name it style.css.
  • Tip: when working on both an HTML and CSS file that are linked together, split your editor view so that the HTML is on the left and the CSS is on the right.
• Next, add one initial quick style change, such as changing the body background to red, for testing purposes.

body {
    background: red;
}

• Next, return to your index.html file, and within the head, add a link to the new external style sheet style.css.

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

When you are done, your index.html file should look something like this:

• Next, check to see if you successfully linked the two files (index.html + style.css) by opening your local index.html file in a browser.

Have Fun by Adding Style

Tip: Write One (1) Line of Code at a Time and Test it Locally

Remember: Do not try to code all of the CSS at once. Instead, get in the habit of coding one line at a time, hitting save, then viewing your changes locally in the browser. To do this quickly and efficiently, be sure to have two windows/apps open: 1) your editor (VS Code) and 2) your browser (viewing your local index.html file). Then follow the 2-step “one-line-at-a-time” local coding process.

The 2-Step local coding process:

1. In VS Code, write one (1) line of code at a time, then hit Save
2. In your browser, hit Refresh to see your changes.
3. Repeat (go back to step 1).

Example CSS Code that we did previously, plus a few new changes (e.g. to center the list):

body {
    background: red;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    display: grid;
    align-content: center;
    text-align: center;
    min-height: 100vh;
}

h1 {
    font-size: 48px;
    text-transform: uppercase;
    margin: 0;
}

p {
    color: white;
}

ul {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
}

li {
    text-align: left;
}

Have fun!

Now is a good time to start experimenting with CSS. Start by changing the colors. Then maybe adjust the text. What else would you like to try to do? Go for it, have fun, and play around learning CSS.

Save (commit) your local changes to the server (Github)

By now you should know the drill: in VS Code, navigate to the “Source Control” (a.k.a. “Git”) tab on the left, then do a commit (with a comment of your change) followed by a push (sync).

The Git Commit + Push-to-Master Process

1. Commit: add a descriptive comment then hit the checkmark icon (the checkmark will save the changes via a git “commit”)
2. Push: at the bottom of the interface, hit the sync icon (this sync icon will upload the changes via a git “push”)
   • Enter your username and password if/when prompted

Test your live site

Whenever you push changes to your master GitHub repo, be sure to test your live site hosted on Github pages. Congratulations! It’s back to look good. Having fun again?