AMBIENTE CSS
Conceptos básicos de CSS
¿Para Que Sirve El CSS?
La tecnología CSS está diseñada para marcar la separación del contenido de las páginas web y la forma de presentación de estas. Lo que genera múltiples beneficios, como:
• presentar el documento final en diferentes estilos (pantalla, voz, impresión);
• tener un sitio web responsivo;
• evitar hacer archivos demasiado pesados;
• definir el estilo visual de todo un sitio web. Así, si cambiamos una página, cambiarán todas automáticamente;
• trabajar con estándares y separar (hasta cierto punto) la estructura de la presentación logrando un trabajo más definido;
• provee más flexibilidad y control en las especificaciones del sitio web;
• simplifica la creación de la página.
Selector Css
Un selector es el nombre que tiene un determinado elemento dentro del código de tu web. Conociendo el nombre del selector puedes modificar ese determinado elemento a tu antojo. Hay dos tipos de selectores: identificadores y clases.
Tipos de Selectores
- Un identificador es el nombre de un elemento concreto que no se repite más que una vez en toda la web. Es un nombre único, y aplicándole una modificación vas a modificar únicamente este elemento. Los identificadores se definen en la hoja de estilos CSS con # (almohadilla), y dentro del HTML aparecen escritos así: id=»nombre del identificador».
- Una clase es el nombre de una regla que se repite en varios sitios de tu web. Por ejemplo, puedes tener una clase llamada .negro que puedes aplicar tanto a textos como a botones para que se pongan de este color. Es decir, defines un estilo genérico que puedes aplicar a cualquier elemento cuantas veces quieras. Las clases se definen en CSS con un . (punto) y dentro del código HTML se aplican así: class=»nombre de la clase».
- El nombre de los selectores viene determinado por el desarrollador de la plantilla, es decir, son nombres arbitrarios elegidos por el creador del tema, aunque a menudo tienen cierta lógica. Por ejemplo, las clases para botones suelen llamarse .button, el identificados de la cabecera de la web suele llamarse #header.
¿Las Propiedades del Css?
Una propiedad es la modificación o modificaciones concretas que aplicas en la hoja de estilos CSS a un elemento de tu web mediante un selector. Por ejemplo, al selector llamado #boton (que da estilo a un tipo concreto de botón dentro de mi sitio) le puedo aplicar las siguientes propiedades de color, ancho, relleno y borde:
background-color: #ccc; (color de fondo gris especificado en código hexadecimal)
color: #fff; (color del texto dentro de la caja en blanco)
width: 100px; (ancho de 100 píxeles)
padding: 20px; (relleno o margen interior de 20 píxeles por cada lado)
border: 1px solid #000; (borde de color negro continuo de 1 píxel de grosor)
border-radius: 5px; (redondeado de un ángulo de 5 píxeles en todas las esquinas de la caja)
¿Por qué vale la pena implementar CSS en un sitio web?
Las ventajas de utilizar las Hojas de Estilo en Cascada son numerosas, algunas ya te las mencionamos anteriormente y otras te las diremos a continuación:
• la posibilidad de hacer modificaciones visuales en un solo lugar (sin tener que editar todos los documentos HTML por separado);
• la facilidad de organizar y hacer cambios;
• el permitir que las páginas descarguen con mayor rapidez;
• mediante la separación se mejora la accesibilidad y escaneabilidad del contenido;
• la simplicidad para crear versiones dependiendo de los dispositivos (tablets, teléfonos inteligentes o dispositivos móviles, entre otros), etc.
A pesar de que el uso de CSS no parezca tan importante ¡sí lo es! Su ejecución te permite mejorar tus técnicas SEO y de posicionamiento lo que es crucial para una estrategia de Marketing Digital.
Ejemplo de Css:
