loading...

Intro to CSS

5t3ph profile image Stephanie Eckles ・2 min read

Learn How to Make a Website with Steph (16 Part Series)

1) Learn How to Make a Website: Set up Your Coding Environment 2) Create Your First HTML File 3 ... 14 3) Essential HTML Element Tags 4) Semantic HTML Structure 5) Create a Blog Layout in HTML 6) Card Layout in HTML 7) Introduction to Web Accessibility 8) Intro to CSS 9) CSS Layout and the CSS Box Model 10) CSS Essential Properties and the Class Selector 11) Intro to the CSS Cascade - The "C" in CSS! 12) Structure and Styling Considerations for Accessibility 13) Style a Blog Layout with CSS 14) Style a Card Layout with CSS 15) Intro to Browser Compatibility 16) Intro to Responsive Design

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;
    }

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.

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

Learn How to Make a Website with Steph (16 Part Series)

1) Learn How to Make a Website: Set up Your Coding Environment 2) Create Your First HTML File 3 ... 14 3) Essential HTML Element Tags 4) Semantic HTML Structure 5) Create a Blog Layout in HTML 6) Card Layout in HTML 7) Introduction to Web Accessibility 8) Intro to CSS 9) CSS Layout and the CSS Box Model 10) CSS Essential Properties and the Class Selector 11) Intro to the CSS Cascade - The "C" in CSS! 12) Structure and Styling Considerations for Accessibility 13) Style a Blog Layout with CSS 14) Style a Card Layout with CSS 15) Intro to Browser Compatibility 16) Intro to Responsive Design

Posted on by:

5t3ph profile

Stephanie Eckles

@5t3ph

(she/her) ✍️ ModernCSS.dev, 👩🏼‍🎨 StyleStage.dev, 👩‍💻 Lead design system dev, 👩‍🏫 @eggheadio instructor, 👨‍👩‍👧‍👧 mom

Discussion

markdown guide
 
 
 

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

 

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

 

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

 

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