Css specificity

The browsers determines which css rules to apply depending on

CodePudding user response：

Use :root to set the initial size as 16px. We can do further styling using rem as it is going to use relative font size. If we change the :root font size from 16 to 18 and we use rem then it will automatically update every other font size for your h1 to h6 and p tags. To change this we can use JavaScript. All we need is a click event listener attached to the buttons and pass the required font size as '18px' or '24px'.

in brief:

• define :root with initial font size
• add javascript function to change the :root font size
• use rem wherever possible in css

const root = document.querySelector(':root');

const setFontSize = (fontSize) => {
  root.style.fontSize = fontSize;
}

:root {
  font-size: 16px;
}

/* 1.250 Scale Factor*/
.main_container > h1 {
  font-size: 1.953125rem; /* (1 * 1.25^3) */
}

.main_container > h2 {
  font-size: 1.5625rem; /* (1 * 1.25^2) */
}

.main_container > h3 {
  font-size: 1.25rem; /* (1 * 1.25) */
}

.main_container > h4 {
  font-size: 1rem;
}

.main_container > h5 {
  font-size: 0.8rem; /* (1 / 1.25) */
}

.main_container > h6 {
  font-size: 0.64rem; /* (1 / 1.25^2) */
}

.main_container > p {
  font-size: 1rem;
}

<button  onclick="setFontSize('16px')">Set 16px Typography</button>
<button  onclick="setFontSize('18px')">Set 18px Typography</button>

<div >
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

CodePudding user response：

You can add and remove classes based on your click on the buttons. I have just come up with this solution.

const btnSixteen = document.querySelector('.sixteen');
const btnEighteen = document.querySelector('.eighteen');
const mainContainer = document.querySelector('.main_container');

btnSixteen.addEventListener('click',()=>{
  mainContainer.classList.remove('eighteenBase');
  mainContainer.classList.add('sixteenBase');
});

btnEighteen.addEventListener('click',()=>{
  mainContainer.classList.remove('sixteenBase');
 mainContainer.classList.add('eighteenBase');
})

/*16px Major Third 1.250 Scale Factor*/
.main_container.sixteenBase > h1 {
  font-size: 31.25px;
}

.main_container.sixteenBase > h2 {
  font-size: 25px;
}

.main_container.sixteenBase > h3 {
  font-size: 20px;
}

.main_container.sixteenBase > h4 {
  font-size: 16px;
}

.main_container.sixteenBase > h5 {
  font-size: 12.8px;
}

.main_container.sixteenBase > h6 {
  font-size: 10.24px;
}

.main_container > p {
  font-size: 16px;
}

/*18px Major Third 1.250 Scale Factor*/
.main_container.eighteenBase > h1 {
 font-size: 35.16px;
}

.main_container.eighteenBase > h2 {
 font-size: 28.13;
}

.main_container.eighteenBase > h3 {
  font-size: 22.5px;
}

.main_container.eighteenBase > h4 {
 font-size: 18px;
}

.main_container.eighteenBase > h5 {
 font-size: 14.4;
}

.main_container.eighteenBase > h6 {
  font-size: 11.52;
}

.main_container > p {
  font-size: 18px;
}

<button >Set 16px Typography</button>
<button >Set 18px Typography</button>

<div >
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

CodePudding user response：

This kind of thing is already provided for in the CSS specifications, it is the relative units. here you have to use em unit, --> all font- sizes will be relative to their parent

doc : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

sample code:

function set_font_size_big(test)
  {
  document.querySelectorAll('.main_container').forEach( el =>
    el.classList.toggle('big',test))
  }

.main_container      { font-size  : 16px;  }
.main_container.big  { font-size  : 18px;  }

.main_container > h1 { font-size: 1.95em; }
.main_container > h2 { font-size: 1.56em; }
.main_container > h3 { font-size: 1.25em; }
.main_container > h4 { font-size: 1em;    }
.main_container > h5 { font-size: 0.8em;  }
.main_container > h6 { font-size: 0.64em; }

<button onclick="set_font_size_big(false)"> normal (16px) </button>
<button onclick="set_font_size_big(true)"> big (18px) </button>

<div >
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

But the best would be to use a CSS variable, which saves you from having to add / remove the big class on each of your .main_container elements doc : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

and which gives you more possibilities, like here with a range type input

const
  Root            = document.documentElement
, fontSizRange    = document.querySelector('#font_size_range')
, fontSizRangeVal = document.querySelector('#font_size_range   label')
, sizelabel = 
  { 14 : 'small'
  , 16 : 'normal'
  , 18 : 'big'
  , 20 : 'biggest'
  , 22 : 'enormous'
  }  ;

function setFontSize()
  {
  fontSizRangeVal.textContent = sizelabel[ fontSizRange.value ]
  Root.style.setProperty('--mc_f_size', fontSizRange.value   'px' )
  }

  setFontSize()  // init
fontSizRange.oninput = setFontSize
 

:Root { --mc_f_size: 16px; }

.main_container  { font-size : var(--mc_f_size); }

.main_container > h1 { font-size: 1.95em; }
.main_container > h2 { font-size: 1.56em; }
.main_container > h3 { font-size: 1.25em; }
.main_container > h4 { font-size: 1em;    }
.main_container > h5 { font-size: 0.8em;  }
.main_container > h6 { font-size: 0.64em; }

<input type="range" id="font_size_range" min="14" max="22" step="2" value="16"><label></label>

<div >
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

PO comment: Last doubt, could I replace the range slider with buttons? I am trying to do this based on your example but I cannot.

function set_font_size( val )
  {
  document.documentElement.style.setProperty('--mc_f_size', val   'px' )
  }

:Root { --mc_f_size: 16px; }

.main_container  { font-size : var(--mc_f_size); }

.main_container > h1 { font-size: 1.95em; }
.main_container > h2 { font-size: 1.56em; }
.main_container > h3 { font-size: 1.25em; }
.main_container > h4 { font-size: 1em;    }
.main_container > h5 { font-size: 0.8em;  }
.main_container > h6 { font-size: 0.64em; }

<button onclick="set_font_size(16)"> normal (16px) </button>
<button onclick="set_font_size(18)"> big (18px) </button>

<div >
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

CodePudding user response：

as you have h1 to h6 tags defined in html, they have their own font-sizes. you don't have to add those styling in css file.

rather you can add two classes in css

.font16{ font-size: 16px }

.font18{ font-size: 16px }

and then apply those classes dynamically to the element for which you want to change font size.

eg:

const applyClassToElemets =(elements,className)=>{

elements.forEach(element=>element.classList.add(className))
}


const changeToSize18 = () =>{
const allH1Elements = document.querySelectorAll("h1"); 
applyClassToElemets(allH1Elements,font18)
}

const changeToSize16 = () =>{
const allH1Elements = document.querySelectorAll("h1"); 
applyClassToElemets(allH1Elements,font16)
}