CSS Basics

We use HTML to create basic web pages, but we can make them look a million times better using CSS (Cascading Style sheets).

With CSS, we can alter a lot of different things, from HTML font sizes and HTML font colors to HTML background images!

Let’s start!

First, let’s create a CSS file. Open Atom and save a new file as style.css.

Then, we need to link our CSS file to our HTML file. (If we don’t do this, the HTML file cannot find our CSS file).

To do this, we add <link href="style.css" rel="stylesheet"> in between our <head> and </head> tags.

Open up your HTML file and try it out! After linking your CSS file, your code should look something like this:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <link href="style.css" type="text/css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

Remember to save your style.css file in the same folder as your HTML file! (It’s best practice to store your different files in the same directory.)

The CSS Ruleset

Before we start writing some CSS, we need to understand the CSS ruleset.

In this ruleset, h1 is our selector. In our HTML file, we write <h1> to specify the Heading 1 tag. In our CSS file, we just write it out without opening and closing brackets.

h1{
  font-size: 12px;
}

Then we have the property, as shown below. This is the characteristic of our selector that we want to change. In this example, we want to change the font size of Heading 1, so we type font-size.

h1{
  font-size: 12px;
}

Note: There are a ton of properties out there (e.g., font-family, font-weight, text-align, color, background-color, font-size)! But you don’t need to remember them all -- as long as you have access to Google, you’re good!

In the example below, 12px is our value. The value is what you want your property to be. 12px is the value of font-size. What are some other values you can think of? (Here are some: pink for background-color, Arial for font-family)

h1{
  font-size: 12px;
}

Notice that there’s a semicolon ; after your value. Never forget it!

h1{
  font-size: 12px;
}

One last thing – the declaration block.

In our example, { font-size: 12px; } is the declaration block. It consists of opening and closing brackets, as well as the property, the value, and the semicolon.

h1{
  font-size: 12px;
}

Never forget the opening and closing brackets!

Classes and IDs

What happens when we have various elements (such as ten paragraphs, in a single web page) and want to change just one of them? That’s where classes come in handy!

Classes vs. IDs

We use classes when we want to apply a style to several elements.
We use IDs when we want to apply a style to just one unique element.

For example, if we just want one paragraph in our code to have blue text, we can give it an ID.

<p id="blue">I am blue!</p>

We include a # before the name of an ID. In our CSS file, we would first type:

#blue {
      
}

What do we need to type for our property and value to make our text blue?
If you thought color:blue; you’re right!

#blue {
  color: blue;
}

What about classes? Insead of a #, we include a period . before the name of the class.

If my HTML file has <p class="yellow">I am yellow!</p> then for my CSS file I would type:

.yellow {
  color: yellow;
}

So for all the paragraphs you want to have yellow text, you would give all of them the .yellow class.

Pseudo-what?

Now it’s time to go even more in-depth. We’re now going to try out some pseudo-class selectors.

These are primarily used when we want to make our website more interactive. For example, when you hover over a link the text changes color, or when you hover over an image and its colors suddenly fade.

We need to use a colon : to add a pseudo-class. Again, there are a ton of pseudo-classes out there, so don’t hesitate to look them up. Google is your friend!

For this example, we’re going to use a:hover. This will let us change the color of a link once we hover over it with a cursor.

a:hover {
  color: rgb(255, 0, 157);
}

For this example, I chose hot pink, so all of the links of my web page will turn hot pink whenever my cursor hovers over them.

Note that you can type out the names of colors, but if you want a particular color and aren’t sure what its name is, you can always use a hex color or RGB value (read more here).

Hex color examples: #2596be, #e28743
RGB color examples: rgb(238, 130, 238), rgb(118,181,197)

I recommend checking out websites such as https://imagecolorpicker.com to help you find the exact colors you want!

Descendants

If you want to be even more specific, you can also target the descendants of elements.

In the example below, each <li> element is a descendant of the <ul> element.

<ul class="list">
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

To have a certain style apply solely to the </li> elements, we would type:

.list li {
  color: white;
}

So if you type something like that, only the <li> elements of .list will change. The <li> elements of any other ordered or unordered lists you have on your web page won’t be affected!

2 or More Selectors

If we have two or more selectors and want to apply the same CSS style to the both of them, we can use a comma instead of repeating the same declaration blocks.

p {
  font-size: 14px;
}

      
h2 {
  font-size: 14px;
}

In this example, the text of both selectors will have a font size of 14px. We can combine this by simply using a comma!

p,h2 {
  font-size: 14px;
}

What are some other properties that we can customize? Here are a few popular ones:


Background Color (background-color)

background-color: blue;
background-color: #e28743;
background-color: rgb(118,181,197);

We can easily change the background color of a web page using this! Remember that we can use the names of colors, but hex colors and RGB values work too.


Font Size (font-size)

font-size: 12px;
font-size: 24px;
font-size: 36px;

You can change the size of your text using this property. The higher the value number, the larger your text.


Background Image (background-image)

.top{
background-image: url("https://www.corgis.com/corgi.jpg");
}

.top {
background-image: url("corgi.jpg");
}

You can also use images for your background instead of a color. Include the link to the image you want, or save the image in the same directory as your CSS and HTML files!


Font Weight (font-weight)

font-weight: bold;
font-weight: lighter;
font-weight: 100;
font-weight: 900;
etc.

Here is a list of all the values you can use to alter font weight. The standard weight of text is 400, so you can make your text bolder by increasing the value (up to 900) OR by typing bold or bolder. You can make your text lighter by decreasing the value (the minimum being 100) OR by typing lighter.


Text Align (text-align)

text-align: center;
text-align: left;
text-align: right;
text-align: justify;

Use this to alter your text alignment! Similar to what you would do on Microsoft Word or Apple Pages.


Font Family (font-family)

font-family: Arial;
font-family: Helvetica;
font-family: Georgia;
font-family: Consolas;

Here is a list of all the web safe fonts. It’s important to use one of these fonts when you’re just starting to make websites to ensure that different browsers are able to support your chosen font.

Okay, those are some basics of CSS that are important to know! In future workshops, you’ll learn even more about how we can use CSS to create responsive websites ☺

< BACK TO HOME