Descubre que es CSS, y sorpréndete con todo lo que puedes hacer

Escrito por: Iris P. Pacheco
enero 28, 2021

Ya has escuchado hablar de CSS, pero, aún tienes duda de lo ¿Qué es? y ¿para qué sirve?. ¿Quieres cambiar tu texto de color?, ¿Te gustaría poner una imagen de fondo?, ¿Quieres crear formas?, todo esto lo puedes hacer con CCS, y podemos empezar con tener definir que es y como empezar a usarlo.

¿Qué es CSS?

CSS por sus siglas en ingles Cascading Style Sheets, “hojas de estilo en cascada” fue desarrollado por el W3C en 1996. Es un lenguaje de hojas de estilo enfocado a, definir, crear y personalizar los elementos de un documento HTML.

Su nombre “hojas de estilo en cascada” se debe a que las características de los elementos se aplican de arriba hacia abajo con reglas que poseen un esquema de prioridades.

Con CSS definirás el aspecto visual de tu página web, (tipo de fuente, colores, tamaño, alineación, márgenes, formas, separación del contenido, etc.) y esté le indicará al navegador la información de los estilos que tiene que desplegar de una página web.

¿Para qué sirve?

CSS sirve para dar estilo a cualquier página web, y además de cambiar color, tipo de letra, alineación, tamaño, formas etc. Podrás hacer cosas como: animar elementos, cambiar la forma de las esquinas, degradados, entre muchas otras.

El código CSS hace más fácil el trabajo de un desarrollador front-end al separar la estructura de los documentos: HTML para la estructura de la web y CSS para agregar estilo.

CSS no se limita solo a darle formato a un texto de una página web, sino que además en conjunto con JS puedes definir por ejemplo: que el borde de un input en un formulario, cuando sea incorrecto cambie de color (como se muestra en la imagen de abajo).

Ejemplo de CSS + JS

En este formulario se puede ver el cambio de color del borde a rojo para indicarnos un error.

También puedes usar tu hoja de estilo para personalizar diferentes sitios web no solo uno.

¿Cómo funciona?

CSS tiene que estar enlazado con el código de HTML para poder observar como se ve en el navegador la personalización de tu sitio web, te explicaremos como hacerlo a continuación.

Cómo enlazar tu CSS con tu código de HTML

Supongamos que ya tienes tu archivo en HTML y quieres enlazar tu CSS, lo que tienes que hacer es lo siguiente:

  1. Vas a nombrar a tu documento de CSS “style.css”.
  2. En tu documento HTML entre las etiquetas <head> y </head> vas a colocar
<link href="styles/style.css" rel="stylesheet" type="text/css">

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Que es CSS</title>
  <link href="styles/style.css" rel="stylesheet" type="text/css">
</head>

Y con esto ya podrás ver en el navegador los estilos asignados a los elementos en tu página web.

Sintaxis básica de CSS

La sintaxis básica de CSS está compuesta por: uno o varios selectores y la declaración que se compone por la propiedad y valor de la propiedad, como se muestra en la imagen.
Sintaxis-CSS

  • Selector: Es el elemento de HTML al que se le aplicara el estilo definido en tu CSS.
  • Declaración: La declaración está compuesta por la propiedad y el valor de la propiedad, que especificara a cuál de las propiedades del elemento les quieres dar estilo.
  • Propiedades: Son las diferentes formas en las que se le puede dar estilo a un elemento de tu archivo HTML como en la imagen, donde color es una propiedad del selector en <p>. Tú seleccionas que propiedad es la que quieres modificar por ejemplo: color, tipo de letra, tamaño, negritas, alineación, etc. Aquí puedes ver las propiedades que puedes usar para tu sitio web.
  • Valor de la propiedad: Es el valor que decidas asignarle a la propiedad por ejemplo en lugar de blue pudo ser red, colores en formato rgb o en valores hexadecimales.

Otras partes importantes de la sintaxis:

  • Todas las reglas deben estar encapsuladas entre llaves ({}) después del selector.
  • Se tienen que escribir (:) para separar la propiedad y su valor.
  • Para separar las declaraciones dentro de cada regla se tiene que usar el punto y coma (;).
  • De este modo para modificar varios valores de la propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:
p {
  color: #FF0000;
  width: 500px;
  border: 1px solid black;
}

Tipos de selectores

Existen diferentes tipos de selectores, a continuación te explicaremos cada uno de ellos.

  • Selector de elemento. Llamado también como etiqueta, son todos los elementos especificados por HTML, como <p> “párrafo”
    HTML <p> CSS  p 
    HTML <div> CSS div
    HTML <h1> CSS h1
  • Selector por ID. Es un elemento de la página identificado con un id, solo se permite un único elemento por id.
    HTML <a id="hero-id"> CSS  #hero-id  
    HTML <nav id="holamundo"> CSS  #holamundo 
    HTML <section id="seccion-1"> CSS  #seccion-1
    
  • Selector por clase. Son los elementos de la página identificados con una clase (puede haber varios elementos con la misma clase).
    HTML<a class="hero-class">  CSS .hero-class 
    HTML<li class="lista-ordenada">  CSS .lista-ordenada 
    HTML<span class="servicios">  CSS .servicios
  • Selector de atributo. Son los elementos con un atributo especificado.
    HTML <a title="#internal"> CSS a[title]
    HTML <a href="https://plectrolab.com"> CSS a[href="https://plectrolab.com"] 
  • Selector de pseudoclase. Los elementos especificados, cuando está realizando la acción de la pseudo clase.
    HTML <a href="contacto.html">Selector por psuedoclase</a> CSS a:hover  
    HTML<input type="text" id="name" name="name" required  minlength="4" maxlength="8" size="10">
    CSS input:focus 

Recuerda que puedes agrupar selectores si lo que quieres es aplicar la misma regla, solo tienen que estar separados por comas (,) por ejemplo:

p,h1,lu,h3 {
  color: blue;
}

See the Pen
CSS que es
by Plectro lab (@Plectro-lab)
on CodePen.

Herencias

¿Qué son las herencias en CSS?. La herencia es un mecanismo por el cual las propiedades de un elemento padre hereda a sus elementos hijos.

Por ejemplo si a un elemento padre se le especifica el tipo de color y tipo de letra, todos los elementos que estén incluidos en él, van a tener el mismo color y tipo de letra, a menos de que se le haya asignado uno diferente.

Hay propiedades que no se heredan, generalmente son las que tienen que ver con la caja, por ejemplo los márgenes, ya que es poco probable que el margen que necesita el elemento padre sea el mismo que va a necesitar el elemento hijo.

Más Información

Si estás interesado en aprender más sobre CSS te dejamos algunos recursos que te pueden ayudar.

CSS ha crecido tanto, que es imposible que una persona almacene toda la información en el cerebro, pero conocer todo lo que puedes hacer, te ayudara en darle a una página web la personalización que tú decidas.

¿Necesitas ayuda?

Plectro Lab es una Agencia de desarrollo web con amplia experiencia desarrollando sitios web, aplicación móviles, redacción de contenido y SEO.

Quiero más información

También te podría interesar…

0 Comments

Trackbacks/Pingbacks

  1. Bootstrap: lo que necesitas saber del framework de CSS mas popular » Plectro Lab - […] un framework front-end de CSS con el cual puedes dar formas y estilos a un sitio web, fue desarrollado…

Submit a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *