DEV Community

Stephanie Eckles
Stephanie Eckles

Posted on

Intro to CSS

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:

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.

h1 styled to purple color

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;
    }
Enter fullscreen mode Exit fullscreen mode

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;  
    }
Enter fullscreen mode Exit fullscreen mode

Save, and see the change in the browser.

h1 with font styles

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

Top comments (8)

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Great for beginners. Keep writing!

Collapse
 
5t3ph profile image
Stephanie Eckles

Thanks!

Collapse
 
wrldwzrd89 profile image
Eric Ahnell

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

Collapse
 
5t3ph profile image
Stephanie Eckles

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

Collapse
 
rodrigoribeirovitta profile image
rodrigoribeirovitta

Thanks! I'm Brazilian and I learned a lot from your page.

Collapse
 
me9dah profile image
AhMe9d

Thank you

Collapse
 
punund profile image
punund

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

Collapse
 
5t3ph profile image
Stephanie Eckles

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