Duda ?????

como se hace ? Declaracion de nombres para clases Declaracion de nombres para variables

        ******<h3 class="titulo-principal"> Nuestra Ubicación </h3>******
        <p>Nuestro establecimiento está ubicado en el corazón de la ciudad</p>

        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3731.0213448077006!2d-105.27253941249168!3d20.74992893714727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x84214708c26a6dc7%3A0x3578edc08be807e1!2sCalle%20Mar%20del%20Nte.%20350%2C%20Fraccionamiento%20Altavela%2C%2063735%20Nay.!5e0!3m2!1ses-419!2smx!4v1684243401968!5m2!1ses-419!2smx" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    </section>

    <section class="diferenciales">

    ******    <h3 class="titulo-principal">Diferenciales</h3>******

        <ul>
            <li class="items"> Atención érsnalizada a los clientes</li>
            <li class="items"> Espacio diferenciado</li>
            <li class="items"> Localización</li>
            <li class="items"> Profecionales calificados</li>
        </ul>

       ****** <img src="diferenciales.jpg" class="imagenDiferenciales">******

    </section>

    <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>

</main>

<footer>
    <img src="imagenes/logo-blanco.png">
    <p class="copyright">  &copy Copyright Barberia Alura - 2023 </p>
</footer>


/*CSS para nuestro home*/

.banner{ width: 100%; }

. titulo-principal{ text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; }

.principal p{ margin: 0 0 1em; }

.principal strong{ font-weight: bold; }

.principal em{ font-style: italic; }

.utensilios{ width: 120px; float: left; margin: 0 20px 20px 0; }

.mapa{ padding: 3em 0; }

.mapa p{ margin: 0 0 2em; text-align: center;

}

.imagenDiferenciales{ width: 60%; }

.video{ width: 560px; margin: 1em auto; }