INFOTEC CSS3 – SEMANA 5

CURSO

CSS 3

INFOTEC 1
 INFOTEC CSS3 – SEMANA 5

CSS 3

Es un lenguaje de diseño gráfico que incorpora una serie de novedades que permite definir
y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.
Es muy usado para establecer el diseño visual de los documentos web e interfaces de
usuario escritas en HTML5.

▪ CSS son las siglas de Cascading Style Sheets

▪ CSS describe cómo se mostrarán los elementos HTML en la pantalla.
▪ CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la
vez.
▪ Las hojas de estilo externas se almacenan en archivos CSS.

Sintaxis CSS

Una regla CSS consta de un selector y un bloque de declaración.

▪ El selector apunta al elemento HTML al que desea aplicar estilo.

▪ Varias declaraciones CSS se separan con punto y coma y los bloques de
declaración están rodeados por llaves.
▪ Cada declaración incluye un nombre de propiedad CSS y un valor, separados por
dos puntos.

INFOTEC 2
 INFOTEC CSS3 – SEMANA 5

Ejemplo:

HTML5

CSS3

Resultado en el navegador

Ejemplo explicado

▪ p es un selector en CSS (apunta al elemento HTML que desea aplicar estilo: <p>).
▪ Color es una propiedad y green es el valor de la propiedad.
▪ text-align es una propiedad y center es el valor de la propiedad.

Selectores CSS

Un selector de CSS selecciona los elementos HTML a los que desea aplicar estilo.

Podemos dividir los selectores de CSS en cinco categorías:

▪ Selectores simples (selecciona elementos según el nombre, la identificación, la

clase)
▪ Selectores de combinador (seleccione elementos en función de una relación
específica entre ellos)
▪ Selectores de pseudo-clase (seleccione elementos basados en un cierto estado).
▪ Selectores de pseudo-elementos (seleccionar y aplicar estilo a una parte de un
elemento).
INFOTEC 3
 INFOTEC CSS3 – SEMANA 5

▪ Selectores de atributos (seleccione elementos basados en un atributo o valor de

atributo).

Selectores Simples:

Selector de Tipo: Selecciona todos los elementos que coinciden con el nombre del
elemento especificado.

Ejemplo 1:

HTML5

CSS3

Resultado en el navegador

INFOTEC 4
 INFOTEC CSS3 – SEMANA 5

Ejemplo 2:

HTML5

CSS3

Resultado en el navegador

Selector de Clase: Selecciona todos los elementos que tienen el atributo de class
especificado.

En el archivo css para seleccionar elementos con una clase específica, escriba un punto
(.), Seguido del nombre de la clase.

INFOTEC 5
 INFOTEC CSS3 – SEMANA 5

Ejemplo 1:

HTML5

CSS3

Resultado en el navegador

Ejemplo 2:

HTML5

INFOTEC 6
 INFOTEC CSS3 – SEMANA 5

CSS3

Resultado en el navegador

También puede especificar que solo los elementos HTML5 específicos deben verse
afectados por una clase.

Ejemplo 3:

HTML5

CSS3

INFOTEC 7
 INFOTEC CSS3 – SEMANA 5

Resultado en el navegador

Selector de ID: Selecciona un elemento basándose en el valor de su atributo id. Solo

puede haber un elemento con un determinado ID dentro de un documento.

En el archivo CSS para seleccionar un elemento con una identificación específica, escriba
un carácter de almohadilla (#), seguido de la identificación del elemento.

Ejemplo:

HTML5

CSS3

Resultado en el navegador

INFOTEC 8
 INFOTEC CSS3 – SEMANA 5

Selector Universal: El selector universal selecciona todos los elementos HTML de la

página.

En el archivo CSS para seleccionar todos los elementos escriba un carácter de asterisco
(*).

Ejemplo:

HTML5

CSS3

Resultado en el navegador

INFOTEC 9
 INFOTEC CSS3 – SEMANA 5

Selector de Agrupación: El selector de agrupación selecciona todos los elementos

HTML5 con las mismas definiciones de estilo.

Para agrupar selectores, separe cada selector con una coma.

Ejemplo:

HTML5

CSS3

Para minimizar el código se utiliza el agrupamiento de selectores.

INFOTEC 10
 INFOTEC CSS3 – SEMANA 5

Resultado en el navegador

INFOTEC 11