Lección 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>

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.

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario