What is the order of styles?
In CSS, it is important to understand what type of style will be set precedent
This is important as you may be trying to style an element inline, and someone may be trying to style the same element in an external stylesheet.
Not knowing where the styles are recognized in what order can leave a few headaches when trying to create websites. Especially when multiple people are editing the website.
The order of importance by the browser includes
- Browser default styles automatically receive the lowest value of consideration
- External stylesheets receive low consideration because they are not even in the same document as the element being styled.
- Embedded styles receive much higher consideration for being in the same document as the element being styled.
- Inline styles are in the page
<body>
and therefore are part of the styled element, receiving the highest value of specificity.
Specificity is the process that is used to determine which rules take precedence in CSS when several rules could be applied to the same element. One of the principles of Specificity states that a style rule gains dominance the closer it is found to the element being styled
{post_title}
{post_content}
{associated_insight_resource.post_title}
{associated_insight_resource.resource_link}
{associated_insight_resource.insight_type }