Icono del sitio Home Assistant Fácil

Introducción a CSS

w3c-css

CSS u «Hoja de estilos en cascada» es un lenguaje vinculado a HTML donde definimos los estilos de nuestras páginas web. Funciona a base de reglas, tenemos un selector (etiquetas o conjunto de etiquetas de HTML) que a través de una declaración le damos valor a las propiedades de diseño. Más adelante os lo explicaremos con detalle. La declaración de una propiedad de un CSS se haría de la siguiente manera:

Selector {propiedad: valor; propiedad2: valor2;… }

El CSS lo podemos aplicar de tres formas diferentes:

  1. Directamente en la etiqueta: <body id=»mibody» background-color=»red»> Esta opción no es recomendable, no separa el contenido de la presentación. Aunque si podemos utilizarla de  forma puntual.
  2. En la cabecera del archivo HTML: <html> <head> <title>Hoja de estilo interna</title> <style type=»text/css»> <!– Conjunto de reglas –> body { font-family: «Times New Roman»; color: red; background-color: #d8da3d; } h1, h2 { font-family: Arial; } </style> </head> <body></body> </html> Esta forma es poco eficiente, ya que si nuestra página web se compone de varios archivos HTML (lo más usual) tendremos que definir nuestro CSS en cada una de los archivos HTML.
  3. En un archivo aparte:
    Este es la forma más eficiente de utilizar CSS ya que podemos utilizar todas estas reglas para todas las paginas HTML que forman nuestra web. Tendremos un archivo con la extensión .css vinculado a nuestro HTML indicándolo en la cabecera de este de la siguiente forma:   <head> <link href=”miestilo.css” type=text/css rel=stylesheet> </head> Dentro de este archivo tendremos las reglas que definen el estilo de nuestras páginas web. Se declararían de la misma forma que en el caso dos

Como hemos comentado, para darle estilo a nuestra página web utilizamos una serie de reglas.  Podemos hacerlo de varias formas:

Existen más tipos de reglas para aplicar estilo en nuestros archivos CSS, como serian los referentes a los eventos. Pero los que os hemos mostrado son los más importantes y por donde debéis empezar.

La última versión de CSS es el CSS3, este nuevo estándar trae muchos cambios os listamos unas cuantas de ellas:

Os ponemos un ejemplo de cómo modificar el borde y hacerlo redondeado:

No podemos terminar este artículo sin recordaros que con la multitud de resoluciones y diferentes dispositivos que hoy se conectan a la web, necesitamos hacer las webs para que se ajusten a estos diferentes tamaños, moviendo el contenido y siempre intentando que sean amigables. Esto lo conseguimos con CSS Responsive. Para que veáis la importancia que tiene, el buscador Google penaliza desde Abril de 2015 a aquellas páginas que no estén preparadas para dispositivos móviles.

Para realizar esta tarea os recomendamos que utilicéis un frameworks que os facilitara mucho la tarea, os dejamos tres para que los probéis:

Salir de la versión móvil