Use Vecta templates to present your ideas faster


Diagramming for teams
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 SVGvecta.io
Vecta Logo


vecta.io BETA
Save an editable copy to my account.
Edit stencil
Share stencil
Share plugin
Choose a channel to share the link

Multiple sessions detected
Upload fonts
Only file with .woff extension is allowed
    Add user
    Create team
    • Loading
    Edit Profile
    Please select a destination folder
      Vecta Help
      Export SVG
      Export Image
      Export PDF