Блог

Я хочу уменьшить размер шрифта первого div и увеличить размер шрифта второго div.

 top1 { 
    transform: translateX(-7em);
    font-size: 1.2em !important ;}

#txt{
    margin: 10px;
    border-radius: 9px;
    backdrop-filter: blur(8 px) saturate(171%);
    -webkit-backdrop-filter: blur(5px) saturate(171%);
    border: 1px solid ;
    border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
    box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
    -webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
    -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
    background:rgba(238, 221, 221, 0.85);
    padding: .5em 1em ;
    color: rebeccapurple;
    font-size: .7em;
}
 

https://codepen.io/tiwari_ashuism/pen/WNOjbgO

Оба элемента div имеют одинаковый идентификатор=»txt», и этот идентификатор имеет размер шрифта 0,7 em, который вам нужно удалить. Используйте классы для применения разного размера шрифта для каждого класса div.

     #txt{
    margin: 10px;
    border-radius: 9px;
    backdrop-filter: blur(8 px) saturate(171%);
    -webkit-backdrop-filter: blur(5px) saturate(171%);
    border: 1px solid ;
    border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
    box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
    -webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
    -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
    background:rgba(238, 221, 221, 0.85);
    padding: .5em 1em ;
    color: rebeccapurple;
}

.top1 { 
    transform: translateX(-7em);
    font-size: 1.5em !important ;
}

.top2 {
    transform: translateX(7em);
    font-size: 1.1em !important;
}