CSS - Sintaxis
Sintaxis CSS
Una regla CSS consta de un selector y un bloque de declaración. El selector apunta al elemento HTML que deseas estilizar. El bloque de declaración contiene una o más declaraciones separadas por punto y coma. Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Consejo: Ejemplo de Regla CSS
p {
color: red;
text-align: center;
}p es el selector, y { color: red; text-align: center; } es el bloque de declaración. El bloque de declaración contiene dos declaraciones: color: red; y text-align: center;.
Selectores CSS
Los selectores CSS se usan para seleccionar los elementos HTML que deseas estilizar. Los selectores CSS pueden ser nombres de elementos, nombres de clases, nombres de id o nombres de atributos.
- El selector de elemento selecciona elementos HTML basados en el nombre del elemento.
Consejo: Ejemplo de Selector de Elemento
p {
font-size: 16px;
}- El selector de id usa el atributo id de un elemento HTML para seleccionar un elemento específico. El id de un elemento es único dentro de una página, por lo que el selector de id se usa para seleccionar un elemento único. Para seleccionar un elemento con un id específico, escribe el carácter almohadilla (
#) seguido del id del elemento:
Consejo: Ejemplo de Selector de ID
#my-element {
background-color: blue;
}- El selector de clase selecciona elementos HTML con un atributo de clase específico. Para seleccionar elementos con una clase específica, escribe un punto (
.) seguido del nombre de la clase:
Consejo: Ejemplo de Selector de Clase
.my-class {
color: green;
}Bloques de Declaración CSS
Un bloque de declaración CSS está rodeado por llaves {} y puede contener múltiples declaraciones que terminan con punto y coma (;).
Una declaración consta de dos partes:
- Propiedad (nombre predefinido que se refiere a características estilísticas)
- Valor (asignado a las propiedades)
Consejo: Ejemplo de Múltiples Declaraciones
{
color: blue;
font-size: 12px;
width: 100%;
}color: blue;establece el color del texto.font-size: 12px;establece el tamaño de la fuente.width: 100%;establece el ancho relativo a su contenedor padre.
Al combinar selectores y bloques de declaración, puedes crear reglas que controlen cómo se ven tus páginas web.
Uso de CSS
El CSS se puede agregar a los documentos HTML de tres formas: en línea, interno y externo.
CSS en línea
Los estilos en línea se usan para aplicar un estilo a un solo elemento HTML. Para usar estilos en línea, añade el atributo style al elemento correspondiente. El atributo style puede contener cualquier propiedad CSS.
Consejo: Encabezado con estilo en línea
<h1 style="color: blue; font-size: 12px;">Encabezado con estilo en línea</h1>CSS interno
Los estilos internos se definen dentro del elemento <style>, en la sección <head> de una página HTML. La hoja de estilos interna solo debe usarse cuando una única página HTML necesita un estilo específico.
Consejo: Ejemplo de CSS interno
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo.</p>
</body>
</html>CSS externo
Con los estilos externos, puedes cambiar la apariencia de un sitio web entero modificando un solo archivo. Cada página HTML debe incluir una referencia al archivo de hoja de estilos externo dentro del elemento <link>, en la sección head. Una hoja de estilos externa puede escribirse en cualquier editor de texto y guardarse con la extensión .css. El archivo .css externo no debe contener ninguna etiqueta HTML.
Consejo: Ejemplo de CSS externo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo.</p>
</body>
</html> El archivo externo styles.css:
h1 {
color: navy;
margin-left: 20px;
}La forma más común de añadir CSS a las páginas HTML es usando archivos CSS externos para que múltiples páginas compartan el mismo aspecto y sensación.