Voy a dedicar este capítulo para explicar la sintaxis general de los estilos CSS. Esto te ayudará a entender mucho mejor todo lo que vayamos creando en los próximos capítulos.
Partes de un estilo CSS
Los estilos CSS están compuestos por tres partes principales: selección, declaración y propiedad.
Parte de selección CSS
La parte selección, especifica sobre que elementos HTML se aplicará el estilo. Por ejemplo, si queremos aplicar un estilo a todos los elementos "p", la selección sería "p".
p {
}Parte de declaración CSS
La parte de declaración CSS es el conjunto de reglas que se aplicarán a los elementos seleccionados. Por ejemplo, si queremos cambiar el color de letra de todos los elementos "p" a rojo, la declaración sería:
p {
color: red;
}Propiedades CSS
La tercera parte es cada una de las partes de la declaración CSS.
Por ejemplo, "color: red;" es una propiedad.
Cada propiedad CSS finalizará con un punto y coma.
Esto, aplicado a una página html con uno o más párrafos, quedará de la siguiente forma:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página HTML básica</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>Partes de un estilo CSS</h1>
<p>Estás aprendiendo CSS con PC Máster.</p>
<p>Cualquier párrafo está en color rojo.</p>
</body>
</html>
El selector p, indica que el estilo solo se aplique a las etiquetas html <p>. Es por eso, que el título <h1> no se pone en color rojo.
Esto se aplica a tantos párrafos como tengamos, tanto si es uno, como si hay 200.
Se pueden tener tantas propiedades como necesitemos. Estas estarán envueltas entre las llaves de apertura y cierre.
Por ejemplo, si queremos que los párrafos, aparte de tener el color rojo, que estén en negrita, añadiremos debajo de la propiedad "color", otra más:
p {
color: red;
font-weight: bold;
}Entonces, para que nos entendamos bien, tenemos la parte de selección, que es la que afecta a los componentes de la página, como es p. Esta parte es en la que indicamos a qué elementos queremos afectar con la declaración.
Después, tenemos la declaración, que puede constar de una a varias propiedades. Declaración, es el conjunto de propiedades envueltas entre las llaves del selector.
Finalmente, las propiedades son las que indican que cosas queremos modificar. Por ejemplo, "color" es una propiedad CSS que modifica el color del texto como son los párrafos.
Cada propiedad tiene un valor. En el caso de la propiedad "color", el valor es "red".
Ahora, solo te queda empezar a aprender como funcionan las diferentes propiedades de CSS y empezarás a dominar lo básico de este lenguaje de diseño.
