¿Qué es CSS y para qué sirve?

  • Javier Contreras
  • Tutoriales
  • 28-08-2018 Publicado
  • 18-10-2020 Actualizado
  • 2425
El CSS le da vida y estética al HTML, en pocas palabras es la vestimenta de una página web.
¿Qué es CSS y para qué sirve?

CSS es un lenguaje de hojas de estilos el cual fue creado para dar diseño y presentación a documentos HTML y XML. Su finalidad es separar contenidos de la presentación de la página web, lo cual lo hacemos creando un archivo con extensión css y vinculándolo a un archivo de extensión html mediante la etiqueta link y el atributo href.

Este lenguaje nos ayuda a realizar modificaciones sobre el aspecto de cada etiqueta HTML; para dar diseño lo podemos hacer de dos formas mediante el atributo style o los identificacadores id y class. Cuando utilizamos el atributo style se debe agregar el css directamente en la etiqueta, ejemplo:

Style

<h1 style="color: yellow;background: silver;padding: 10px;text-align: center;"> Texto Título</h1>

Título

Identificadores Id y Class

<h1 id="titulo-principal" class="titulo">Título Principal</h1>
<h1 id="titulo-secundario" class="titulo">Título Secundario</h1>

El atributo id es para identificar elementos como únicos, y el atributo class es para compartir aspectos entre elementos. Por ejemplo, en el código anterior podemos ver que cada h1 tiene un id diferente y poseen el mismo class, entonces, vamos a programar el css de cada atributo para que ver la diferencia.

 

/* Para declarar un id se antepone un # y para un class se antepone un . */ 
#titulo-principal{ background: yellow; text-align: left; }
#titulo-secundario{ background: orange; text-align: right; }
.titulo{ color: green; padding: 10px; text-decoration: underline; }

Título Principal

Título Secundario

Hemos podido visualizar que existen aspectos compartidos y otros diferentes entre los títulos, el atributo id de cada etiqueta tiene un color de fondo y una alineación de texto diferente, en cambio el atributo class es el mismo para los dos títulos, por ende el color, el padding y text-decoration son iguales para las dos etiquetas h1.

Al igual que el Html el Css también puede ser validado debido a los estándares creados por la W3C.