4

Estoy estudiando y aprendiendo sobre este maravilloso mundo del código y ¡¡es genial!! Sin embargo tengo una complicación que no logro resolver.

Estoy usando dos fuentes: Fjalla One y Source Sans Pro.Las cuales están declaradas para los títulos, sin embargo por alguna razón que desconozco no me está respetando la jerarquía de cascada (según tengo entendido la última indicación que se declare es la que se aplicará al código). Por ejemplo: el título "HOLA! SOY LEONIDAS ESTEBAN" aparece con la fuente Fjalla One mientras que en "PROYECTOS DESTACADOS" aparece con Source Sans Pro.

Por qué me pasa esto?

Gracias por su apoyo :D

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&display=swap');
body {
    font-family: 'Source Sans Pro', sans-serif;
    /* margin: 0px; */
    width: 1000px;
    margin: auto;
}

h1 {
    font-family: 'Fjalla One', Times, serif
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Fjalla One, Times, serif
}

ol {
    margin: 0px;
}

h1 {
    font-size: 40px;
    line-height: 1.5;
    font-weight: normal;
    letter-spacing: -.2px;
    text-transform: uppercase;
    font-style: italic;
    text-decoration: line-through;
    color: #fff;
    margin: 0px;
    /* background: -webkit-linear-gradient(#ffffff, #d8d8d8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    text-decoration-color: blue;
    margin: 0px;
}

h1 strong,
{
    color: #2E71F8;
    text-transform: uppercase;
}

h2 {
    color: #2E71F8;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    margin-bottom: 35px;
}


/* h1 strong {
    color: #026ff;
} */

.header {
    background-color: #1b2127;
    color: #fff;
    display: flex;
    justify-content: space-between;
    height: 70px;
}

.menu {
    height: inherit;
}

.header ol {
    display: flex;
    height: inherit;
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header ol li {
    height: inherit;
}

.header a {
    display: flex;
    align-items: center;
    height: inherit;
    padding: 0 10px;
}

figure {
    margin: 0
}

.header a {
    color: #fff;
    text-decoration: none;
}

.hero {
    height: 300px;
    background-image: url(../images/hero.jpg);
    background-color: #1b2127;
    background-size: 500px 300px;
    background-repeat: no-repeat;
    background-position-x: right;
    display: flex;
    align-items: center;
}

.hero strong {
    color: #2E71F8;
}

.portfolio {
    background-color: #fafafa;
    padding: 20px;
}

.project {
    border: 1px solid #9b9b9b;
    border-radius: 10px;
    margin-bottom: 50px;
    margin: 50px;
    margin: 10px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 5px 5px #d2d2d2;
    background: #ffffff;
    /* background: url(../img/back_2.jpg); */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-title {
    text-transform: uppercase;
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 10px;
}

.project-details {
    width: 500px;
    margin-bottom: 10px;
    margin-top: 0;
}

.projecet-description {
    font-size: 20px;
}

.project-imageContainer {
    width: 500px;
}

.project-cuorse,
.project-date {
    margin: 10px 0
}

.project strong {
    font-family: 'Fjalla One', Times, serif
}

.event-list-title {
    margin-left: 20px;
}

.event-list {
    display: flex;
    flex-wrap: wrap;
}

.event {
    /* border: 1px solid red; */
    margin: 10px;
    border-radius: 10px;
    width: 480px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f4fbff
}

.event-imageContainer img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.event-title {
    text-transform: uppercase;
    font-size: 25px;
    margin: 20px 0;
    color: #333333;
}

.event-detail {
    margin: 20px 40px;
    margin-top: -40px;
    padding: 20px;
    padding-top: 10px;
    background: #ffffff;
    /* background: red; */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.event-description {
    text-align: left;
}

.event-url {
    padding: 10px 50px;
    border-radius: 10px;
    border: 1px solid #0672f9;
    text-decoration: none;
    font-size: 20px;
    color: #0672f9;
    display: block;
    margin: 20px 50px;
}

.footer {
    background: #1b2127;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 0 50px 0 50px;
}

.footer img {
    vertical-align: middle;
}

.footer a {
    color: #fffb00;
}

a:focus {
    color: #1b2127;
}

.flexbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between
}

.box {
    width: 50px;
    height: 50px;
    margin: 20px;
    border: 1px solid red;
    flex-shrink: .1;
}
<!DOCTYPE html>
<htmllang="es">

    <head>
        <meta charset="UTF-8" />
        <title>Leonidas Esteban</title>
        <link rel="icon" type="image/png" href="images/favicon.png" />
        <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Source+Sans+Pro&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="../style/normalize.css">
        <link rel="stylesheet" href="style/estilos.css">
    </head>
    <body>
        <div class="flexbox">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>

        <header class="header">
            <figure class="logo">
                <img src="images/logo.png" alt="Logo de http://leonidasesteban.com" />
            </figure>
            <nav class="menu">
                <ol>
                    <li>
                        <a class="link" href="./portafolio/index.html">Portafolio</a>
                    </li>
                    <li>
                        <a class="link" href="#eventos">Experiencia</a>
                    </li>
                    <li>
                        <a class="link" href="#contacto">Trabajemos <br> juntos</a>
                    </li>
                </ol>
            </nav>

        </header>
        <section class="hero">
            <h1>
                Hola! Soy <strong>Leonidas Esteban</strong> <br />Desarrollador <strong>Javascript</strong> con <br> pasión por la <strong>enseñanza</strong>
            </h1>
            <!-- <img src="images/hero.jpg" width="500" height="300" alt="imagen principal del sitio"> -->
        </section>
        <section class="portfolio" id="portafolio">
            <h2>Portafolio (Proyectos Destacados)</h2>
            <article class="project">
                <div class="project-details">
                    <h3 class="project-title">Platzi Video</h3>
                    <h6 class="project-cuorse">React Native / React</h6>
                    <p class="project-date"><small><strong>Fecha:</strong> 01/07/2018</small></p>
                    <p class="project-url"><small><strong>Pueds verlo en:</strong> www.platzi.com/native</small></p>
                    <p class="projecet-description">Platzi Video fue el resultado de 3 meses de trabajo para crear la mejor app para enseñar el funcionamiento de React y React Native. Desde crear un vista-detalle, hasta patrones avanzados de nevegación, este proyecto ha sido el ejemplo
                        de futuros creadores de aplicaciones multiplataforma</p>
                </div>
                <figure class="project-imageContainer">
                    <img class="project-image" width="500" src="images/platzi-video-react-native.png" alt="prouyecto del curso de React Native">
                </figure>
            </article>
            <article class="project">
                <div class="project-details">
                    <h3 class="project-title">Platzi Video</h3>
                    <h6 class="project-cuorse">React Native / React</h6>
                    <p class="project-date"><small><strong>Fecha:</strong> 01/07/2018</small></p>
                    <p class="project-url"><small><strong>Pueds verlo en:</strong> www.platzi.com/native</small></p>
                    <p class="projecet-description">Platzi Video fue el resultado de 3 meses de trabajo para crear la mejor app para enseñar el funcionamiento de React y React Native. Desde crear un vista-detalle, hasta patrones avanzados de nevegación, este proyecto ha sido el ejemplo
                        de futuros creadores de aplicaciones multiplataforma</p>
                </div>
                <figure class="project-imageContainer">
                    <img class="project-image" width="500" src="images/platzi-video-react-native.png" alt="prouyecto del curso de React Native">
                </figure>
            </article>
        </section>

        <h2 class="event-list-title">Más sobre mi experiencia</h2>

        <section id="eventos" class="event-list">
            <article class="event">
                <figure class="event-imageContainer">
                    <img class="event-image" src="images/platzi-conf.jpg" width="500" />
                </figure>
                <div class="event-detail">
                    <h3 class="event-title">PlatziConf México 2018</h3>
                    <p class="event-description">El evento más grande sobre gente que quiere aprender más de internet. En esté evento te comparto como tener una vida de constante aprendizaje.</p>
                    <a class="event-url" href="https://www.youtube.com/watch?v=BIS7cWGgJg0" target="_blank">Ver
                        Plática</a>
                </div>
            </article>

            <article class="event">
                <figure class="event-imageContainer">
                    <img class="event-image" src="images/platzi-conf.jpg" width="500" />
                </figure>
                <div class="event-detail">
                    <h3 class="event-title">PlatziConf México 2018</h3>
                    <p class="event-description">El evento más grande sobre gente que quiere aprender más de internet. En esté evento te comparto como tener una vida de constante aprendizaje.</p>
                    <a class="event-url" href="https://www.youtube.com/watch?v=BIS7cWGgJg0" target="_blank">Ver
                        Plática</a>
                </div>
            </article>

            <article class="event">
                <figure class="event-imageContainer">
                    <img class="event-image" src="images/platzi-conf.jpg" width="500" />
                </figure>
                <div class="event-detail">
                    <h3 class="event-title">PlatziConf México 2018</h3>
                    <p class="event-description">El evento más grande sobre gente que quiere aprender más de internet. En esté evento te comparto como tener una vida de constante aprendizaje.</p>
                    <a class="event-url" href="https://www.youtube.com/watch?v=BIS7cWGgJg0" target="_blank">Ver
                        Plática</a>
                </div>
            </article>

            <article class="event">
                <figure class="event-imageContainer">
                    <img class="event-image" src="images/platzi-conf.jpg" width="500" />
                </figure>
                <div class="event-detail">
                    <h3 class="event-title">PlatziConf México 2018</h3>
                    <p class="event-description">El evento más grande sobre gente que quiere aprender más de internet. En esté evento te comparto como tener una vida de constante aprendizaje.</p>
                    <a class="event-url" href="https://www.youtube.com/watch?v=BIS7cWGgJg0" target="_blank">Ver
                        Plática</a>
                </div>
            </article>
        </section>

        <section class="contact" id="contacto">
            <form class="from-email" action="/suscripcion/">
                <h3>¿Creamos algo juntos?</h3>
                <input type="text" placeholder="Déjame tu email" id="email">
                <button>Enviar</button>
            </form>
        </section>
        <footer class="footer">
            <div>
                <p>Curso de Desarollo web online 2018
                    <img src="images/platzi.png" width="75" alt="">
            </div>
            </p>

            <div>
                <p>Designed with &#60;3 by <a href="https://twitter.com/thespianartist">@thespianartist</a>
            </div>
            </div>
        </footer>
    </body>
    </html>

1
  • 2
    No es la última la que se aplica, sino la que más prioridad tenga. En igualdad de prioridades, sí será la última el 24 sep. 2019 a las 13:07

1 respuesta 1

4

Una buena manera de ver mejor las cosas es usando el inspector de elementos que pone a nuestra disposición las herramientas de desarrollador de los navegadores. Inspeccionando tu <h1> vemos lo siguiente:

CSS

h1 {
    f̶o̶n̶t̶-̶f̶a̶m̶i̶l̶y̶:̶ ̶'̶F̶j̶a̶l̶l̶a̶ ̶O̶n̶e̶'̶,̶ ̶T̶i̶m̶e̶s̶,̶ ̶s̶e̶r̶i̶f̶;̶
}

h1, h2, h3, h4, h5, h6 {
    font-family: Fjalla One, Times, serif;
}

h1 {
    font-size: 40px;
    line-height: 1.5;
    font-weight: normal;
    letter-spacing: -.2px;
    text-transform: uppercase;
    font-style: italic;
    text-decoration: line-through;
    color: #fff;
    margin: 0px;
    text-decoration-color: blue;
    margin: 0px;
}

Esto es un claro ejemplo de como se aplica el CSS en cascada, ya que primero defines un font-family con el selector h1 {...} para posteriormente sobreescribirlo con h1, h2, h3, h4, h5, h6 {...}.

Aclarado el primer caso, analicemos el segundo. A ese elemento le afectan las siguientes reglas:

CSS

h1, h2, h3, h4, h5, h6 {
    f̶o̶n̶t̶-̶f̶a̶m̶i̶l̶y̶:̶ ̶'̶F̶j̶a̶l̶l̶a̶ ̶O̶n̶e̶'̶,̶ ̶T̶i̶m̶e̶s̶,̶ ̶s̶e̶r̶i̶f̶;̶
}

h2 {
    color: #2E71F8;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    margin-bottom: 35px;
}

Esto es otro claro ejemplo del funcionamiento de la cascada. Primero le das un font-family con la regla h1, h2, h3, h4, h5, h6 {...} para más abajo sobreescribirlo con la regla h2 {...}.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.