CSS Sintaxis

El código SCC es un código que tiene unas normas de escritura, y es por eso cuando escribimos el código CSS tenemos que cumplir ciertas reglas.

La sintaxis CSS es una regla que consta principalmente de un selector y un bloque de declaración que modifican el estilo de un elemento HTML.

¿Cuál es la Sintaxis CSS?

Este tema de sintaxis CSS vamos a ver con un ejemplo para entenderlo mucho mejor.

A continuación te voy a explicar en palabras simples acerca de esta sintaxis CSS. El selector apunta a un elemento de HTML para diseñar su apariencia, y el bloque de declaración contiene una o más declaraciones separadas por punto y coma. Además, los bloques de separación están rodeados por dos llaves.

Ahora, cada declaración consta de un nombre de propiedad CSS y un valor, y estás separadas siempre por dos puntos.

Ejemplo de sintaxis CSS

En este ejemplo, todos los elementos <p> de un documento HTML estarán alineados al centro y el color de texto será rojo:


p {
  color: red;
  text-align: center;
}

<p>
   Estás aprendiendo de Sintaxis CSS en este tutorial.
</p>


Lenguaje del código: HTML, XML (xml)

Estás aprendiendo de Sintaxis CSS en este tutorial.

Explicando el ejemplo

  • p es un selector en CSS que apunta al elemento HTML <p> que deseamos diseñar su estilo.
  • color es una propiedad del elemento HTML <p>, y red es el valor de la propiedad para pintar el color texto, en este caso de color rojo.
  • text-align también es una propiedad del elemto HTML <p>, y center es el valor de la propiedad.

Más ejemplos


<!DOCTYPE html>
<html lang="es">

    <head>

        <meta charset="utf-8" />
        <title>Sintaxis CSS</title>

        <style>

            h1 { 
                color: blue; 
                font-size: 30px; 
                text-align: center;
            }

            h2 { 
                color: red; 
                font-size: 24px; 
                text-align: center;
            }

            p { 
                font-size: 18px; 
                color: darkmagenta; 
                background-color: greenyellow; 
                text-align: center;
            }


        </style>

    </head>

    <doby>

        <h1>Tutorial de Sintaxis CSS</h1>

        <p>Aprende acerca de Sintaxis CSS con este tutorial.</p>

        <h2>Más Ejemplos</h2>

        <p>Realiza más ejemplos de sintaxis CSS</p>

    </doby>

</html>


Lenguaje del código: HTML, XML (xml)