There are three main ways to add CSS to your webpages in order to style your document. CSS uses specificity when forming selectors to style specific elements. It also uses specificity to determine the importance of the stylesheets or CSS code that you are using in your document.
There are three main ways to add CSS to your webpages.
- External Stylesheets
- Embedded Style Tags
- Inline CSS Styles
There is one other type of CSS that isn’t quite as common. The CSS import is the odd man out. The reason why I didn’t include the import in the above list is due to the fact that it must be used within an external stylesheet. The import works by importing an entire stylesheet file into your document.
Basic Implementation of @import
@import 'path/to/stylesheet.css';
Using Media Queries with @import
@import 'path/to/stylesheet.css' screen, print, tv;
The above version includes a comma separated list of the media queries which should be matched before the linked file will be imported
External Style Sheets
External style sheets offer the most flexible use of CSS in a website project. External style sheets allow for separation of style and content which is a huge plus when it comes to maintainability. In order to add an external stylesheet to a document you must attach your file with the link tag.
Specificity in External Style Sheets
Many times in websites you have several CSS files that need attached in the head of your document. The order is very important while linking these CSS files to your site. The stylesheet that comes last in the list is the most important. Much like selectors within the file the lower the rule is in your code the more power it has to overwrite the same rules higher up in the same document.
In the above example stylesheet3.css is going to overpower any rules that match in stylesheet1.css and stylesheet2.css.
Embedded Style Tags
We’ve all seen the embedded style tags in documents. This is excellent if you have one page sites or the rare occasion that you need to style one single element on any given page and not throughout the site. Embedded style tags only apply CSS rules to the document which they are within. Also, like external style sheets they need to be placed in the head tag of the document. Embedded style tags will overwrite and over power and stylesheets that are connected externally. As the embedded style tag is more specific to the document.
Basic Implementation
Inline Styles
Probably the most shunned of the CSS implementations is the Inline style. If you have ever used a auto-site-builder solution like go daddys page builder or homestead sites i’m sure you’ve seen the mess of inline styles that are input into the HTML code throughout the site.
Inline code is the most specific of all of the CSS implementations because it is applied directly to the HTML element that you would like to style. These rules will only style the element in which it resides in and is applied to that element via style attribute on the tag itself. Though inline styles may seem tempting in many situations it is best to always use external stylesheets for separation of content and style.
In the case that you are building an HTML email template inline styles are the preferred method of styling as external style sheets are not able to be used. So there is an excellent use case for these guys.
Basic Implementation
This will be red
No matter what style rules reside in any of the embedded tags, or external stylesheets the inline style will be used in this case on this paragraph
I hope the above examples can shine a little bit of light on why you cannot get the text to turn gray on that copyright text at the bottom of the page.
