Cascading Style Sheets (CSS) have three different types of integrations, inline, embedded, and external.
Inline Styles
<header style="color: pink">
I Am Inline
</header>Notice how we use the ‘style’ attribute inside the tag in order to style the text pink. The specificity weight for inline styles are heavier than anything except the !important selector. Please view article on CSS Selectors and their Weights for more information.
Embedded Styles
<style>
header {
color: pink;
}
</style>Notice how we use the <style> tag and use CSS within it. This can go inside your HTML document. The specificity weight of embedded styles are more than all selectors except !important, and less than inline style CSS.
External Style Sheets
<link rel="stylesheet" href="css/index.css" />Notice the link tag above. It is self closing and is put in our HTML doc. It links and gets all its CSS information from index.css, a file to be created and where we can create all our styling. The specificity weight of external style sheets are less than embedded, inline, and the !important selector.
