Sintaxis CSS

La sintaxis CSS consta de 3 partes: un selector, una propiedad y un valor

Código de Sintaxis CSS

css

selector {
  property: value;
}

El selector es un elemento HTML al que deseas dar estilo. Puede ser cualquier etiqueta como <h1>, <p>, etc. Cada selector puede tener una o más propiedades.

La propiedad es el atributo de estilo de una etiqueta HTML. Las propiedades CSS son similares a los atributos HTML, pero se utilizan específicamente para el diseño (color, borde, etc.). Cada propiedad tiene su valor.

El valor se asigna a la propiedad. Por ejemplo, el valor de la propiedad color puede ser rojo o #F1F1F1.

Ejemplo de sintaxis CSS:

Ejemplo de sintaxis CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #1c87c9.</a>
  </body>
</html>

Try it Yourself »

Resultado

CSS Syntax

En el ejemplo anterior, la etiqueta <a> es el selector, color es la propiedad y #1c87c9 es el valor de la propiedad.

Como puedes ver, la propiedad y su valor se escriben dentro de las llaves y se separan por dos puntos. Nota: CSS ignora los espacios en blanco adicionales entre selectores, propiedades y valores.

Un selector también puede tener más de una propiedad, separadas por punto y coma.

Comentarios en CSS

Puedes usar comentarios en CSS para agregar explicaciones al código. No se muestran porque los navegadores los ignoran.

El inicio y el final de un comentario en CSS se especifican con /* y */, respectivamente:

Ejemplo de comentarios en CSS

css

/*This is some comment*/

Como puedes ver, el texto dentro de /* y */ no se muestra en los navegadores. Usa estos delimitadores para ocultar información de la página renderizada.

Ejemplo de comentarios en CSS:

Ejemplos de comentarios en CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        padding-left: 10px;
        font-size: 26px;
        line-height: 30px;
        /*color:red;*/
      }
      p {
        color: #1c87c9;
        /*font-size:25px;
        border:1px solid red;
        */
        padding: 10px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Comments</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Práctica

¿Cuál de las siguientes opciones describe la sintaxis CSS correcta?

Una declaración CSS consta de una propiedad y su valor, separados por dos puntos.Un bloque CSS está encerrado entre corchetes.Las propiedades y valores en una declaración CSS están separados por punto y coma.Los conjuntos de reglas CSS constan de un selector seguido de un bloque de declaración entre llaves.Los conjuntos de reglas CSS constan de un selector seguido de un bloque de declaración entre paréntesis.

Sintaxis CSS ​

Ejemplo de sintaxis CSS: ​

Resultado ​

Comentarios en CSS ​