El CSS o Cascading Style Sheets es un lenguaje que se suele utilizar para determinar el aspecto o el estilo de una página web. Suele ir relacionado con un documento HTML, el cual tiene todo el contenido de una web agrupado dentro de etiquetas, sobre las que actúa el CSS modificando la forma en la que serán visualizadas por parte de los usuarios.
Para qué sirve el CSS
Con el CSS se puede cambiar el aspecto todos los elementos de una página web, como por ejemplo, el color del texto, el tamaño de los elementos, la estructuración del contenido, su visualización y mucho más.
El CSS es utilizado para adaptar el diseño de un sitio web y hacerlo único y diferente de los demás, haciéndolo así destacar entre la competencia. También sirve para mejorar la experiencia de los usuarios que visitan la web, ya que el diseño y la disposición de sus elementos es uno de los factores que más influyen en este sentido.
Tipos de CSS
Existen tres principales tipos de CSS que podemos utilizar: en línea, incrustado y externo.
CSS en línea
En el CSS en línea, el estilo se escribe directamente en el documento donde está el contenido de una web, incluyéndolo directamente dentro de la etiqueta de la que se quiere modificar su estilo o apariencia.
CSS incrustado
El CSS incrustado, se ubica en dentro de la etiqueta head de un sitio web, afectando solamente a las etiquetas de las páginas en las que se encuentra incrustado.
CSS externo
El CSS externo es el que se escribe en un documento diferente del que contiene la estructura principal de la página web. Los estilos incluidos en el documento afectarán a todas las páginas a las que se le vincule este documento.
Cómo utilizar el CSS
Para utilizar correctamente el CSS hay que escribirlo según la estructura que se indica en los estándares de la W3School. Para aplicar un estilo a un elemento de una página web se realizan los siguientes pasos:
-
Es recomendable que todas las imágenes de la página web tengan el atributo ALT.
-
Se le da un nombre de class o de id al elemento al cual queremos modificar la apariencia.
-
Se incluye el nombre del nombre dado del elemento a nuestro código CSS añadiendo “.” al principio del nombre si es una class, o “#” si es un id.
-
Se abren y cierran corchetes y se incluye el código que queramos en el interior.
Los comandos más utilizados para cambiar el aspecto de un sitio web mediante CSS son:
-
Color: esta es la propiedad CSS que cambia el color del texto. Habrá que indicar el color en código hexadecimal o introducir el nombre del color según los estándares del CSS.
-
Font-size: con esta propiedad se modifica el tamaño de la fuente dentro del contenido del elemento que hayamos seleccionado. Hay que asignarle un valor en píxeles.
-
Font-family:esta propiedad asigna una fuente de letra concreta al elemento en el que se encuentre.
-
Weight: la propiedad weight asigna el ancho al elemento.
-
Width: la propiedad width asigna el alto al elemento.