Adding CSS to the HTML files, also known as referencing CSS, can be done a few different ways. Explore the pros and cons of each option.
- [Instructor] There are three ways to add CSS to an HTML page. The first option is the external method. The CSS is in a separate file with a .css file extension. It's always added within the <head> element and uses a <link> tag and two attributes. Rel for relationship with a value of stylesheet and the href attribute to link to the actual CSS file. This is a void element, so it doesn't need a closing tag. You may have seen this snippet with another attribute, type with a value of text/css.
This was required in previous versions of HTML, but HTML5 is backwards compatible, meaning it will work with the older syntax as well. But my rule of thumb is if you don't need it anymore then just leave it out. But if it's there it doesn't hurt either. This method is recommended because it separates the CSS from the HTML document. It can also be added to any HTML page, so when the CSS file is updated, it will be reflected on all the HTML pages.
Let's go over the pros and cons of the other two methods. Inline CSS can be added to any HTML element with the style attribute. The CSS property is added as the value. This technique should be avoided because it's inefficient. Let's say you want to make all of your paragraphs blue. You would have to add that style attribute to every single paragraph tag. What if you had 50 paragraphs? That would not be fun to update. Also, if you use the same CSS property and selector in your general style sheet, inline styles will take precedence and override it.
The goal of CSS is to try to keep it flexible and as maintainable as you can. Internal CSS uses the <style> tag and it's also included in the <head> element. All the CSS rules are added between the opening and closing style tags. This tells the browser that this block of code is CSS and not HTML like the rest of the page. While this method is more flexible than inline, it still can be inefficient. If you had multiple HTML pages, you would have to copy this style block to every single page to duplicate the styles.
The internal CSS can also take precedence over an external style sheet, but only if it's added after the external style sheet. The order of the CSS declarations matter and will be discussed in more detail in an upcoming lesson. If you had a couple specific styles for a particular page, this method may come in handy, but there are other, more efficient CSS techniques for handling this scenario. As we progress through this course, you'll see that there are often different ways to do the same thing.
I'll be sure to go over best practices to help you decide which option works best for each scenario.
- 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