Add Style with CSS

By /

Back to: Web Design for All Ages

Have fun and add some temporary inline CSS in the head of your index.html file

Before we start officially learning the essentials and best practices of HTML and CSS, let’s take a short break and have some fun by quickly adding a little style to the home page.

Warning: in this lesson, we are going to adding CSS directly into the HTML file as a temporary styling exercise. Please note that this is not a recommended practice. While there are several use cases for inline CSS, in this class we are going to eventually place all CSS in its own, separate file (style.css). But not yet. First, let’s take a quick detour and have some fun.

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.

Step

1

In VS Code, open up your bare-bones, initial start of the home page (index.html)

Launch your text editor, VS Code, and open your index.html file.

<html>
<head>
<title>Title of the Web Page</title>
</head>
<body>
<h1>Large Heading</h1>
<p>This is a paragraph of text. Lorem ipsum et dolorem.</p>
</body>
</html>
view raw barebones.html hosted with ❤ by GitHub

Within the head, add opening and closing style tags, then add the following CSS in between them:

body {
background: red;
font-family: sans-serif;
text-align: center;
display: grid;
align-content: center;
min-height: 100vh;
}
h1 {
font-size: 48px;
text-transform: uppercase;
margin: 0;
}
p {
color: white;
}
view raw barebones-demo.css hosted with ❤ by GitHub

Write One (1) Line of Code at a Time

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).

Repeat this process until you are done. The final code should look like this:

<style>
        body {
            background: red;
            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;
        }
</style>

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? We are going to remove this inline css eventually, so for now, why not go for it and play around for a few minutes learning CSS.

Step

3

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 starting to look good. Having fun yet?