¿Qué es el CSS y para qué sirve?

css en html
5
(8)

Tal vez el mundo del desarrollo y la programación te suena a chino, pero has llegado al lugar indicado para aprender un poco sobre ello.

Pero sabes que, para crear una página web desde cero, los desarrolladores web utilizan un lenguaje específico de programación, ¿verdad?

Entonces ya sabes algo.

El CSS es uno de esos lenguajes, junto con el HTML, que transforma el contenido de una web para que sea visible para los usuarios. Más en concreto (aunque más abajo te lo explicaré en detalle), el CSS es un lenguaje de diseño que, junto con HTML, transforma el aspecto de una web. Mientras que el HTML estructura el contenido, el CSS define el estilo: colores, fuentes, márgenes, disposición, etc.

En este post, aprenderás lo más básico sobre el código CSS: qué es, cuál es su función, cómo aplicarlo en tus diseños web y algunos ejemplos sencillos.

¡Vamos allá! 🤗

¿Qué es el CSS y para qué sirve?

CSS significa “hojas de estilo en cascadas” (Cascading Style Sheets, en inglés). Como te decía hace un minuto, se trata de un lenguaje que da forma al diseño y a la presentación de un sitio web y es el responsable de que el usuario vea una web profesional.

Es decir, se encarga de implementar estilo (colores, fuentes, formas, márgenes, tamaños) a documentos en HTML o XML que contienen el contenido básico que compone una web.

Y me preguntarás… «Carol, ¿por qué hojas de estilo en cascadas?»

Verás.

Es simplemente porque, a la hora de trabajar con este tipo de lenguaje, se hace de arriba hacia abajo para leerlo, procesarlo y aplicarlo.

A continuación, te muestro un ejemplo de cómo verás una hoja de estilo CSS en una plantilla de WordPress.

body{
  font-family: Open Sans;
  letter-spacing: 0px;
}
h1, h2, h3, h4, h5, h6, .header .book-btn a, .slider .more-btn a.button{ 
  font-family: Nuosu SIL;
}
.main-navigation a:focus, .slider .inner_carousel h1 a:focus, .toggle-nav button:focus, .header .logo a:focus{
  outline: 1px solid #000;
}
/*----------------- Header ----------------*/
.header{
  background-color: #fff;
  box-shadow: 0px 0px 10px 0 #aaa;
  border-bottom: none;
  position: relative;
  z-index: 99;
}
.header .logo a, .header .logo p{
  color: #000000;
}
#popular-menu h4 a:hover, .contact-box p a:hover, .slider .inner_carousel h1 a:hover, .header .logo .site-title a:hover, .main-navigation a:hover, .main-navigation ul.sub-menu a:hover{
  color: #F53232;
}
.custom-social-icons i:hover{
  color: #F53232 !important;
}
.main-navigation a{
  color: #000000;
  font-weight: 600;
}

Probablemente estés pensando que aprender sobre el lenguaje CSS no es necesario para ti, ya que basta con instalar una plantilla en WordPress y ¡listo!

No obstante, te recomiendo que no te limites a eso. En cualquier momento, aunque trabajes con un tema prediseñado o incluso con un constructor web como Elementor, te apuesto lo que quieras a que necesitarás hacer alguna que otra modificación, aunque sea algo pequeño, en el código CSS.

¿Así que por qué no darle una oportunidad? 🙂

lenguaje css 1

Características principales del CSS

El código CSS es uno de los lenguajes de programación más populares en todo el mundo, así que algo tiene que tener, ¿verdad?

Aquí te muestro algunas de sus principales características:

No tiene nada que ver con HTML

El lenguaje HTML se utiliza para administrar la información que contiene una web, mientras que el código CSS se encarga de definir su estilo. No se puede separar uno del otro, ya que ambos trabajan en conjunto para mostrar la web al usuario.

Se utiliza en cualquier tipo de navegador y plataforma

Al tratarse de un lenguaje común que se encarga de dar forma a las páginas web, su uso es generalizado y es compatible con cualquier navegador que se precie, como Firefox, Microsoft Edge, Safari, etc.

Mejora el rendimiento de las páginas web

Al separar el lenguaje de contenido del estilo, la información se procesa más rápidamente. Esto, a su vez, mejora tanto la experiencia del usuario como la optimización web.

Se puede personalizar la apariencia de tu web

El lenguaje CSS ofrece una amplia variedad de herramientas que permiten a los desarrolladores desplegar toda su creatividad en los diseños. Con códigos de colores y tipografías, es posible acceder a infinitas combinaciones de paletas y fuentes. Además, el CSS proporciona elementos visuales que puedes adaptar para satisfacer las necesidades específicas del diseño de tu web.

Ventajas de usar CSS en tu web

Si aún no tienes claro por qué deberías aprender a utilizar el lenguaje CSS, aquí te explico algunas de sus ventajas. De esta forma, podrás valorar si realmente necesitas tener aunque sea una ligera idea sobre ello 😉

  • Gracias al lenguaje CSS puedes ahorrar mucho tiempo en tus diseños web, ya que puedes escribirlo una sola vez y replicar el resultado en cualquier página HTML.
  • El código CSS hace que los archivos de las páginas web pesen menos, por el hecho de que no es necesario añadir etiquetas en HTML.
  • Tanto su mantenimiento como sus actualizaciones son fáciles de realizar.
  • Te permite mantener el código HTML completamente limpio y tener un archivo CSS dedicado exclusivamente a los estilos y el diseño.
  • Tienes un control total sobre los estilos de HTML, ya que puedes cambiar fácilmente los diseños, colores, fuentes, márgenes y tamaños. Esto te permite personalizar y adaptar tu web a cualquier dispositivo.
  • Con el código CSS, los estilos externos se pueden cargar en un archivo separado.

Desventajas de usar CSS

Como puedes imaginar, trabajar con el lenguaje CSS también tiene algún que otro inconveniente. ¡Podrás ver que no todo es perfecto! 🙂

  • Su curva de aprendizaje es alta, por lo que de buenas a primeras, si eres principiante, puede que se te haga cuesta arriba entender cada uno de los entresijos que componen el código CSS, como sus propiedades y conceptos más avanzados. Tendrás que tener un poco de paciencia y dedicarle tiempo.
  • A pesar de que este lenguaje no suele tener ningún inconveniente con los navegadores, sí cabe la posibilidad de que alguno de ellos no lo interprete correctamente o renderice los estilos de otra forma.
  • Aunque el código CSS ofrece gran variedad de propiedades de diseño y maquetación, puede que te resulte algo escaso dependiendo de la complejidad de tu página web.
  • A la hora de encontrar errores en un código CSS resulta más complicado depurar y dar con el problema.

Ahora sí que sí, la pelota está en tu tejado para valorar si quieres aprender a usar CSS o no 😉

Cómo funciona el CSS

Cuando visitas una página web, tu navegador analiza toda la información que se encuentra en HTML y la convierte en un Modelo de Objetos del Documento, comúnmente conocido como DOM. Estos objetos se integrarán con los bloques de CSS para que el estilo seleccionado se aplique a ellos y se muestren con el formato correspondiente en el dispositivo.

En función de los selectores que hayas usado en tu CSS, se aplicarán diferentes propiedades a cada uno de los bloques en HTML. Al utilizarlos, podrás cambiar fácilmente el estilo para que todo el contenido esté alineado con la identidad corporativa de tu marca.

Vamos a verlo mucho más claro con un ejemplo, ¿te parece? ☺️

Imagina que quieres que un párrafo tenga un tipo de fuente y un color determinado. En este caso, tendrás que añadir el siguiente código CSS:

 <style>
p {
 font-size: 20px;
 font-family: Arial;
 color: green;
}
<style>

Ahora estás listo para que profundicemos un poco más en los diferentes estilos de CSS que puedes encontrar 🤗

Tipos de CSS más comunes

Es muy importante que en el momento de usar el CSS sepas qué hay a tu disposición diferentes estilos. Y según la función que le vayas a dar, utilizarás uno u otro en el desarrollo de tu web.

Veamos cada uno de ellos ☺️

CSS externo

El CSS externo se encuentra en un archivo independiente que se vincula al documento HTML mediante una etiqueta <link> en el <head>.

Como he venido mencionando a lo largo de todo el post, una hoja de estilos externa te permite aplicar los mismos estilos a múltiples documentos HTML, lo que hace que sea mucho más sencillo mantener la coherencia del diseño de una web. Además, si haces cambios en un único archivo CSS, estos se van a reflejar automáticamente en todas las páginas que estén vinculadas a él (con lo que ahorras un montón de tiempo y esfuerzo).

También es importante mencionar que el archivo CSS externo puede estar alojado tanto en tu propio hosting como en un hosting externo, en función de lo que necesites. Por ejemplo, hay sitios que utilizan una CDN (Content Delivery Network o red de distribución de contenidos) para cargar librerías de CSS alojadas de forma externa (Bootstrap, sin ir más lejos).

<!DOCTYPE html> 
<html> 
<head> 
    <title>Tiulo de la pagina</title> 
    <link rel="stylesheet" type="text/css" href="externo.css"> 
</head> 
<body> 
    <div>Este es un CSS externo.</div> 
</body> 
</html>

CSS interno

El estilo de CSS interno se trata de un código CSS que se encuentra introducido en el documento HTML. Este CSS lo verás en la sección de <head> y escrito en el interior del elemento <style>.

Normalmente, este estilo de CSS se usa en pequeños proyectos de desarrollo web o en páginas únicas en las que se busca dar su propio estilo. La razón es que resulta mucho más fácil guardar todo en un único archivo.

<!DOCTYPE html>
<html>
<head>
     <title>Tiulo de la pagina</title>
     <style>
         div {
             color:blue;
             background-color: rgb(42,25,100);
             width: 100px
             text-align: center;
             font-size: 14px;
        }
    <style>
</head>
<body>
    <div>Este es un CSS interno.</div>
</body>
</html>

CSS inline

El estilo de CSS inline se encuentra en el interior de la etiqueta HTML y se utiliza para modificar el estilo de un elemento en concreto. Como has podido ver en los anteriores estilos, la sintaxis de ambos era en forma de cascada. En cambio, la sintaxis del CSS inline va a aparecer como un valor del atributo.

Este tipo de estilo de CSS no es muy recomendable usarlo porque resulta inútil para programar, además de ser más difícil entenderlo en comparación con los otros. No obstante, está muy bien que lo conozcas por si se te da algún caso, y así poder diferenciarlo.

<!DOCTYPE html> 
<html> 
<head> 
     <title>Tiulo de la pagina</title> 
</head> 
<body> 
    <div style="background-color: rgb(54,54,128); width: 200px;
text-align: center; font-size: 14px;">Este es un CSS inline.</div>
</body> 
</html>

Sabiendo esto, ya estás listo para aprender cómo utilizarlo en tus próximos diseños web 🤗

Cómo usar el CSS

A continuación, te mostraré paso a paso cómo puedes utilizar el código CSS en tu página web. Así que toma papel y boli para no perderte ningún detalle 😉

Paso 1: Crea un archivo CSS

Primeramente, debes crear el archivo “styles.css” en tu página web.

/* styles.css */
body {
    font-family: Montserrat, sans-serif;
    background-color: #ffffff;
    color: #000000;
}

h1 {
    color: #0054ff;
}

📢 Importante: Para mantener una estructura bien organizada en tu web, lo más habitual es guardar las hojas de estilo en una carpeta dedicada (puedes llamarla «css»), aunque en realidad no es obligatorio. Puedes guardar el archivo styles.css en cualquier ubicación, pero asegúrate de indicar correctamente la ruta al vincularlo desde tu archivo HTML.

Paso 2: Crea un archivo HTML

El siguiente paso es crear el archivo HTML principal de tu proyecto, el que va a marcar la estructura de tu página web. Un ejemplo básico:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tu proyecto CSS</title>
</head>
<body>
    <h1>¡Bienvenido!</h1>
</body>
</html>

📢 Importante: Si ya lo tienes creado, simplemente ábrelo.

Paso 3: Vincula el archivo CSS al HTML

Tal como te comenté anteriormente, para aplicar el CSS externo a un documento HTML, es necesario que vincules ambos códigos. Para ello, se usa la etiqueta <link> en la sección <head> del archivo HTML.

Ten en cuenta que la ruta que incluyas en el atributo «href» debe coincidir con la ubicación exacta de tu archivo CSS. En el ejemplo siguiente, «css/styles.css» indica que mi archivo «styles.css» está guardado dentro de una carpeta llamada «css». Si tú has guardado el tuyo en una ubicación distinta o en una carpeta con otro nombre, tendrás que ajustar esa información.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tu proyecto CSS</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>¡Bienvenido!</h1>
</body>
</html>

Una vez hayas completado este paso, tu archivo HTML ya estará listo para mostrar los estilos que has definido en tu hoja de estilos CSS.

Ejemplos de uso de CSS

Ahora que ya sabes cómo puedes utilizar el lenguaje CSS, aquí te voy a enseñar algunos ejemplos básicos de uso para que te resulte un poco más fácil empezar desde cero.

¡Vamos a ello! 🙂

Modifica el color de fondo de la web

Si necesitas dar un toque diferente al fondo de tu página web, simplemente deberás utilizar el siguiente código CSS:

html {
  background-color: #e56843;
}

Añade una imagen de fondo

Probablemente habrá situaciones en que quieras añadir una imagen de fondo en uno de los elementos de tu sitio web. Para este caso, tendrás que usar un código CSS similar a este (en este ejemplo, hemos aplicado una imagen de fondo al footer de la web):

.footer {
  background-image: url('imagen-de-fondo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

Crea sombras en los textos

Si buscas que tus textos destaquen de alguna forma, puedes añadirles sombras. Por ejemplo, yo he usado el siguiente código CSS para aplicar sombra a los títulos H1 de mi web:

h1 {
    text-shadow: 5px 5px 2px rgba(0, 0, 255, 1);
}

¿Qué significa este código exactamente?

Verás.

La sombra de este texto va a estar desplazada a 5 píxeles hacia la derecha y 5 píxeles hacia abajo. Y, además de ello, va a tener un desenfoque de 2 píxeles con un azul semitransparente.

Utiliza distintas fuentes en un texto

Si necesitas combinar varias fuentes en tu diseño (por ejemplo, una para los títulos y otra para el cuerpo del texto), puedes hacerlo así:

h1 {
  font-family: Arial;
  font-style: black;
  text-align: center;
}

body {
  font-family: Montserrat;
  font-style: regular;
  letter-spacing: 1px;
}

En este caso, puedes ver que para el título se usaría la fuente “Arial” negrita, además de que estaría alineada hacia el centro. Mientras que la fuente que se utilizaría para el cuerpo del texto sería una “Montserrat” regular.

Con estos ejemplos ya tienes una buena base para empezar a experimentar con CSS en tu web. Recuerda que el diseño es cuestión de práctica, así que ¡anímate a probar!

¿Cómo integrar el CSS con otros lenguajes de programación?

Si te surge la curiosidad de cómo algunos sitios web o aplicaciones cuentan con animaciones y elementos mucho más dinámicos. A continuación te muestro otros lenguajes que se añaden al código CSS para conseguirlo:

HTML

Tal como mencioné al principio de este post, el CSS y el HTML van de la mano, ya que el CSS da el toque más visual a los elementos definidos en HTML. Como ya sabes, para aplicar un estilo CSS específico a los elementos HTML se hace desde la sección <head> del documento HTML añadiendo enlaces a archivos CSS. De este modo, se consigue dar la apariencia deseada a una web.

JavaScript

El lenguaje de JavaScript hace que una página web sea más interactiva y dinámica. Además, se pueden cambiar de manera dinámica las clases CSS de los elementos HTML, lo cual permite la modificación de los estilos en respuesta a eventos o acciones del usuario.

Con JavaScript, podrás añadir o eliminar clases CSS, modificar propiedades de estilo y crear animaciones.

Procesadores de CSS

Los procesadores de CSS, tales como Sass y Less, tienen funcionalidades extras para CSS, como variables, mixins, anidamiento y funciones.

Estos procesadores se producen desde el servidor y crean un código CSS útil que puede utilizarse en sitios web. Así que puedes añadir los procesadores de CSS en tu flujo de trabajo y usarlos para crear archivos CSS optimizados para un fácil mantenimiento.

Frameworks y gestores de contenidos

Tanto con frameworks como con CMS se puede añadir CSS personalizado para especificar el aspecto de una web o aplicación.

En el caso de que estés diseñando una página web con frameworks como Angular o React, puedes usar CSS junto con JavaScript para diseñar elementos y estilos específicos.

Lenguajes de backend

Si estás desarrollando una aplicación web complicada utilizando un lenguaje backend, como Python o PHP, puedes generar, de forma dinámica, el código CSS.

El lenguaje backend te permite crear clases de CSS específicas que se fundamentan en datos recuperados de una base de datos o implementar plantillas para añadir estilos dinámicos.

¿Alguna vez has usado CSS en tus diseños web?

Como ves, el CSS no es solo cosa de profesionales del desarrollo o diseño web. Es una herramienta muy útil que puedes aprender para añadir pequeños toques personalizados a tu sitio, incluso si usas un gestor de contenidos como WordPress.

De hecho, la mayoría de las páginas web que visitas a diario están construidas con HTML y CSS. Esto significa que, si te animas, puedes acceder a los archivos del tema de tu web y realizar algunos cambios por tu cuenta. Eso sí, ¡asegúrate de hacerlo de forma correcta para evitar problemas! 😎

Y tú, ¿qué tal te ha ido utilizando CSS? ¿Te ha resultado complicado? Si tienes dudas o quieres saber más, déjame un comentario. ¡Estaré encantada de echarte una mano! 😊

¡Puntúa este artículo!

Total votos: 8. Promedio: 5

Carol Ramos

Amante del mundo de las tecnologías y de todo lo relacionado con páginas web y marketing online. Dedico parte de mi tiempo a escribir en este blog con el objetivo de ayudarte a lanzar tu negocio online. ¡Emprendamos juntos este viaje!

No hay comentarios

Escribe un comentario