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.
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
colorin 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
Top comments (8)
Great for beginners. Keep writing!
Thanks!
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
Thanks! I'm Brazilian and I learned a lot from your page.
Thank you
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...