When authoring your CSS, you have a few options available to you as to where you can write your styles.
External Style Sheet
You can place styles in their own separate CSS file. This is usually referred to as an External Styles Sheet.
External Style Sheets are simply text files with a .css extension. Typically they’ll hold multiple styles that are designed to control an entire site or section of a site.
You apply these styles to pages by using a link tag in the head of a document. Using a link tag, you can even specify what type of media you would like to apply the styles to giving you a way to apply different sets of styles to printers, desktops, and mobile devices.
Using External Style Sheets is the most efficient way of applying styles across an entire site.
You can also place styles in the head of an existing HTML document. This is usually referred to as an Embedded Style.
Embedded Styles only apply to the documents they’re found in which make them inefficient for site-wide styling, but perfect for targeted styles that are specific for that page.
- Most projects will rely heavily on external styles
- Embedded styles are mainly used to overwrite external styles
- You should plan an overall site strategy for style placement
You’ll find almost all of your projects will rely heavily on external CSS files with the occasional embedded style used to overwrite global styles.
Regardless of where you place your styles, the most important thing is to have an overall strategy that controls styling site-wide, and makes it easy for you to maintain or edit the styles when necessary.