I am a paragraph.
``` Example of inline styles. Inline styles are great for styling elements that are within the HTML markup, but they are not as powerful or flexible as other methods of applying CSS styles. ## Internal Styles **Internal styles** are styles placed in the `head` tag and are applied to the entire page. Unlike inline styles which only affect the element they are placed on, internal styles have the potential to affect multiple elements. Creating your own internal styles is as easy as placing a `style` tag inside your `head` tag, and then placing your styles inside that. Let's say you wanted to make the text inside `h2` tags green, you can do this: ```htmlI am a paragraph.
``` Example of internal styles. Internal styles are considered better than inline styles for the main reason that you can target multiple elements, instead of just one. Not to mention that they are separate. Internal styles are in the head tag and inline styles are mixed in directly with HTML. ## External Styles **External** styles are exactly the same as internal styles except that they live in a separate file, as opposed to inside the same HTML file. In the **same** folder as your `index.html` file, make a new file and save it as `styles.css`. If you wanted to make paragraphs red, put this inside `styles.css` and save. ```css p { color: red; } ``` Now we need to tell our HTML file to use this styles file. We do that by adding this line to our `head` tag: ```html ``` This tells our browser not only that this is a CSS file, but also where to look for it via the `href` attribute. Your HTML file should now look like this: ```htmlI am a red paragraph.
``` Example of external styles. With external styles, we keep our HTML and CSS **separate**. We can even work on them independently. If you added another paragraph, that one would also be red. In addition, if you added more styles to `styles.css`, you would see those changes if you refreshed. This is because the browser is looking for the styles in the `styles.css` file, and not the `index.html` file. ## Cascading The "C" in CSS stands for **cascading**. Styles are said to _cascade_ because they follow a specific **hierarchy**. We learned above three different ways to apply styles, but what if you tried to style the **same element** in each of three different ways? The hierarchy that the browser will follow is external, internal, then inline. Technically speaking, all of the styles will apply, but only the inline styles will win in the end. There is one exception, however, and that is when you use the important rule. ## Important Rule The **important rule** is an exception that you can apply to your styles that tells the browser "make this CSS rule apply, no matter what". It is generally frowned upon to be used unless absolutely necessary because it violates the **cascading** nature of CSS. To use the important rule, simply add `!important` at the end of your style: ```html