Learn about how to add CSS to HTML files and the pros and cons for each option.
- [Narrator] Before we write CSS let's talk about the different ways that it can be added to the HTML. There are three different methods. The external method refers to using a separate CSS file and must be saved with the CSS file extension. There are two ways to load the external CSS file into the HTML, with a link tag or using the @import method. The link tag is added to the head of the document with two attributes, rel and href. Rel stands for the relationship and uses the value of stylesheet, the href value is the path to the CSS file. Link is a void element so it doesn't need a closing tag. You may see this snippet with another attribute, type="text/css", this was required in the previous versions of HTML, but is no longer needed in HTML5, the latest version, but if it's there it doesn't hurt either. But my rule is, if you don't need it, leave it out. Using an external stylesheet is recommended because it separates the CSS from the HTML making it easier to manage. An external stylesheet can be reused throughout a project by linking the same CSS file to any HTML file. And any changes made to the CSS file will be reflected on all the HTML pages that it's being loaded into. You can use more than one CSS file, but using too many may defeat the purpose of having separate stylesheets if you're maintaining a bunch of different files, however for larger projects and code bases, having one giant CSS file can also become unruly, so sometimes breaking them down into smaller files can make it easier to manage. And if that's the case, there is a way to combine the files. The second external method uses the @import rule which imports one or more stylesheets into HTML files or into another CSS file. This method can be used to import all the smaller CSS files into a single CSS file, which is then loaded into the HTML document between a style tag in the head of the document. This method isn't used often these days because the downside to using import is the potential for slowing down your page speed. Import does not allow for parallel downloads, meaning the page must download an entire stylesheet before it loads the rest of the page. Here is a detailed blog post about how import affects page load, it's from 2009 but it's still relevant. The import method is however, commonly used with CSS preprocessors such as SASS or LESS, or when CSS files are compiled into one file before loading it into the page. This topic is a bit more advanced for this course, we should learn some CSS basics first. So for now, just know that you'll probably see this method being used at some point, but we'll be using the link method for our projects. The inline method uses a style attribute which is added to the opening HTML tag. Make sure to include a space between the tag name and the attribute. The CSS style rules are added as the value, which applies they style directly to the HTML element. The inline method should be used sparingly, if at all, because it is hard to manage. Multiple styles must be added to the same style attribute, and the more you add the harder it is to read. Also, CSS added by any other method is overwritten by the inline styles, creating more potential for conflict with other CSS style rules. The inline method is also not reusable since it's applied directly to each element. What if you had 50 paragraphs? You would have to add the style to each one. The third option is the internal method. CSS is added between the style tag in the head of the document. This method is more flexible than the inline method because instead of adding styles to each individual element, CSS selectors are used to apply a style to all the matched elements. We'll be talking a little bit more about selectors in an upcoming lesson. While internal CSS works better than inline CSS it can still 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 method is best for short blocks of CSS that only need to be applied to one page. As we progress through this course, you will see that there are often different ways to accomplish the same thing. I'll be sure to go over best practices to help you decide which options work best for each scenario.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts