Lección 1
Introducción a CSS y sintaxis básica
CSS (Cascading Style Sheets o CSS): Es un lenguaje utilizado para especificar el aspecto visual o apariencia de una página web. Este lenguaje se integra con HTML de diferentes formas.
Una definición de un estilo en CSS tiene dos partes principales: un selector y una o más declaraciones.
| Selector | Apertura | Declaración 1 | Declaración 2 | Cierre | ||
|---|---|---|---|---|---|---|
| h1 | { | color: | blue; | font-size: | 12px; | } |
| propiedad | valor | propiedad | valor | |||
Como vemos en este ejemplo, cada declaración está compuesta a su vez por una propiedad y su valor.
Normalmente los selectores son elementos HTML a los cuales se les quiere aplicar un estilo.
Entre los tipos de selectores, tenemos los siguientes:
Selector universal ( * )
Se utiliza para seleccionar todos los elementos de la página.
En este caso se va a aplicar un margen de tamaño 0 a todos los elementos html de nuestra página.
Selector de etiqueta HTML
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.
En el primer caso se establece que el color de letra de todos los títulos <h1> de la página estará en color azul. En el segundo caso se establece que el color de texto de todos los párrafos <p> estará en color negro. En el tercer caso se establece que el color del texto de todos los títulos <h1> y de los párrafos <p> de la página, será azul.
Selector descendente
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>. Ejemplo:
En este caso se aplicará un color de rojo a los textos de todos los elementos <span> que se encuentren dentro de una etiqueta de párrafo <p>, como en el siguiente ejemplo:
Selector de hijos
Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>). Ejemplo:
En este caso se aplicará un color azul al texto de todos los elementos <span> que se encuentran contenidos directamente dentro de un elemento de párrafo <p>, es decir que no existen contenedores intermedios, como en el siguiente ejemplo:
Selector de atributos
permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
En este caso se aplicará un ancho de 150px a todos los componentes <input> que sean de tipo “text”, como en el siguiente ejemplo:
Selector id
El selector id se utiliza para definir estilos sobre un elemento, el cual tiene un valor único en todo el documento. Hacemos referencia a él anteponiendo el símbolo numeral (#).
En este caso se centrará y se establecerá en color rojo, los textos que se encuentre dentro de elementos HTML con el atributo id=“idelemento”, como en el siguiente ejemplo:
Selector class
Con el selector class se puede definir el mismo estilo para diferentes elementos HTML que posean el mismo valor en este atributo. El valor del selector class debe ir antepuesto por un punto (.)
En este caso se centrará y se establecerá en color rojo, los textos que se encuentre dentro de elementos HTML con el atributo class=“elemento”, como en el siguiente ejemplo:
Como incluir CSS en nuestra página web
Existen 3 formas de incluir estilos CSS en un documento HTML
Internamente
Se especifican los estilos CSS directamente en el archivo HTML.
Externamente
Se invoca un archivo externo que contendrá todos los estilos CSS de la siguiente manera:
Entre líneas
Se especifica el CSS directamente en el elemento HTML de la siguiente manera:
