UTP
Unidad 3: Estilos (CSS)

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.

Estructura Reglas CSS
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:

lanzador
Ejemplo: Reto.

Títulos de página.

Instrucciones:

Para el siguiente código en HTML incluir para el selector p un estilo con la propiedad color con valor igual a green y la propiedad font-weight con valor igual a bold. Probar incluyendo el estilo CSS internamente y entre líneas.

Código fuente

Panel de resultados