Before adding any CSS, HTML already has default browser styles. Look at the existing HTML styles and take a quick look at browser developer tools.
- [Instructor] HTML was originally created for research documents. The default browser styles were added to make the text easier to read. For example, headings are bold and get smaller depending on which heading level is used to visually show the hierarchy. Paragraphs and headings also have spaces between the elements to aid in readability. Links are blue and underlined, and lists automatically include bullets or numbers. There are more default HTML styles not shown in this example, and will be discussed throughout the course.
Browsers also have their own user agent style sheet, which is the default CSS file. You can actually view these styles using your browser's developer tools. Each modern browser comes with developer tools to allow you to inspect and debug any webpage's HTML in CSS. I'm using Chrome, but with each modern browser you should be able to open the dev tools by right-clicking or two-finger tap if you're on a Mac trackpad and select Inspect.
The HTML shows on the left, and the CSS shows on the right. Here it says user agent stylesheet, so these are actually the default styles of this browser. I'm just using a basic sample page I created with only HTML elements and no additional CSS. But you can use these developer tools on any webpage. To take a closer look, you can select any HTML elements on the left panel. For example, if I select the h1, the styles on the right shows under user agent stylesheet because this is the default style, and it also shows exactly which styles are being applied to that element.
Developer tools are great for improving your workflow when you're making lots of CSS changes or fixing bugs. In this course, we're focusing on getting started with writing CSS, so there's no need to worry about getting to know how to use this tool just yet. If you'd like to learn more about developer tools, here are some resources for the different browsers. Even though HTML already contains some styles, remember use HTML to assign meaning to the content, not for how it looks.
Instead, we'll use CSS to remove, revise, and add styles, and take your website those default text styles.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property