Introducción a CSS

La hojas de estilos o más conocidas como css, son elementos indispensables cuando se trata de realzar el diseño de una página web, mejorando notablemente el aspecto gráfico de la misma, en esta entrada se dará una introducción de esta herramienta y cómo usarla de una manera adecuada.

¿Qué es CSS?

  • También es conocido como Cascading Style Sheets, es un lenguaje que describe el estilo de un documento HTML.
  • Describe también cómo los elementos HTML deberían ser mostrados.
  • Permite ahorrar tiempo debido a que el control se centraliza en un elemento específico el cual puede ser heredado por otros componente
  • Permite ser almacenado en archivos externos con el fin de modularizar la aplicación.

Beneficios de usar CSS

  • El HTML por si solo no contiene etiquetas para dar formato a una página web
  • El HTML describe solamente el contenido de la página web, ejemplo <h1> o <p>
  • Cuando se usa HTML por si solo y se quieren dar colores u otros retoques, el desarrollo de estos, requiere más esfuerzo que usando CSS
  • CSS remueve el estilo suministrado por HTML

Sintaxis CSS

Una regla css se compone de un selector y un bloque de declaración

Selector CSS

Los selectores CSS son usados para “buscar” (seleccionar) elemento HTML por medio de su nombre, id, class, atributo, etc. A continuación se listarán los más importantes.

Selector de etiqueta HTML

Se usa para seleccionar elementos HTML por medio de sus etiquetas, <p>, <h1>, <table>; por ejemplo

Permite seleccionar los párrafos (paragraph) de un documento HTML

Selector de id

  • Selecciona los atributos de los elementos HTML, dichos atributos tienen un identificador para un elemento específico.
  • El id, debería ser único en cada página, y el id, selecciona un único elemento.
  • Para seleccionar un id específico se escribe el carácter hash (#), seguido por el nombre del id del elemento
Es este caso se selecciona un elemento cuyo id por ejemplo, id=»para1″

Importante: el id no puede empezar con número

Selector de clase (class)

Este selector, selecciona elementos con una clase de atributo específica. Para seleccionar atributos con una clase específica se escribe el carácter punto (.), seguido del nombre de la clase

En este caso se seleccionará un elemento por ejemplo, class=“center”

También se puede especificar un elemento HTML que podrían se afectados por una clase, en el siguiente caso solo afectará elementos <p> cuya clase sea center