¿Que son las hojas de estilos CSS?

La Hoja de estilos CCS viene de la abreviatura de Cascading Style Sheets (en español Hojas de Estilo en Cascada).
Los estilos CSS son las instrucciones que lee el navegador web y que definen la apariencia en que deben representarse todos los elementos que componen la página tales como: tamaño, color, forma, etc.

Ventajas de utilizar estilos CSS

  • Limpia y hace más sencilla y fácil de entender y modificar el código HTML de las páginas.
  • Facilita cambiando los valores de un solo archivo (en caso de que el estilo CSS se encuentra en un archivo externo) modificar el estilo de varias páginas a la misma vez.
  • Una página web puede tener distintos estilos, para ser usada y vista de forma adecuada en equipos diferentes, ya sea una PC de escritorio, una TabletPC o un teléfono celular.

Como aplicamos una regla de estilo CSS

Para aplicar estilo a nuestro elemento HTML, primeramente debemos de llamar al elemento, seguidamente poner los símbolos llaves ({}); y dentro la propiedad:valor.

selector css

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

aplicando regla css

Uso de los estilos CSS en documentos HTML

En línea

Se aplica directamente en la etiqueta HTML

Dentro de un documento HTML

Son aquellos que se definen en la cabecera de la página a continuación de </head> y adentro del bloque style.

Todo lo que se escriba en el interior del bloque style será estilo CSS.

Hoja externa

tal como veíamos en el capitulo anterior podemos vincular hojas externas CSS a documentos HTML.

Esta es la manera más recomendada pues manipulamos desde un único archivo CSS a todos nuestras páginas HTML de nuestro sitio Web.

 

Elementos que aplicamos estilos CSS

Selectores de etiqueta

Es cuando llamamos directamente a la etiqueta HTML

Etiqueta SPAN

Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.

Selectores de clase

las clases son nombres personalizados que aplicamos a las etiquetas para diferenciar unas de otras. Por ejemplo tenemos 4 párrafos pero deseamos aplicar un estilo en especial sólo a uno de ellos. Este tipo de estilos podemos repetir muchas veces en nuestro documento HTML.

Para aplicar este tipo de estilo debemos de declarar la clase en el HTML

Luego en nuestro CSS declaramos antecediendo el punto

Selectores ID

La característica principal que tiene estos elementos es que se utilizan una sóla vez en el documento HTML

Aplicamos de la siguiente manera dentro de nuestro documento HTML

La manera de como llamarlo del CSS sería:

 

Agrupación de selectores

Si utiliza para aplicar estilos CSS a varios elementos a la vez. Para ello tienes que separar cada selector con una coma como en el siguiente ejemplo:

Selectores hijos directos

Se aplica cuando deseamos el estilo se lleve a un elemento descendiente directo de otro.

Por ejemplo si se desea aplicar un estilo a todos los elementos A que encuentran dentro del elemento LI que obligatoriamente se encuentren dentro de la clase menu

en la hoja de estilos CSS podemos aplicar (utilizamos el símbolo mayor):

Selectores descendientes

Se aplican a todos los elementos hijos sin importar el orden.

Por ejemplo en la siguiente captura podemos aplicar estilos a todos los elementos A que se encuentran dentro de la clase menu

en la hoja de estilos CSS podemos aplicar (separamos mediante un espacio):

Selectores de bloque DIV

Los selectores DIV nos permiten agrupar etiquetas de contenido.

Ejemplo:

Principales estilos CSS

Presento algunos de los estilos mas usados, tales como: negrita, cursiva, color de texto, etc

Estilos adicionales de fondo:

Podemos aplicar algunos ajustes al fondo por ejemplo:

en este caso le indicamos a la imagen de fondo que sólo se repita en forma horizontal y un tamaño de altura en específico

en este otro caso:

Aquí le indicamos que se adecúe a todo el ancho de la pantalla

Opacidad

Podemos aplicar opacidad a nuestros elementos del rango 0 a 1 donde: 0 = transparente y 1 es el color normal.

Ejemplo:

pseudo-clase

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

La pseudo-clase :hover de CSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa.

En la presente sesión conoceremos el uso de la Hoja de Estilos CSS, añadido a esto lo anteriormente llevado HTML 5.

Ejemplo:

Vínculos a correo

Podemos aplicar de la siguiente manera

Practica Propuesta

Ahora se pide realizar la siguiente práctica:

Modelo 01

Para descargar las imágenes utilizadas presione aquí

 

Como archivos adicionales presento:

Ejercicio 01:

https://goo.gl/qtfsIy

Ejercicio 02:

https://goo.gl/DyRZVF

Material a descargar:

https://goo.gl/YAjmdf

Artículos relacionados

Introducción a Estilos CSS

Introducción a Estilos CSS

¿Que son las hojas de estilos CSS? La Hoja de estilos CCS viene de la abreviatura de Cascading Style Sheets ...
Leer Más
Listas sin ordenar, listas ordenadas, listas con imagenes con CSS

Listas

En este artículo aprenderemos a utilizar las etiquetas de viñetas en HTML, así como tambien utilizar imágenes como viñetas utilizando ...
Leer Más
Trabajando con etiquetas imágenes y vinculos

Trabajando con etiquetas imágenes y vinculos

En esta nueva lección aprenderemos a utilizar las etiquetas de enlace e insertar imágenes, etiquetas muy necesarios en nuestro camino ...
Leer Más
Practica de vínculos en HTML (etiqueta a)

Practica de vínculos en HTML (etiqueta a)

La práctica de esta semana es la siguiente: Click Aquí Materiales de trabajo Click Aqui ...
Leer Más
Practica Maquetación Web

Practica Maquetación Web

Esta semana tenemos el Laboratorio 2. Comparto los archivos de clase Click Aquí la cual sería: Click Aquí Además comparto ...
Leer Más
Practica Maquetación Web: Pisco Peruano

Practica Maquetación Web: Pisco Peruano

Aqui el link del proyecto final: Click Aquí Para descargar archivos Click Aquí ...
Leer Más
Menú Desplegable con HTML y CSS

Menú Desplegable con HTML y CSS

Se desarrollará el menu desplegable, trabajaremos con el material del Aula Virtual Video de Clase  ...
Leer Más
transiciones en CSS3

Transiciones en CSS3

Transiciones en CSS3 Las transiciones en CSS3 proporcionan una forma de animar los cambios de las propiedades CSS, en lugar ...
Leer Más
animaciones css3

Animaciones en CSS3

Animaciones en CSS3 Las animaciones en CSS3 permiten aplicar movimientos a las transición entre un estilo CSS y otro. Las animaciones ...
Leer Más