Learning About CSS

00:00 In this lesson, you’ll be introduced to CSS and learn how to take control of your website styling.

00:06 You may recall from previous lessons that the browser adds some styling by default. That’s why you were able to notice the difference in the elements in the previous section without adding any styling yourself.

00:16 That’s a service from the browser to you as a human. But strictly speaking, when you write HTML, you only define the markup of your website. Pure HTML doesn’t provide any styling. To style your elements, you need to add CSS. CSS stands for Cascading Style Sheets.

00:34 You can combine and nest your CSS styling rules, hence the name cascading.

00:39 Before getting started with styling, it’s a good idea to familiarize yourself with your browser’s developer tools. The developer tool pane of your browser allows you to investigate any website.

00:50 It’s important to note the changes here do not persist, so upon reload, the changes will be gone. Open your index.html file in your browser and take a look at how this works.

01:01 Once your browser is open with your index.html file, go ahead and right-click anywhere on the page and select Inspect from that dropdown.

01:09 This new pane that opens up is your developer tools. You can see under the Elements section that this is all the HTML you previously wrote. When you click on an element, for example, the h1, you can see on the right side under Styles all the default styles that your browser is providing for you.

01:26 So it has like a display of block, font size 2em, a couple of margins, and a font weight. Where is says element.style go ahead and click into that and type the word color: blue;.

01:41 Notice how it changes your h1 to have a color of blue. This is great for testing styles, but you’ll likely want something that persists. Now is a good time to learn a bit more about styling with CSS.