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)