CSS significa Hojas de estilo en cascada y es uno de los tres componentes básicos de la web junto con HTML y Javascript. Se puede decir que CSS es la cara de la web, y por lo tanto maneja todo lo que tiene que ver con el diseño. Con la ayuda de CSS, puede lograr todo, desde elegir fuentes en el texto hasta crear hermosas animaciones.
¿Qué puedes hacer con CSS?
Todas las formas posibles de cambiar el estilo del texto se pueden lograr con CSS. Puede poner el texto en negrita, rosa o grande. También puede hacer que los enlaces sean diferentes de otro texto haciendo que el texto del enlace sea azul y subrayado. CSS también se puede usar para determinar qué debería pasarle a un usuario que mantiene el puntero del mouse sobre un texto. Por alguna razón, es posible que desee que el texto cambie de color de verde a púrpura cuando mantenga el puntero del mouse sobre el texto y vuelva a cambiar a verde cuando mueva el puntero del mouse nuevamente.
También puede hacer muchas cosas que no tienen nada que ver con el texto. Se pueden crear muchos tipos de formas geométricas u otras formas con CSS. Por ejemplo, un círculo que se vuelve ovalado cuando lo sostienes
¿Cómo usar CSS?
Para poder usar CSS, primero necesita una comprensión básica de cómo funciona HTML. El código CSS señala elementos HTML para poder elegir a qué quieres aplicar un determinado diseño. Podemos partir de un párrafo estándar escrito así con HTML:
¡Soy un párrafo normal!
Puede cambiar el color del párrafo ingresando el código CSS correctamente en la etiqueta de inicio del elemento HTML. He aquí cómo hacer que el texto sea azul:
¡Soy un párrafo normal!
El estilo de atributo se usa aquí, donde el color se establece en azul. En lugar de ‘color: azul’, puede escribir ‘tamaño de fuente: 20 px’ para cambiar el tamaño del texto a 20 píxeles. El mismo patrón se sigue consistentemente con “cosa a cambiar: cambiar valor”. Sin embargo, el uso de CSS en las etiquetas HTML puede hacer que el código HTML sea complicado y difícil de mantener. Por lo tanto, generalmente coloca el código CSS en un documento separado y hace referencia a ese documento desde el documento HTML.
Otra opción es utilizar la etiqueta de estilo. El código CSS se puede ingresar entre
. Para acceder a todos los elementos de párrafo en un documento HTML y hacer que el color del texto de los párrafos sea azul, puede escribir lo siguiente:
¡Soy un párrafo normal!
p {color: azul; }
Dentro de las etiquetas de estilo dice p {color: azul; }, lo que significa que todos los párrafos deben tener color de texto azul. De esta forma, has separado el CSS del código HTML.
Si desea cambiar el color del texto en un párrafo específico, puede usar una clase para ese elemento. Puede acceder a la clase en el CSS escribiendo un punto seguido del nombre de la clase. Me gusta esto:
¡Soy un párrafo normal!
¡Soy un párrafo normal!
.azul {color: azul; }
Así, el primer párrafo recibió la clase “azul”, mientras que el segundo párrafo no recibió ninguna clase. El código CSS .blue {color: blue} significa que todos los elementos con la clase blue deben tener un color de texto azul. Tenga en cuenta que si un elemento h1 o un elemento completamente diferente tuvieran la clase azul, el contenido de esos elementos también tendría un color de texto azul.
Para hacer formas, se puede usar el elemento HTML div. Se puede crear un cuadrado azul de la siguiente manera:
.cuadrado {
ancho: 50px;
altura: 50px;
color de fondo: azul;
}
Tenga en cuenta que el elemento div está ‘vacío’, por lo que no hay texto entre las etiquetas de inicio y finalización. En su lugar, se establecen un ancho, un alto y un color de fondo para el elemento div. Cuando hay varias cosas a cambiar, estas se separan con un punto y coma de acuerdo al ejemplo anterior.
Un uso común de CSS es el posicionamiento de contenido.
Tal vez desee que el texto esté alineado a la derecha en lugar de alineado a la izquierda.
La alineación a la derecha de un párrafo se logra de la siguiente manera:
¡Soy un párrafo normal!
.right {alineación de texto: derecha; }
Tenga en cuenta que el nombre de la clase no tiene que ser ‘correcto’, pero se puede cambiar a cualquier cosa, siempre que se use el mismo nombre de clase en el código CSS para aplicar el diseño. Sin embargo, puede ser inteligente dar a las clases nombres lógicos basados en lo que está tratando de lograr.
CSS puede ser complicado de usar, especialmente cuando se deben lograr diseños más complicados. Algo que lo hace más fácil es que muchos de los problemas de diseño que puede enfrentar ya han sido resueltos por otra persona y, por lo tanto, a menudo es posible encontrar una solución simplemente buscando en Google.