CSS (CASCADING Style Sheets) son hojas de estilo en cascada. CSS es un lenguaje que complementa y formatea HTML (HyperText Markup Language, Lenguaje de Marcación de Hipertexto) organizando mejor las líneas y agregando nuevas posibilidades al código. Con él, puedes modificar prácticamente todo dentro de tu layout (como colores, background, características de la fuente, márgenes, […]
CSS (CASCADING Style Sheets) son hojas de estilo en cascada. CSS es un lenguaje que complementa y formatea HTML (HyperText Markup Language, Lenguaje de Marcación de Hipertexto) organizando mejor las líneas y agregando nuevas posibilidades al código.
Con él, puedes modificar prácticamente todo dentro de tu layout (como colores, background, características de la fuente, márgenes, rellenos, posición, incluso la estructura del sitio con la propiedad float).
CSS ayuda a mantener la información de un documento separada de los detalles de cómo mostrarlo. Los detalles de cómo mostrar el documento, se le conoce como el estilo. Mantienen el estilo separado del contenido, podemos evitar duplicar contenidos, facilitar el mantenimiento de nuestro sitio web y más.
¿Cómo funciona CSS?
Tu sitio web puede tener varias páginas similares y, mediante CSS almacena la información en archivos comunes que comparten todas las páginas. Cuando un usuario accede a una página, el navegador carga la información del estilo junto con el contenido de la página. Un lenguaje de marcado, como HTML, también proporciona algunas formas de especificar el estilo. Por ejemplo, en HTML, puedes utilizar un tag para poner el texto en negrita y puedes especificar el color de fondo de una página en el tag, como por ejemplo:
<body style=”background-color:#FFFFFF;”>
Cuando uses CSS, evita utilizar estas funciones de lenguaje de marcado, para que toda la información del estilo de tu documento esté en un solo lugar.
Para que el archivo HTML “lea” el archivo CSS es necesario colocar entre los tags <head></head> esta línea <link href= “seu_css.css” rel=” stylesheet” />. De esta manera los tags de tu HTML seguirán los estilos de tu archivo css, que es un archivo de texto con la extensión .css.
¿Cómo crear una hoja de estilo?
Dentro de tu archivo CSS (que es capaz de leer algunos colores directamente por el nombre, en inglés), puedes copiar y pegar en la siguiente línea, guardando el archivo enseguida:
Para relacionar tu documento con tu hoja de estilo, edita tu archivo HTML y agrega la línea que aparece en negrita:
Así, los elementos permanecerán en tu página, como por ejemplo el background, no es necesario identificar con ids o classes. Pero estos recursos pueden ayudar bastante en el momento de organizar tu página, si hay muchos elementos (como párrafos, listas, links) con diferentes propiedades. La principal diferencia entre id y class es que el id sólo se puede usar en un elemento, mientras que class se usa cuando es necesario que varios elementos tengan el mismo parámetro.
Esta forma de crear el código de un sitio web se denomina “tableless”, es decir, con menos tablas. Los web standards (estándares utilizados por desarrolladores, como el W3C – World Wide Web Consortium -, que presenta un conjunto de pautas, así como publicaciones técnicas para la optimización del sitio web) no se recomienda utilizar tablas para definir un layout de una página. Las tablas deben usarse preferiblemente para lo que fueron diseñadas: mostrar datos tabulares. Por tanto, debemos elegir elementos que agrupan y estructuran un documento, los famosos divs y spans.
Nuevas posibilidades con CSS
Con las actualizaciones de CSS3 comienza una era donde CSS es el mayor aliado de los Diseñadores Web, ya que además de los puntos básicos es posible controlar diversos aspectos en el layout. Hoy en día, es posible personalizar mucho más allá de lo básico, podemos seleccionar elementos específicos de un determinado grupo de elementos; estructurar los elementos independientemente de la posición del código HTML; manipular la opacidad; colocar degradados en textos y formas; sombreado de textos y otros componentes; insertar bordes con estilo; controlar la rotación y la perspectiva; insertar animaciones.
Además, a diario se insertan nuevas propiedades y siempre existe la forma de actualizar y utilizar nuevas funciones en formato CSS para crear un layout increíble.
¡Consulta el Blog de HostGator y profundiza tus conocimientos con más contenidos como este!