Definitive guide to CSS styling orderInline 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

Show Properties     Effects

Add shadow, bevel or blur effect to make amazing graphics

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

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