Definitive guide to CSS styling orderInheritanceInline attributes (for SVG)Style sheetEmbedded / External stylesInline stylesImportant keywordStyle sheetInline stylesSpecificityTags (eg: p, div)Classes (eg: .MyClass)ID: (eg: #myID)OrderingOrderingOrderingStyling methodsStyling 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 methodsOrdering, selectors or specificity and important keyword does not apply to SVG inline attributesCSS codes to the right or bottom has higher priority and will be applied.p { color: red; color: blue; }Blue will be appliedp { color: red; color: blue;}Blue will be appliedp { color: red; }p { color: blue; }Blue will be appliedSpecificity has higher priority than ordering, with tags, classes and ID in ascending priority.#myID { color: green; }.MyClass { color: blue; }p { color: red; }Element will be styled with green because ID specificity has the highest priority, superceding ordering rules.Within specificity, ordering rules still applies.#myID { color: red; }#myID { color: blue; }Blue will be applied.<style> #myID { color: red }</style><style> #myID { color: blue }</style>Blue will be appliedFor each style, ordering rules continue to apply, from left to right and top to bottom.Inline 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


Use Vecta templates to present your ideas faster


Diagramming for teams
Save an editable copy to my account.
Edit stencil
Share stencil
Share plugin
Choose a channel to share the link

Create team
  • Loading
Edit Profile
Please select a destination folder
    Vecta Help
    Export SVG
    Export Image
    Export PDF