Inline atrributesStyle sheetOrderingOrderingOrderingClassesTagsIDEmbedded & External style sheetStyle sheetInline stylesImportant keywordInheritanceStyling inherited from nearest parent elementChild styling (if exist) has higher priority even though inherited parent styling contains important keywordInherited styles has the lowest priority among styling methods<div style="color:red"> <span>This will be in red</span></div>Ordering, specificity and important keyword does not apply to SVG inline attributes<svg stroke="red"></svg>For each style sheet, ordering rules applies<style>#my_id { color: red }</style><style>#my_id { color: blue }</style>Blue will be appliedSpecificity has higher priority than ordering, with tags, classes and ID in ascending priority.#my_id { color: green; }.myClass { color: blue; }p { color: red; }Green will be applied because ID specificity has the highest priority, superceding ordering rules.Within specificity, style sheets, inline styles and important keyword, ordering rules applies from left to right and top to bottomSpecificityp { color: red; color: blue; }Blue will be appliedInline styles has higher priority than style sheets, and within inline styles, ordering rules applies.<p style="color: red" style=" color: blue">Blue will be appliedImportant keyword in inline styles has higher priority than the same keyword in style sheets.The definitive guide to CSS styling orderIncludes CSS stylings for SVGvecta.ioDiagramming for teamsInline styles