Lección 2: Estructura

sintaxis


selector {
    estilo: valor;
}

En el siguiente ejemplo cambiamos el tamaño de la tipografía en todos los párrafos.


p {
    font-size: 3rem;
}

Se dará el caso de varios valores u otros estilos.


p {
    font-size: 3rem;
    border: 1px solid black;
}

comentarios


/* Estilos de tabla */
table {
    /* Añade un margen izquierdo de 2.5rem */
    margin-left: 2.5rem;
    /* color: pink */
}

style

Si deseas incrustar los estilos en el propio documento HTML puedes hacerlo dentro de <head> con la etiqueta <style>.

<head>
  <style>

  body {
      color: yellow;
  }

  </style>
</head>

El CSS puede estar vinculado desde un archivo externo. Dentro de <head> usa <link> con la ruta relativa al fichero.

<head>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

En el siguiente ejemplo podemos ver un caso real de una sencilla web que hace uso de 2 normalizadores.

<head>
    <!-- Normalizador normalize.css: Equilibra los estilos entre los Navegadores -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <!-- Normalizador symbiosis.css: Arregla problemas en versiones de Smartphone -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/sapps-studio/symbiosis-css/symbiosis.min.css">
    <!-- Tú CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

Un normalizador es un conjunto de CSS que modifica los estilos generales para equilibrar el diseño en todos los navegadores evitando discrepancias visuales.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario