Formato de una página web usando CSS#

  • 60 min | Última modificación: Mayo 14, 2022.

Página web sin formato#

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Estructura semantica</title>
  </head>
  <body>
    <header>
        Encabezamiento
    </header>
    <section>
        <h2>Titulo 1</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh velit, gravida
        sed diam a, consectetur cursus felis. Duis scelerisque congue efficitur. Duis nec lacus
        id nulla tempus commodo. Curabitur ut tincidunt mauris. Vivamus tincidunt risus augue,
        a egestas tellus sodales vitae. Fusce vitae felis eu tortor sodales gravida. </p>

        <p>Nulla eget condimentum nulla. Fusce pretium ornare lectus eu bibendum. Donec eros mauris,
        laoreet quis viverra id, lobortis vel dui.</p>

    </section>
    <section>

        <h2>Listas sin numeración</h2>

        <ul>
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
        </ul>

    </section>
    <section>

        <h2>Listas enumeradas</h2>

        <ol>
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
        </ol>

    </section>

    <footer>
        Pie de página
    </footer>


  </body>
</html>

html-04

Referencia al archivo de formato#

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <!--- vínculo al arhcivo ---->
    <link rel="stylesheet" href="style.css">
    <!--------------------------->

    <title>Estructura semantica</title>
  </head>
  <body>
    <header>
        Encabezamiento
    </header>
    <section>
        <h2>Titulo 1</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh velit, gravida
        sed diam a, consectetur cursus felis. Duis scelerisque congue efficitur. Duis nec lacus
        id nulla tempus commodo. Curabitur ut tincidunt mauris. Vivamus tincidunt risus augue,
        a egestas tellus sodales vitae. Fusce vitae felis eu tortor sodales gravida. </p>

        <p>Nulla eget condimentum nulla. Fusce pretium ornare lectus eu bibendum. Donec eros mauris,
        laoreet quis viverra id, lobortis vel dui.</p>

    </section>
    <section>

        <h2>Listas sin numeración</h2>

        <ul>
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
        </ul>

    </section>
    <section>

        <h2>Listas enumeradas</h2>

        <ol>
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
        </ol>

    </section>

    <footer>
        Pie de página
    </footer>

  </body>
</html>

Cambio del estilo de los títulos y los párrafos#

style.css

/* Selecciona todos los encabezamientos <h2> */
h2 {
    color: darkblue;
    font-size: 20px;
    font-family: arial;
}

/* Selecciona todos los párrafos */
p {
    color: darkgray;
}

css-02

Uso de identificadores#

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Estructura semantica</title>
  </head>
  <body>
    <header>
        Encabezamiento
    </header>
    <section>
        <!--- se agrega un identificador --->
        <h2 id='tituloinicial'>Titulo 1</h1>
        <!---------------------------------->

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh velit, gravida
        sed diam a, consectetur cursus felis. Duis scelerisque congue efficitur. Duis nec lacus
        id nulla tempus commodo. Curabitur ut tincidunt mauris. Vivamus tincidunt risus augue,
        a egestas tellus sodales vitae. Fusce vitae felis eu tortor sodales gravida. </p>

        <p>Nulla eget condimentum nulla. Fusce pretium ornare lectus eu bibendum. Donec eros mauris,
        laoreet quis viverra id, lobortis vel dui.</p>

    </section>
    <section>

        <h2>Listas sin numeración</h2>

        <ul>
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
        </ul>

    </section>
    <section>

        <h2>Listas enumeradas</h2>

        <ol>
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
        </ol>

    </section>

    <footer>
        Pie de página
    </footer>


  </body>
</html>

style.css

/* Selecciona todos los encabezamientos <h2> */
h2 {
    color: darkblue;
    font-size: 20px;
    font-family: arial;
}

/* Selecciona todos los párrafos */
p {
    color: darkgray;
}

#tituloinicial {
    background: gray;
}

css-02