Aplicación de Estilos

En este ejercicio transformaremos el documento que desarrollamos en el aprendizaje de las etiquetas HTML en un sitio moderno y responsivo, aplicándo estilos con CSS.

Podés visitar el sitio que desarrollaremos aquí. ↩

◆ Descargar Imágenes del Proyecto (.zip).
💻 Ver explicación en video de youtube.

sitio web

● Preparación

Paso 1

  1. ❖ Creamos una carpeta nueva desde el explorador de archivos.
  2. ❖ Descargamos desde este sitio web y pegamos dentro de esa carpeta las imágenes y el archivo index.html o usamos el del ejercicio de HTML puro.
  3. ❖ Creamos un archivo style.css
  4. ❖ Relacionamos el style.css con el index.html colocando la siguiente etiqueta en el head.
<link rel="stylesheet" href="style.css">

● Estilos generales

Paso 2

Siempre se quitan estilos que vienen por defecto y aplica una configuración inicial:

*{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    margin:0;
    padding: 0;
    box-sizing: border-box;

    text-decoration: none;
    list-style:none;
    color: currentColor;
}

css

Con solo aplicar esta configuración podemos ver muchos cambios.

css

● Estilos al Header

Paso 3

Dividimos la pantalla de visual studio code.

css

Cerrando el index.html de la primer ventana nos queda así:

css

Identificamos la etiqueta a la que aplicaremos los estilos.
Comenzamos con el header, en el style.css:
Iremos aplicando las propiedades de manera tal que se vea lo que estamos haciendo

css

header{
    padding: clamp(12px,3vw, 24px) 7%;

}

css

header{
    padding: clamp(12px,3vw, 24px) 7%;
    text-align:center;

}

css

header{
    padding: clamp(12px,3vw, 24px) 7%;
    text-align:center;

    position: sticky;
    top:0;
    background: white;
    border-bottom: 1px solid lightgray;

}

css

● Hijos del Header

Paso 4


header h1{

}

header > p{

}

header nav{

}

css

En el header > p, aplicamos el signo mayor, para que los estilos se apliquen únicamente a la etiqueta párrafo hijo directo del header y a ninguna otra.

header h1{
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -2px;
}

header > p{
    margin: 1.5rem auto 0;
    max-width: 40rem;
    color: gray;
}

header nav{
    margin-top:1.5rem;
}

css

Paso 5 - Los hijos y nietos del Nav

header nav ul{
    display: flex;
    justify-content: center;
    gap:1rem;
    flex-wrap: wrap;
 }

header nav ul li {
    
    padding: 1rem 2rem;
    border: 1px solid lightgray;
    border-radius: 2rem;
    box-shadow: 1px 1px 2px lightgray;
}

header nav ul li a{
    color:#666;
    transition: 0.2s linear;
}

header nav ul li:hover a{
    font-weight: 500;
}

css

css

css

css

● Estilos en el Main

Paso 6

Tenemos el elemento padre main y 9 hijos con algunos estilos compartidos. css

main{
    /* Esto se aplica a este elemento */
    width: min(1150px, 90%);
    margin:auto;
    padding: 4rem 0 7rem;

    /* Esto se aplica para ordenar los hijos */
    display: grid;
    gap:3.5rem;
}

css

A los hijos aplicamos el display grid, que se usa para dividir la pantalla en filas y columnas.
Por defecto, al no poner nada es una sola columna.
A su vez los hijos estarán separados entre sí por 3.5rem que equivale a 3.5*16px = 56px

Paso 7 -Las Section

Aplicamos los siguientes estilos:

main section{
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    transition: 0.2s linear;
}

main section:hover{
    transform: translateY(-6px);
}

css

● Los hijos de cada Section

Paso 8

Para que haya uniformidades, aplicamos el mismo estilo a todos los títulos y párrafos de sección.

main section h2 {
  font-size: 2rem;
  margin-bottom: 1.8rem;
  letter-spacing: -1px;
}

main section h3 {
  margin: 2rem 0 1rem;
  font-size: 1.3rem;
}

main section article {
  display: grid;
  gap: 1rem;
}

main section p {
  color: #444;
  line-height: 1.8;
}

main section strong {
  color: #111;
}

● Corrección Header

Paso 9

Muchas veces a medida que desarrollamos el documento web, advertimos cambios involutarios de comportamiento del documento.
Por ejemplo en este caso, al aplicarle estilos a las secciones, cuando hago scroll, éstas pasan por encima del header, en vez de por debajo.

Es por eso que vuelvo al selector header en style.css y agrego:

    header{
        padding: clamp(12px,3vw, 24px) 7%;
        text-align: center;

        position: sticky;
        top:0;
        background: white;
        border-bottom: 1px solid lightgray;
        
        z-index: 3;
    }

Es normal, tener que ir de manera salteada de una etiqueta a la otra y volver en el proceso de diseño.

● Las listas del Main

Para aplicarle estilo a las listas ul, ol y sus hijos li:

Paso 10

    main section ul,
    main section ol {
    margin-left: 1.8rem;

    }

    main section li {
    margin: 0.8rem 0;

    }
    main section  ul li {
    list-style-type: square;
    }
    main section  ol li {
    list-style: decimal;
    }

css css

● Aside y Blockquote

Vamos a realizar dos diseños, a modo de ejercicio. Lo normal sería un documento con estilo coherente.

Paso 11

main section aside {

  margin-top: 1.5rem;
  background: #f8f8f8;
  border-left: 4px solid black;
  padding: 1.25rem;
  border-radius: 0.75rem;
}

main section blockquote {

  margin: 1.25rem 0;
  padding: 1.5rem;
  background: #fafafa;
  border-left: 5px solid black;
  font-style: italic;
}

css

● La tabla y sus partes

Paso 12

Como tenemos una sola tabla no es necesario que indiquemos toda su ubicación, con usar el nombre de la etiqueta es suficiente. Afectaría a todas las tablas del documento. En general para la uniformidad, ese es precisamente el objetivo.

Pasar de este diseño (por defecto de html): css

a éste (diseñado con css): css

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;

  border-radius: 1rem;
}

caption {
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
  font-weight: 700;
}

thead {
  background: black;
  color: white;
}

th,
td {
  padding: 1.3rem;
  border: 1px solid #e5e7eb;
  text-align: left;
}

tbody tr:nth-child(even) {
  background: #fafafa;
}

tbody tr:hover {
  background: #f2f2f2;
}

css

css

● Imágenes

En la sección llamada Conclusión, tenemos una imagen. Debemos aplicarle estilos

Paso 13

main section#conclusion img {
  width: 100%;
  max-width: 700px;
  object-fit: cover;

  display: block;
  margin: 3rem auto;
  border-radius: 1rem;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}
  1. ❖ width:100%; suena a redundancia, pero es muy importante para que la foto sea FLEXIBLE y adopte el ancho de la etiqueta que lo contiene. Sin esa propiedad, queda en el ancho con el que viene la imagen y no se adapta a las diferentes pantallas.
  2. ❖ max-width:700px; es para evitar una foto gigante en pantallas grandes difusa.
  3. ❖ object-fit:cover; acomoda la imagen en todo el ancho sin deformarla.
  4. ❖ display:block; para que se muestre como elemento en bloque. La siguiente etiqueta renderiza abajo.
  5. ❖ margin:3rem auto; ya sabemos que la primer medida es arriba y abajo y la segunda a la derecha e izquierda. Como dice auto, entonces la centra.
  6. ❖ border-radius: 1rem; redondea los bordes.
  7. ❖ box-shadow genera una sombra en la imagen que se percibe como cierta profundidad.

css

● Botones

Para que exista uniformidad en el documento web, aplicamos un estilo general para todos los botones.
Lo identificaremos con la clase btn y prodrá usarse en la etiqueta que nos resulte conveniente.

...
 <button commandfor="miModal" command="show-modal" class="btn">¿Qué representa esta imagen?</button>
...
  <button class="btn">Cerrar</button>
...
 <button type="button" onclick="alert('¡Correcto! Tanto las necesidades personales como la escasez del bien o servicio y las preferencias individuales influyen en el valor.')" class="btn">Enviar respuesta</button>
...
  <a href="#introduccion" ><button class="btn">↑ Inicio</button></a>
  ...

Paso 14

.btn{
  cursor: pointer;
  width: fit-content;
  margin: 0 auto;

  border: none;
  padding: 1rem 2rem;
  border-radius: 0.7rem;
  background: black;
  color: white;
  font-size: 1rem;

  transition: 0.2s linear;
}

button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

● Modal - Dialog

En HTML la etiqueta que realiza esta función de dialog. Le damos estilo

Paso 15


    dialog {
    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(600px, 90vw);

    max-height: 85vh;
    overflow: auto;

    margin: 0;

    padding: 35px;

    border: none;
    border-radius: 20px;

    background: #fff;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    }

    dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    }

css

Ubicación del modal

Estas propiedades centran el modal en la pantalla

  1. ❖ position: fixed;

  2. ❖ top: 50%;

  3. ❖ left: 50%;

  4. ❖ transform: translate(-50%, -50%);

css

Propiedades propias del modal

  1. ❖ width: min(600px, 90vw);
  2. ❖ max-height: 85vh;
  3. ❖ overflow: auto;
  4. ❖ margin: 0;
  5. ❖ padding: 35px;
  6. ❖ border: none;
  7. ❖ border-radius: 20px;
  8. ❖ background: #fff;
  9. ❖ box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);

css

● Formulario

Le damos estilo al formulario que se encuentra en la penúltima sección

Paso 15

fieldset {
  border: 1px solid #e5e7eb;;
  border-radius: 1rem;
  padding: 2rem;
}

legend {
  font-weight: 700;
  padding: 0 0.7rem;
}

select {
  margin-top: 0.8rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  width: 20rem;
  max-width: 100%;
}

input[type='checkbox'] {
  transform: scale(1.2);
}

css

● Video - Audio

Paso 16

details {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1.2rem;
}

summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
}

audio,
video {
  width: 100%;
  margin-top: 1.2rem;
  border-radius: 0.5rem;
}

● Pie de página

Paso 17

footer {
  margin-top: 80px;
  padding: 60px 7%;
  background: #fafafa;
  border-top: 1px solid #e5e7eb;

  display: grid;
  gap: 18px;
  color: #666;
}

footer small {
  color: #999;
}

● Adaptaciones a otras pantallas

css

Las media querys



/* ===========================================
   RESPONSIVE 
=========================================== */

/* Tablets grandes */
    @media (max-width: 1024px) {
    main {
        width: 94%;
        padding: 50px 0 80px;
    }

    header {
        padding: 18px 4%;
    }

    section {
        padding: 35px;
    }

    header h1 {
        font-size: 2.5rem;
    }
    }

    /* Tablets */
    @media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    header {
        position: relative;
        padding: 20px;
    }

    header h1 {
        font-size: 2rem;
        text-align: center;
    }

    header > p {
        text-align: center;
        margin: auto;
        margin-top: 15px;
    }

    nav {
        margin-top: 25px;
    }

    nav ul {
        display: flex;

        align-items: stretch;

        gap: 5px;
    }

    nav li {
        width: fit-content;
        margin:0;
    }

    nav a {
        display: block;
        padding: 6px 10px;
        width: 100%;
    
        text-align: center;
    }

    main {
        width: 95%;

        gap: 35px;

        padding: 35px 0 70px;
    }

    section {
        padding: 30px 24px;
    }

    section h2 {
        font-size: 1.7rem;
    }

    section h3 {
        font-size: 1.2rem;
    }

    table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }

    img {
        width: 100%;

        height: auto;
    }

    audio,
    video {
        width: 100%;
        height: auto;
    }

    dialog {
        width: 92%;

        max-width: none;
    }
    }

    /* Celulares */
    @media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    body {
        line-height: 1.7;
    }

    header {
        padding: 18px;
    }

    header h1 {
        font-size: 1.6rem;

        letter-spacing: -1px;
    }

    section {
        padding: 22px 18px;

        border-radius: 14px;
    }

    section h2 {
        font-size: 1.45rem;
    }

    section h3 {
        font-size: 1.1rem;
    }

    p,
    li {
        font-size: 0.95rem;
    }

    button {
        width: 100%;

        padding: 16px;
    }

    select {
        width: 100%;
    }

    fieldset {
        padding: 20px;
    }

    aside,
    blockquote {
        padding: 16px;
    }

    th,
    td {
        padding: 12px;
    }
    }

    /* Pantallas muy grandes */
    @media (min-width: 1600px) {
    main {
        width: 1250px;
    }

    header {
        padding-left: 8%;
        padding-right: 8%;
    }
    }



Descargar Código del Proyecto (.zip).

←Ejercicio HTML puro
HTML-CSS Responsivo→