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