Que es el CSS | El blog de Liher

Este es el primer articulo del curso de CSS que voy a hacer y que creo que va a resultar mas interesante que el de HTML ya que es mas ameno. Lo primero que os voy a explicar es que es el CSS. Cuando hacemos paginas web solo con HTML el tema de la apariencia es bastante complicado. Para crear una pagina web y posicionar los elementos dentro de ella antes se utilizaban las tablas, pero era complicado ya que a medida que se iban colocando elementos algunos de los anteriormente puestos había que modificarlos para que todo quedase como queríamos.

Ademas, al usar solo HTML el código de la pagina web que hacíamos era confuso ya que en el se mostraba toda la información que queríamos dar al usuario que la visita y estaba mezclado con los parámetros de apariencia, era un autentico problema a veces buscar fallos o hacer modificaciones. Ademas el tema de la apariencia estaba muy limitado.

Esto ya no pasa con CSS, la colocación de los elementos permite casi cualquier posibilidad y la personalización también. Ademas el contenido o información a mostrar en el navegador va en la pagina HTML y luego la apariencia y colocación de cada elemento la definiremos en un archivo distinto que tendremos que enlazar desde el documento HTML.

La sintaxis del CSS es muy fácil, solo tenemos que definir primero que elemento tratar y luego, entre llaves, atributos cada uno con su valor o valores y cada nuevo atributo ira separado por un punto y coma del anterior. Os voy a poner un ejemplo:

#cabecera
   {
    top: 10px;
    color: blue;
   }

En el ejemplo anterior estoy dando estilo a una capa que se llama «cabecera» y entre llaves le he puesto dos atributos, el primero hace referencia a su posicionamiento, esta a 10 pixels de la parte superior y el segundo atributo hace referencia al color del texto. Con esto solo hemos definido sus atributos y esto ira en un archivo con extensión «.css», en el archivo HTML deberemos incluir lo siguiente:

<div id="cabecera"></div>

Ahora en la cabecera del archivo HTML deberemos indicar donde debe buscar el CSS para aplicarlo a la pagina de la siguiente forma:

<head>
   <link rel="stylesheet" type="text/css" href="estilos.css">
</head>

La linea del medio indica que vamos a usar un archivo que contiene el CSS de la pagina y el archivo donde esta el código CSS se llama «estilos.css». También podemos poner el CSS en el documento HTML, pero hay una norma que se llama W3C que indica que el CSS y el HTML deben estar en documentos separados, a grandes rasgos.

La cantidad de atributos existentes es enorme, y van saliendo nuevos, no pretendo enseñarlos todos, aunque si bastantes con la idea de que os podáis manejar bien con CSS y que podáis también comprender un atributo nuevo con facilidad cuando lo veáis.

Si ejecutamos el código anterior no veremos nada ya que no hemos puesto contenido, eso lo iremos viendo mas adelante con ejemplo, de momento solo quería dar una muy pequeña introducción a CSS. Hay que tener en cuenta una cosa y es que también podemos cambiar los atributos de las etiquetas, por ejemplo la «h1», que tienen un estilo predefinido en cada navegador y con CSS podemos modificarlo.

Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.