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.
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;
}
Heading
SubheadingThe 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;
}
Heading
SubheadingThis is my paragraph
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.
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.
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;
}
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;
}
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;
}
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;
}
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! ▸