By this point, you've learned the most common HTML elements, along with their syntax and purposes. Your foundation is in place, so now you can start to get fancier.
There are three ways to apply CSS to your HTML.
- Inline Styling: This form of styling is used in your HTML, on the same line as the HTML element you're styling.
- Style Tag: This is a tag placed at the top of your HTML page, inside the body-tag. It allows you consolidate any repeat styles you have on your page.
- Style Sheet: This is a separate CSS document that is linked to your HTML page. It applies global styling to any page it's linked to.
In this lesson, you will learn how to change the appearance of an individual element (inline styling), focusing on text to get us started. Incorporating CSS styling into a webpage should be done with two goals in mind. One is to make the page more visually appealing to the user, and the second one is to establish a design hierarchy for your content.
Without CSS
Important Header
This is a paragraph of text that should be read after the header.
This is extra information that isn't as important.
With CSS
Important Header
This is a paragraph of text that should be read after the header.
This is extra information that isn't as important.
We've created hierarchy, at least semantically, with the use of different levels of header tags (<h1>, <h2>...etc). But many other things can determine what will grab a user's attention first. Bigger things are obviously easier to see than smaller ones, and some fonts are more appealing than others.
Before we learn about individual style properties, though, we need to learn the syntax to apply a CSS property to an element.
