2. Sintaxis

Todo estilo posee la siguiente estructura.


selector {
    estilo: valor;
}
  • selector: Indica que parte del documento aplicará el estilo o estilos.
  • estilo: Nombre del estilo.
  • valor: Valor del estilo.

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

Deben empezar por /* y terminar por */.


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

Etiqueta <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>

Etiqueta <link>

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">
    <!-- 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.

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Will you buy me a coffee?