Hojas de estilo CSS

Las hojas de estilo en cascada (Cascading Style Sheets) es un lenguaje que se utiliza para definir el estilo de un HTML o XML.  World Wide Web Consortium es el que se encarga de formular la especificación de las hojas de estilo.

Existen tres tipos de estilos:

• Hoja de estilo externa: es la que se encuentra almacenada en un archivo diferente al archivo donde se encuentra el código HTML de la página web. Esta es la más utilizada ya que separa completamente las reglas de formateo para el HTML de la estructura básica de la página.
  
• Hoja   de estilo interna: es la hoja de estilo que se encuentra dentro de un documento HTML. Esta se pone a la derecha dentro del elemento head, para que de este modo se pueda separar la información del estilo del código HTML. Esta hoja de estilo se utiliza generalmente cuando se quiere proporcionar alguna característica a una página web en un simple fichero.
  
• Estolo en línea: es un método que permite insertar estilo de página, dentro de una etiqueta HTML. Esta forma no es la más adecueada. El poner la descripción de formateo dentro de un documento de la página web, a nivel de código es una tarea larga y tardada. Este método se recomienda para dar formato a correos electrónicos en HTML.

VENTAJAS DE UTILIZAR HOJAS DE ESTILO

• Con esto tienes un control de la presentación de una página web, con esto se agiliza la acutualización de la página.
  
• Los navegadores web permiten a los usuarios especificar la hoja de estilo local que se aplicará a una página web, con esto aumenta mucho la accesibilidad.
  
• Una página puede tener diferentes hojas de estilo según el dispositivo que la muestra o por elección del usuario.
  
• El HTML es más claro y se reduce su tamaño, siempre y cuando no se utilicen estilos de línea.

Pero se preguntarán, ¿Como funcionan estas hojas de estilo?. Bueno, en una hoja de estilo usamos reglas que consisten en elegir selectores a los cuales se le asignan ciertas propiedades. Como por ejemplo, color de fondo, color de letras, tipo de letra, tamaño de letra, entre otros, como se muestra en la siguiente imagen.

Bueno, los selectores son utilizados para escoger los elementos a los que les vamos a aplicar las propiedades. Existen diferentes tipos de selectores, los más importantes se los mostraré.

Si queremos escoger una etiqueta, solo escribimos su nombre. Si queremos establecer las propiedades para los enlaces se hace de la siguiente forma.

También es posible elegir un elemento único utilizando su atributo id. Para esto se hace lo siguiente.

 

Se puede definir una clase y hacer que varios elementos la usen, escribiendo un punto antes del nombre. De la siguiente forma.

 

Después podemos usar esta clase en los párrafos que queramos (o en cualquier otro elemento), usando el atributo class de la siguiente forma:

Se puede seleccionar también ciertos elementos, siempre y cuando estén contenidos dentro de otros. Por ejemplo si queremos seleccionar los < li > pero solo de las listas sin ordenar sería de la siguiente forma.

Estas son los principales selectores, espero que les sirva de algo. Saludos