Set custom font sizes for Obsidian default theme

obsidian.css

:root
{
    --font-size-normal:              19px;
    --font-size-code:                15px;
    --font-size-side-dock:           15px;
    --font-size-side-dock-title:     18px;
    --font-size-status-bar:          12px;
    --font-size-h1:                  38px;
    --font-size-h2:                  30px;
    --font-size-h3:                  24px;
    --font-size-h4:                  21px;
    --font-size-h5:                  20px;
    --font-size-h6:                  19px;
} 


/* normal text outside of headings and code of editor */
.cm-s-obsidian, .mod-single-child .cm-s-obsidian {
  font-size: var(--font-size-normal);
}

/* normal text outside of headings and code of preview */
.markdown-preview-view, .mod-single-child .markdown-preview-view {
  font-size: var(--font-size-normal);
}

/*preview padding too small*/
.theme-light .markdown-preview-view, .theme-light .mod-single-child .markdown-preview-view {
  font-size: var(--font-size-normal);
}

/* code blocks in preview */
pre code {
  font-size: var(--font-size-code) !important;
}

/* font-size of in-line block for preview */
.markdown-preview-view code
{
  font-size: var(--font-size-code);
}

/* Editor CodeBlock TEXT Appearance */
.cm-s-obsidian pre.HyperMD-codeblock {
  font-size: var(--font-size-code) !important;
}

.search-result-file-matches, .search-empty-state {
  font-size: var(--font-size-side-dock);
}

.workspace-leaf-content[data-type="tag"] .tag-pane-tag-count,
.workspace-leaf-content[data-type="tag"] .tag-pane-tag-text {  
  font-size: var(--font-size-side-dock);
}

.workspace-leaf-content[data-type="backlink"] .search-result-file-matches {
  font-size: var(--font-size-side-dock);
}

/* search result in backlink or file search */
.search-result-file-title {  
  font-size: var(--font-size-side-dock-title) ;
}

/*status-bar*/
.status-bar{
  font-size: var(--font-size-status-bar);
}

/* headings for editor and preview */
.cm-header-1, .markdown-preview-view h1
{
  font-size: var(--font-size-h1);
}

.cm-header-2, .markdown-preview-view h2
{
  font-size: var(--font-size-h2);
}

.cm-header-3, .markdown-preview-view h3
{
  font-size: var(--font-size-h3);
}

.cm-header-4, .markdown-preview-view h4
{
  font-size: var(--font-size-h4);
}

.cm-header-5, .markdown-preview-view h5
{
  font-size: var(--font-size-h5);
}

.cm-header-6, .markdown-preview-view h6
{
  font-size: var(--font-size-h6);
}

Can you please do an actual sample video on this? I am not a programmer, and it's difficult for me even to change the font size (including the margin) of the workspace-leaf. I don't know why it's not just included in the setting of Obsidian. This is the problem of too much customizability for non-technical people. Thanks.