Phase 1 :: Learning Structure and HTML #Development

Learning Front-End Code :: Phase 2 - CSS Basics

I hope you at least spent 10-15 minutes on W3 Schools learning some more HTML tags. If not, go there and at least read the first page.

What is CSS?

CSS applies design to your HTML. By default, the browser has some base styles applied to all HTML (which is why your first line of text was a Serif font and colored black). CSS improves and/or replaces these default styles applied by the browser.

Before we get into writing CSS we need to understand how CSS and HTML work together. So let's first create a CSS file and reference it from our index.html file. -- In Sublime Text, right click the directory "mySite" and click "New File". In the blank document paste the following code:

body {
  font-family: sans-serif;
  font-size: 24px;
}

Now save this file in the "mySite" directory as "main.css". Now go back to your index.html file and add the following lines above the opening <body> tag.

<head>
  <link rel="stylesheet" href="main.css" />
</head>

After you save both files, go back to the browser with your index.html opened and refresh. You should see now that the text is a sans-serif font instead of a serif one and it's larger (24px). That's because in our CSS file we declared that everything within the <body> tag should be a sans-serif font and 24px in size.

mySite/index.html
My first site
If you're not seeing the updates, it's because either you saved your main.css file in the wrong place or your reference to the CSS file in the <head> of your index.html is incorrect.

CSS Structure

Let's break down the first few lines of CSS we're using. Below, the text in red is what is called our "selector" or, in other words, is the HTML element(s) we are applying the CSS to.

body {
  font-family: sans-serif;
  font-size: 24px;
}

Next is the CSS property we are targeting. There are HUNDREDS and after 15 years I still only have about 60% memorized, so don't fret if you can't remember them as you code.

body {
  font-family: sans-serif;
  font-size: 24px;
}

For each property there are values you can assign it. Some CSS properties have a set list of values you can give it, but other properties you can set to whatever value you desire, like font family, font size, etc.

body {
  font-family: sans-serif;
  font-size: 24px;
}

Circling back to the selector, there are other types of selectors we can use. In our example "body" is a generic selector, meaning that IF we had multiple body tags, the style would be applied to each of them. The other two most commonly used selectors are Id and Class.

CSS Selectors

In CSS, a "class" means "one of many", meaning that there can be multiple HTML elements with the same class. Like below:

<h1 class="blue">Heading</h1>
<span class="blue">Subheading</span>

And to change the style of these classes in our CSS file we need to add that selector. IMPORTANT: in CSS, to reference a class, we must use a period before the class name.

.blue {
  color: blue;
}
mySite/index.html

Heading

Subheading
class="name" in HTML is referenced by .name in CSS

The other commonly used selector is Id. Ids in computer science are unique identifiers, meaning they occur once. Let's add a paragraph with a unique id.

<h1 class="blue">Heading</h1>
<span class="blue">Subheading</span>

<p id="firstParagraph">
  This is my paragraph
</p>

And within our CSS the only difference here is that we use a hash (#) instead of a period to select the HTML element.

#firstParagraph {
  color: red;
}
mySite/index.html

Heading

Subheading

This is my paragraph

id="name" in HTML is referenced by #name in CSS

Let's have some fun

CSS is extremely powerful due to its flexibility. It takes years of practice before you learn all of the nuances. -- For now, let's try to design our own version of Google's homepage.

About as simple a site as you can get.

I always begin any project with the HTML elements only. So let's breakdown what we have here.

  • A logo that's basically colored text
  • An input field for search
  • Two buttons

Now we write that into our index.html file.

<html>
  <head>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>

    <h1>
      Google
    </h1>
    <input />
    <div>
      <button>Google Search</button>
      <button>I'm Feeling Lucky</button>
    </div>

  </body>
</html>

We refresh our browser and take a look at what we have to start with. Not too bad.

mySite/index.html

Google

First, let's remove the font-size from the body selector and add text-align to center everything. Then let's give our HTML elements some spacing with the "margin" property*. * in the CSS below, "px" is short for pixels.

body {
  font-family: sans-serif;
  text-align: center;
}

h1 {
  margin-top: 80px;
  margin-bottom: 30px;
  font-size: 72px;
}

input {
  margin-bottom: 30px;
}
mySite/index.html

Google

Getting closer. Next up, let's give our input field and buttons some basic styling without going overboard. * notice how in the CSS below, all two word properties have a dash between them.

input {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 25px;
  width: 500px;
  border: 1px solid #CCC;
  font-size: 14px;
}

button {
  padding: 10px;
  border: 0;
  background: #ccc;
  font-size: 14px;
  border-radius: 4px;
}
mySite/index.html

Google

And now for the last touches. Let's color each of the letters in the word "Google". First we need to edit our index.html file and give each letter a class to change the color.

<html>
  <head>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>
      <span class="blue">G</span><span class="red">o</span><span class="yellow">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span>
    </h1>
    <input />
    <div>
      <button>Google Search</button>
      <button>I'm Feeling Lucky</button>
    </div>
  </body>
</html>
.blue {
  color: #2180fc;
}

.red {
  color: #ff1a2c;
}

.yellow {
  color: #ffb900;
}

.green {
  color: #00ad49;
}
mySite/index.html

Google

This looks ok, but you know what? You're ready to display images. Let's just use the Google logo. Remove the <h1> tag (opening and closing) and all of the spans we just created. While we're at it, let's set the width and height of the logo.

<html>
  <head>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="270" height="200" />
    <input />
    <div>
      <button>Google Search</button>
      <button>I'm Feeling Lucky</button>
    </div>
  </body>
</html>

And let's clean up our CSS while adding the same margin we had on the <h1> to the <img> tag.

body {
  font-family: sans-serif;
  text-align: center;
}

img {
  margin-top: 80px;
  margin-bottom: 30px;
}

input {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 25px;
  width: 500px;
  border: 1px solid #CCC;
  font-size: 14px;
}

button {
  padding: 10px;
  border: 0;
  background: #ccc;
  font-size: 14px;
  border-radius: 4px;
}
mySite/index.html

Alright! Looking good. Now for your next homework. First head over to W3 Schools again and take a look through their CSS tutorial. Then, if you want, read my quick article about being "Good at CSS".

Onward to Javascript! ▸

&Review Part 1

April 4, 2019 · 5 min read

Learning Front-End Code :: Phase 1

Over the years, friends have asked me to teach them the basics of front end code so they can make lightweight apps.