Primeros pasos

CSS se puede aplicar a un documento HTML de diferentes formas. Una forma común es vincular un archivo CSS externo utilizando la etiqueta link en el encabezado del documento HTML.

<link rel="stylesheet" href="styles.css">
        

En este ejemplo, el archivo styles.css contiene las reglas de estilo CSS que se aplicarán al documento HTML.

Sintaxis de CSS

Las reglas de estilo en CSS se componen de un selector y un bloque de declaración.

            
                h1 {
                    color: red;
                    font-size: 24px;
                }
                p {
                    color: blue;
                    font-size: 16px;
                }
              
            

Selectores

Los selectores son parte integral de CSS y nos permiten apuntar a elementos específicos en un documento HTML para aplicar estilos.

            
          /* Selector de tipo */
          h1 {
              color: red;
          }

          /* Selector de clase */
          .mi-clase {
              color: blue;
          }

          /* Selector de id */
          #mi-id {
              color: green;
          }

          /* Selector de atributo */
          a[href="https://www.google.com"] {
              color: purple;
          }

          /* Selector de pseudo-clase */
          a:hover {
              text-decoration: underline;
          }
        
      

Comentarios

Los comentarios en CSS nos permiten documentar nuestro código y hacerlo más legible para otros desarrolladores.

Colores, valores y convenciones

Exploraremos cómo especificar colores en CSS utilizando diferentes métodos, como nombres de colores, valores hexadecimales, RGB y RGBA.

Border

La propiedad border en CSS nos permite agregar bordes alrededor de elementos HTML.

          .mi-elemento {
              border: 1px solid black;
          }
        

Border en profundidad

Profundizaremos en la propiedad border y exploraremos sus diferentes aspectos.

          .mi-elemento {
              border-radius: 10px;
              border-image: url('border.png') 30 round;
              border-top-width: 2px;
              border-bottom-width: 4px;
          }
        

Unidades de medida

En CSS, existen diferentes unidades de medida que podemos utilizar para especificar tamaños y distancias.

          /* Ejemplo de unidades de medida en CSS */
          .mi-elemento {
              width: 200px;
              height: 100px;
              font-size: 16px;
              margin: 10px;
              padding: 20px;
          }
        

Background

La propiedad background en CSS nos permite controlar el fondo de un elemento HTML.

            
          .mi-elemento {
              background-color: lightblue;
              background-image: url('background.png');
              background-size: cover;
              background-repeat: no-repeat;
          }
        
      

Overflow

El modelo de caja en CSS es fundamental para comprender cómo se dimensionan y colocan los elementos en una página web.

            
          .mi-elemento {
              margin: 10px;
              padding: 20px;
              overflow: hidden;
          }
        
      

Outline, text-align, text-decoration, text-shadow

Exploraremos diferentes propiedades CSS que afectan al texto en un documento HTML.

          .mi-elemento {
              outline: 2px solid red;
              text-align: center;
              text-decoration: underline;
              text-shadow: 2px 2px 2px black;
          }
        

Fuentes custom

Aprenderemos cómo utilizar fuentes personalizadas en una página web mediante el uso de la regla @font-face en CSS.

          @font-face {
              font-family: 'MiFuente';
              src: url('mifuente.ttf');
          }

          .mi-elemento {
              font-family: 'MiFuente', sans-serif;
          }
        

Links y sus estados

Los enlaces a son elementos importantes enuna página web, y CSS nos permite controlar su apariencia y comportamiento en diferentes estados.

            
  a:link {
  color: blue;
  }
  
  php
  
        a:visited {
            color: purple;
        }
  
        a:hover {
            text-decoration: underline;
        }
  
        a:active {
            color: red;
        }
      
    

Listas

Discutiremos cómo aplicar estilos a listas HTML utilizando CSS.

    .mi-lista {
        list-style-type: square;
        list-style-position: inside;
    }
  

Tablas

Exploraremos cómo aplicar estilos a tablas HTML utilizando CSS.

    .mi-tabla {
        border-collapse: collapse;
        border: 1px solid black;
    }

    .mi-tabla th, .mi-tabla td {
        border: 1px solid black;
        padding: 5px;
    }
  

Display, max-width y position

Aprenderemos sobre las propiedades CSS display, max-width y position.

    .mi-elemento {
        display: inline-block;
        max-width: 500px;
        position: relative;
    }
  

Float

La propiedad float en CSS nos permite colocar elementos HTML a la izquierda o a la derecha dentro de su contenedor.

    .mi-elemento {
        float: left;
        width: 50%;
    }

    .otro-elemento {
        float: right;
        width: 50%;
    }
  

Inline-block

La propiedad display: inline-block en CSS nos permite colocar elementos en línea como elementos en bloque.

    .mi-elemento {
        display: inline-block;
        width: 50%;
    }

    .otro-elemento {
        display: inline-block;
        width: 50%;
    }
  

Centrar un elemento

Discutiremos diferentes técnicas para centrar elementos horizontalmente y verticalmente en una página web utilizando CSS.

Proyecto

Resumen