Lección 2: Sintaxis | Curso CSS

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?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario