CSS son las siglas en inglés de Cascading Style Sheets, que significa «hojas de estilo en cascada». Es un lenguaje que se usa para estilizar elementos escritos en un lenguaje de marcado como HTML.
La relación entre HTML y CSS es muy fuerte. Dado que HTML es un lenguaje de marcado (es decir, constituye la base de un sitio) y CSS enfatiza el estilo (toda la parte estética de un sitio web), van de la mano.
CSS no es técnicamente una necesidad, pero no querrás tener un sitio que solo tenga HTML, ya que se vería completamente desnudo. La diferencia entre un sitio web que implementa CSS y uno que no, es enorme y definitivamente se nota.
Quizás hayas visto algún sitio web que no se puede cargar por completo y tiene un fondo blanco con la mayor parte del texto en azul y negro. Eso significa que la parte CSS del sitio no se cargó correctamente o no existe.
Así es como se ve un sitio con solo HTML, y creo que estaremos de acuerdo en que no luce muy bien.
Antes de CSS, todo el estilo debía incluirse en el marcado HTML. Esto significa que había que describir por separado todos los fondos, los colores de fuente, las alineaciones, etc.
CSS permite estilizar todo en un archivo diferente, creando el estilo allí y después integrando el archivo CSS sobre el marcado HTML. Esto hace que el marcado HTML sea mucho más limpio y fácil de mantener.
En resumen, con CSS no tienes que describir repetidamente cómo se ven los elementos individuales. Esto ahorra tiempo, hace el código más corto y menos propenso a errores.
/*|Selector|*/
p{
/*|-Propiedad-| |valor|*/
color : red
}/*|-----Declaración-----|*/
Sintaxis y Semántica
Sintaxis
Toda regla CSS está compuesta por 3 partes
/* El Selector, que apunta al elemento a modificar*/
div{ }
/* La Propiedad, que es el aspecto del elemento que deseas modificar*/
background-color:
/* El Valor, el cual se le asigna a la propiedad*/
: darkred
/* y como resultado */
div{
background-color: darkred;
}
Fondo Rojo!
Semántica
1. La apertura y el cierre de toda regla debe hacerse con el selector, seguido de los corchetes {}, y recuerda siempre que Las reglas CSS se leen de arriba hacia abajo, no existe saltos, es una lectura secuencial, y esto significa que las normas que se encuentran más abajo en el documento tienen la prioridad sobre las que se encuentran más arriba .
2. Los selectores pueden apuntar a:
- El ID de los elementos.
- El atributo class de los elementos.
- El elemento mismo.
- Una pseudo clase.
3. Al conjunto de Propiedades y valores encerradas en un selector se le llama "declaración", y después de cada valor, debe colocarse un punto y coma ; con el propósito de separar cada una de las declaraciones.
4. Ten en cuenta que hay propiedades que son inherentes al tipo de elemento que estás afectando con CSS, por ejemplo, no puedes añadir la propiedad "font-style" (que pertenece a los textos) a una caja <div>.
5. Puedes insertar código CSS en cualquier lugar de tu código HTML gracias a el elemento <style> y al atributo "style, de las siguientes maneras:
Sin embargo, lo aconsejable es mantener los estilos fuera de los documentos HTML, para ser controlados desde un archivo de extensión ".css", y para argumentar este punto podemos hacer la siguiente reflexión:
Si tienes 2 o 3, ó 10 páginas html y con ellas creas un sitio web, y en todas y cada una de ellas deseas tener contenedores con fondo rojo, ¿qué es más fácil de mantener en el tiempo?
1. Tener que buscar y editar en las 10 páginas html el fragmento de código que controla a los contenedores rojos
2. Controlar todos los contenedores de fondo rojo, desde una simple linea de código
Podemos convenir en que la respuesta es más que evidente, y para ello, puedes insertar tu archivo css, desde donde vas a controlar todos los aspectos estéticos de tu sitio, en la etiqueta <head> de tus páginas web de la siguiente manera:
Y listo, ya tendrás la capacidad de afectar estéticamente a tus archivos HTML, desde tu archivo CSS.
Sin embargo y antes de avanzar, quisiéramos definir la conversión semántica y lógica más importante:
No escribas CSS para elementos particulares constantemente, trata de crear elementos rehusables, normas generales que te sirvan para utilizarlas una y otra vez en distintos elementos.
Estructura, proyecta y escribe código multipropósito con el final de hacer tus desarrollos mucho más fluidos y rápidos.
Selectores y Ejemplos
Si bien los selectores forman parte de la sintaxis del CSS, debemos reconocer que son el aspecto fundamental de la escritura de dicho lenguaje.
Conocer las propiedades que pueden ser modificables por CSS es fácil, pero hacer el selector correcto para afectar el o los elementos correctos, ya es arena de otro costal.
Entonces, debido no solo a que son la piedra angular del lenguaje, pero además, porque son sumamente esenciales en el desarrollo de JavaScript, hemos decidido destacar esta lección del aprendizaje para enfatizar la importancia de conocer a profundidad el cómo escribir, utilizar y combinar los selectores, y fungir como punto de apoyo a tu curiosidad.
A continuación, vamos a exponer los selectores de manera básica, sin embargo para revisar la documentación detallada del lenguaje te dejamos el siguiente enlace:
1. Selectores de Tipo:
Elementos HTML en bruto, sin puntos, sin adornos, sin corchetes angulares, ¿quieres afectar a todos los <div>? use el selector div{}.
Sintaxis: Elemento-Html{...}, div{...}, p{...}
/* CSS */
/* <div> con fondos rojos */
div{
background: darkred;
}
/* <p> con letras blancas */
p{
color: white;
}
/* HTML */
<div>
<p>
Fondo rojo, letras blancas
</p>
</div>
Fondo rojo, letras blancas
2. Selectores de ID (#):
Al colocar a un elemento HTML el atributo ID, lo haces único; Puedes usar este ID para que el CSS modifique exclusivamente al elemento objetivo.
Sintaxis: #id{...}
/* Considera este HTML */
<div>
<p> Div rojo </p>
</div>
<div id="azul">
<p> Fondo azul </p>
</div>
<div>
<p> Div rojo </p>
</div>
/*
Ahora, deseo que el div del medio sea azul,
así que lo selecciono con su ID
*/
#azul{
background: darkblue;
}
Div rojo
#azul
Div rojo
3. Selectores de Atributo ([attr]):
El más lento de los 4 selectores primarios, ubica al elemento HTML con determinado atributo, omitiendo a los demás elementos hermanos que no lo posean. Se debe usar sabiamente, en casos estratégicos.
Sintaxis: elem[atributo], elem[atributo="valor"]{...}
/* Considera este HTML */
<button type="button" disabled>
Deshabilitado
</button>
<button type="button">
Habilitado
</button>
<button type="button">
Habilitado
</button>
/*
Ahora crearemos un CSS que me
permita Mostrar al usuario cuando
un Botón está deshabilitado
*/
button{
background: #575757;
color: #fff;
border-radius: 10px;
}
button[disabled]{
background: #e6e6e6;
color: #b5b5b5;
}
4. Selectores de Clase (.ClassName):
No se dejen asustar por las "Clases", sobre todo si vienes de programar en BackEnd, donde las "Class" significan algo totalmente distinto.
En palabras lúdicas e informales, las clases son nombres que inventamos para crear una palabra rastreable por CSS que pueda ser rehusada, a diferencia de los IDs que son únicos.
Puedo asignarle "la clase" a varios elementos HTML sin ningún tipo de restricción, y modificar su estética simultáneamente con CSS, y todo esto, a través del atributo "class" de html.
Les presento entonces, al selector por excelencia de CSSSintaxis: .ClassName{...}
/*
Ahora crearemos 2 clases
1 para crear DIVs de fondo rojo
Otra para crear DIVs de fondo azul
Presta atención a cómo seccionar las
responsabilidades de CSS
*/
.lt-white{
color: #fff;
}
.bg-red{
background-color: darkred;
}
.bg-blue{
background-color: darkblue;
}
-
¿Qué
te
Parece?
Este es el momento donde le decimos a los chicos de BackEnd que los engañamos.
La realidad es que la versatilidad del selector "class" reside en que gracias a él, puedes proyectar un sitio web entero con base en la creación de objetos reutilizables que llevan a la metodología "DRY", ó "Don't Repeat Yourself", la cual por ejemplo, te insta a no colocarle el color blanco de las letras a TODOS los elementos que estás creado cuando en su lugar, puedes crear una clase llamada ".letras-blancas" y reutilizarla en TODOS los elementos que necesites.
Porque sí, un objeto HTML puede tener infinita cantidad de valores dentro de su atributo "class"
Antes de Avanzar con los selectores queremos subir la apuesta y traer colación algo que puedes haber intuido ya ..
¡¡Los Selectores Pueden Combinarse!!
Así pues, puedes crear clases especiales que solo afecten a determinados objetos, aumentando así la especificidad del selector.
Y si bien la especificidad es algo que se debe tratar con cuidado, para evitar crear problemas al momento de aumentar la escala de tu proyecto y la refactorización de código, conocer cómo crear selectores complejos te puede ayudar a solucionar problemas en proyectos, librerías o marcos de trabajo (frameworks) ya existentes.
Selectores Especiales ó Pseudo-clases
¿Cómo se muestran los "placeholders" en los elementos <input> si no los veo en HTML?, ¿cómo puedo afectar a elementos <div> que tengan elementos <p> SIN afectar a los otros <div>? ¿cómo puedo afectar a un elemento solamente cuando el cursor está encima de él?
La respuesta a todas estas preguntas y más, son los selectores especiales, capaces de ayudarte a seleccionar elementos con atributos específicos, activar eventos especiales e incluso crear o apuntar a pseudoelementos que no existen, en términos de código, en el DOM.
Son muchos para ser especificados en una guía básica, pero vamos a exponer algunos con el objetivo de tentar tu curiosidad. Recuerda que esta guía es un punto de partida para tu propia investigación.
1. Selector ":hover":
El selector especial clásico, el más usado, jamás pasa de moda. Te permite activar código CSS solo cuando el puntero del ratón pasa por encima del elemento, ó en el caso de los dispositivos móviles, cuando se presiona el elemento
/*
OJO
A partir de Ahora, el CSS de los ejemplos
tendrá un poco más de complejidad.
*/
.caja{
background-color: gray;
padding: .5% 1%;
}
.txt{
color: #fff
}
.redon{
border-radius: 10px;
}
.azul:hover{
background-color: darkblue;
}
.rojo:hover{
background-color: darkred;
}
-
Div
span
2. Selector ":not()":
Un selector especial que te permite afectar a un grupo de elementos que "NOT" contengan una determinada clase, o atributo, o que no sean un determinado elemento. Además, tiene una capa de complejidad más profunda cuando se mezcla con otros selectores.
Sintaxis: selector-primario:not(selectores a excluir){...}
/*
Tenemos un grupo de elementos
todos son de clase ".caja"
NO queremos afectar a los que tengan
la clase ".gray"
*/
.caja{
background-color: gray;
padding: .5% 1%;
}
.caja:not(.gray){
background-color: lightblue;
}
-
Div
span
3. Selector ":has()":
Un selector especial que te permite afectar a un grupo de elementos que "CONTENGA" una determinada clase, o atributo, o un determinado elemento entre sus elementos Descendientes. Además, tiene una capa de complejidad más profunda cuando se mezcla con otros selectores.
Sintaxis: selector-primario:has(selectores hijos a incluir){...}
/*
Tenemos un grupo de elementos
todos son de clase ".caja"
QUEREMOS afectar a los que tengan
la clase ".txt" en alguno de sus hijos
*/
.caja{
background-color: gray;
padding: .5% 1%;
}
.caja:has(.txt){
background-color: lightblue;
}
-
Div
span
Combinadores y Separadores
Para finalizar queremos aumentar aún más la complejidad, al introducir los combinadores y separadores, que son simbolos que te van a permitir mezclar los selectores y brindar aún más posibilidades a la hora de crear selectores.
Vamos a exponer brevemente algunos de ellos.
1. Combinador de descendientes " un espacio vacío ":
El combinador más básico y más usado, no está representado por ningún símbolo, es literalmente un espacio en blanco, y permite seleccionar a todos selectores hijos dentro del selector padre.
Sintaxis: .padre un espacio vacío .descendiente{...}
/*
Ejemplo
Quieres afectar a las clases ".txt"
que estén dentro de la clase ".caja"
*/
/* |padre| |hijo| */
.caja .txt{
}
2. Combinador de hijos ">":
A diferencia del combinador anterior, que afecta a TODOS los descendientes de un selector padre, este combinador, que es representado por un corchete angular, permite seleccionar SOLAMENTE a los descendientes directos de un elemento padre.
Sintaxis: .padre > .hijo{...}
/*
Ejemplo
Quieres afectar a las clases ".txt"
pero solo a aquellas que sean elementos
que están en el primer nivel de profundidad
de una clase .caja
*/
/* |padre| |hijo| */
.caja > .txt{ ... }
3. Combinador de Hermano Adjunto "+":
Este combinador permite seleccionar a los hermanos inmediatamente siguientes al selector base.
Sintaxis: .hermano-base + .hermano-directo{...}
/*
Ejemplo
El Presente código css solo va
a afectar a los elementos <p>
cuyo hermano anterior era un
elemento <img>
*/
/* |padre| |hijo| */
img + p{ ... }
Y hasta aquí llegamos con la introducción básica y resumida de los selectores.
La realidad es que es un tema profundamente amplio que abarcaremos mejor en subsiguientes guías, sin embargo, esperamos haber motivado tu curiosidad lo suficiente para que investigues sobre este fragmento fundamental de CSS.
Una vez más, en aras de promover las buenas practicas, a continuación expondremos algunas de las convenciones que existen para CSS.
1. Utiliza Libremente los Saltos de Línea:
Utiliza todos los saltos de línea, espacios e indentaciones necesarias para que tu código sea legible.
/* funciona pero es confuso */
.p{color:red;}
/* Recomendado*/
.p{
color:red;
}
2. CSS Inline vs. CSS Externo vs. CSS Interno:- inLine: dentro del elemento HTML (no recomendado).
- Interno: dentro del HTML, desde cualquier parte usando el elemento <style>, solo va poder afectar a los elementos que estén debajo de la etiqueta que lo contiene, OJO.
- Externo: fuera del elemento HTML, desde un archivo ".css" (recomendado).
3. Considera correctamente usar un Framework CSS:- Ventajas: pueden facilitar el despliegue rápido de grandes proyectos, y también evitar errores. Y proporcionan la ventaja de la estandarización, que es esencial cuando varias personas trabajan en un proyecto al mismo tiempo.
- Desventajas: dan lugar a sitios web de aspecto genérico y gran parte del código puede acabar sin utilizarse lo cuál es negativo pues los archivos de css del framework tienden a pesar bastante.
4. Evita la Redundancia:
Otra de las mejores prácticas de CSS que debes seguir es evitar la redundancia siempre y cuando puedas. Apegate al método DRY antes mencionado e intenta usar abreviaturas en CSS.
/* Este grupo de declaraciones.. */
.div{
background-color: red;
background-image: url(img.jpg);
background-position: center;
background-repeat: no-repeat;
}
/* Pueden ser abreviadas así*/
.div{
background: red center no-repeat url(img.jpg);
}
5. Combina los Elementos Cuando sea Posible:
En lugar de enumerar los elementos uno por uno, combínalos para ahorrar espacio y tiempo.
/* Este grupo de reglas */
h1{
color: red;
}
h2{
color: red;
}
h3{
color: red;
}
/* Pueden ser Combinadas así*/
h1, h2, h3{
color: red;
}
6. Evita los Selectores Adicionales Innecesarios:
Por ejemplo, si vas a dar estilo a las listas de tu sitio web, no necesitas utilizar selectores como "html > body > main > div > ul > li {...}" ..
Asigna una clase al contenedor donde está la lista que deseas afectar, y simplemente apunta a la lista dentro de esa clase.
".lista-roja li {...}" ..
7. Prioriza Grid y Flex-Box sobre elementos "<table>":
Para mejorar no solo las métricas de SEO, pero también la accesibilidad de la página, es importante tender hacia diseños ajustables al tamaño de la pantalla del dispositivo (Responsividad), y que permita una excelente experiencia para todos los usuarios sin distinción (Accesibilidad)
«No dejes que te lo cuenten, vívelo»
¡Por fin!, terminamos con el hermano elegante de la triada del desarrollo web.
Si tenemos que hacer un resumen de la presente guía sería algo como:
- Mantén tu código limpio y abreviado.
- Emplea sabiamente los recursos y selectores a tu disposición.
- Por favor, no uses CSS en línea.
- No te repitas a ti mismo (DRY).
- Aprender sobre selectores es importante, nunca dejes de estudiar.
- En serio, por favor, no uses CSS en línea.
Links para que continúes tus estudios:
¿Recuerdas que hemos estado hablando de código estructurado, que se lee de arriba abajo y de izquierda a derecha, limpio, resumido y sencillo? Olvídate de todo eso, es hora de conocer al hermano rebelde de la triada web. Conozcamos a JavaScript.