html - Set Default Font Style for Specific Tags in Portion of Page -
what best, maintainable , readable approach setting css property default given tags in portion of page low specificity. currently, have page takes global default font styling html selector in separate global stylesheet. there large portion of page (which has class dash) want have different default font style.
the main issue setting .dash h1 { font.... } has high specificity. every time want set font style element descendant of .dash, need refer .dash. since working around modular design, each component developed independently, bad idea. worse solution set !important or use id, obvious reasons. obviously, don't run issue when setting fonts html h1, or other tag since tags have lower specificity classes.
is there simple low-specificity approach setting css property tags descendants of element high in dom, selected class such can overwritten applying font properties , element selected class?
you can set font properties rule .dash { font ... } , set font properties elements inside element styled, because each element gets font properties declarations apply it, rather parent or other ascendant.
for example, if have
<div class=dash> content <h2>some heading</h2> content </div> and set
.dash { font-family: cambria } then there no problem in setting
h2 { font-family: calibri } without referring dash class. h2 element gets font family latter rule, quite independently of rule applies parent.
Comments
Post a Comment