An external style sheet contains all of the CSS styling for your website in a single separate document. External style sheets are the norm for most modern websites, particularly dynamic sites, as it allows styles to be changed quickly and easily, and allows websites to completely change their style just by referencing a new style sheet.
Sites that use external CSS need to reference the style sheet in the head section of every HTML page using the <link> element:
The external style sheet can be created in any appropriate text editor, and as long as the CSS is written correctly, and the document is saved as a .css file, you should have few problems with this method.
An internal style sheet is one which is inserted into the <head> section of a HTML page using the <style> element. If you have a large, multi-page website, this method is only really useful if you want to style a single page differently to the rest of your site. If you want to edit the style of pages that use an internal style sheet, you will need to do so manually for each page. A (very) simple internal style sheet might look like:
Inline styles are used to apply unique styling to a single HTML element. The HTML element is edited to have the style attribute, properties and values inside the opening tag. You can add any CSS property in this way, but adding more than a couple of properties inline can be both unwieldy and problematic when trying to change website style later.
Inline styles lose many of the advantages of a style sheet by mixing content with presentation, so use this method sparingly, if at all.
It is possible to have a single page with external, internal and inline styles. This isn’t good practice, but it does happen. There could be a situation where the same element (h1 for example) is styled in three different ways on the same page, which would obviously cause some issues in how the element looks.
To avoid this potential problem, CSS uses a cascading priority system, so that last style read by the browser (reading from top to bottom) is the one that is used. In the example above, the inline style would have the highest priority, so the h1 element would be blue, with a 10px left margin.
If there was no inline style, and assuming <h1> was also styled in the external style sheet, the external style would have priority because it is lower in the <head> section that the internal style.
1. Inline Styles
2. External and Internal Styles
3. Browser default
Previously – Learn about CSS syntax and how CSS is written