Stephanie Eckles

Posted on Feb 22, 2020

Intro to CSS

#beginners #css #tutorial #webdev

In this post, we will begin to learn the styling language for the web: CSS, which stands for Cascading Style Sheets.

This is the eighth post and video in a series on learning web development.

You may need to check out the first post to learn how to get set up to begin coding:

Learn How to Make a Website: Set up Your Coding Environment

Stephanie Eckles ・ Jan 20 '20 ・ 3 min read

#tutorial #beginners #codenewbie

You may watch the following video or follow along with the expanded transcript that follows.

Review the source code >

To begin this lesson, open the starter project you began in episode 1, or review the source files from episode 6.

In the Terminal, type the start command npm run start to run the project, then go to the browser and update the url to include /semantic-layout.html.

Now, on this page, the h1 is purple. The reason is that the starter package shipped with a CSS file and the one rule defined is specifying that when the browser finds and h1 it should make the color purple.

Back in VSCode, let's open semantic-layout.html.

In the <head>, one of the tags present is a link tag with a href attribute, and that is pointing to our CSS file, named style.css. This method of including CSS is called linking to an external stylesheet. There are two other ways to include CSS, but this is the generally preferred method so we will start here.

Now let's open the style.css file.

The one rule present demonstrates the most basic way to style an element, which is to use the tag name. Again, in this case it's targeting the h1.

    h1 {
      color: rebeccapurple;
    }

Each group within a CSS file that defines styles for HTML elements are called rules.

All CSS rules have 3 parts:

The selector is the part that comes prior to the curly braces and identifies which element, or elements, should use the rule
The property, which is color in this rule, and is a defined list based on browser support
The value, which is what the property is set to, in this case rebeccapurple

Each property and value pairing are separated by a colon :, and must end with a semicolon ; to be valid CSS for the browser to interpret and use.

Let's add two more properties to practice. After the color definition, we'll add definitions for font-size and font-family.

    h1 {
      color: rebeccapurple;
      font-size: 40px;
      font-family: sans-serif;  
    }

Save, and see the change in the browser.

There are over 250 CSS properties available for use! Throughout the next lessons, we will continue to learn and build upon your knowledge of CSS properties to handle common styling scenarios.

Next up in Episode 9: CSS Layout and the Box Model

Oldest comments (8)

Vaibhav Khulbe • Feb 22 '20

Great for beginners. Keep writing!

Stephanie Eckles • Feb 22 '20

Thanks!

Eric Ahnell • Feb 22 '20

Will this series feature WebAssembly at some point? Nice work, Stephanie!

Stephanie Eckles • Feb 23 '20

Thanks! This course is strictly HTML and CSS for beginners, with a capstone project that will include getting the project on Github and deploying via Netlify.

The course schedule and more details can be found here: thinkdobecreate.com/learnwebdev

punund • Feb 23 '20

It may be worth not to offer "RebeccaPurple" as CSS-4 colors are not standardized and may not be universally supported.

Stephanie Eckles • Feb 23 '20

I didn't realize that color was level4 however I've been a developer long enough that I followed the story when it was proposed so it's of personal significance to me, esp. now that I'm a mother 😊 I believe it is supported in the major browsers.

Here's the origin story of rebeccapurple: codepen.io/trezy/post/honoring-a-g...

And here's a guide to the color spec: developer.mozilla.org/en-US/docs/W...