¿Qué es CSS?

Desarrollo web

CSS hojas de estilo en cascada por sus siglas en ingles, es la forma en la que se le puede dar estilo a los elementos de un documento html, permite separar el contenido del diseño. Mediante css es posible dar diseño a los elementos de un documento html es decir color de la fuente, tamaño de la fuente, color de fondo etc. Disposición de los elementos, de que manera se van a mostrar respecto al resto de elementos.

¿Cómo funciona CSS?

CSS funciona a partir de reglas aplicadas a elementos html mediante selectores, dentro de estas reglas están definidas las propiedades y el valor que el elemento seleccionado deberá cumplir. Veamos en la siguiente figura un ejemplo de una regla css.


 h1{
 color:#cda; 
 }

Como vemos una regla css está contenida dentro de las llaves {} la regla anterior será aplicada a todos los elementos h1 mediante este selector h1
Dentro de esta regla existe una declaración color:#cda; que establece que efecto tendrá la declaración dentro de la regla.
En la parte más interna de la regla encontramos la propiedad color y el valor #cda que serán afectados en esta declaración.


 p{
 margin:1rem;
 padding:1rem;
 font-family:tahoma;
 color:black;
 }

En resumen las reglas css están contenidad entre las llaves {} que contienen las declaraciones que afectarán al elemento seleccionado, dichas declaraciones estan separadas por un punto y coma ; Dentro de las declaraciones se encuentra la propiedad y el valor los cuales deben ser delimitados con el signo de dos puntos : al final la propiedad y su valor serán los que determinaran que atributo del elemento seleccionado será afectado.

¿Cómo se implementa CSS?

Hay tres opciones de agregar estilo con CSS a un documento HTML...

Opción 1 etiqueta link

En una hoja de estilos externa vinculada dentro de la etiqueta head mediante el tag link veamos...


<!DOCTYPE html>
<html>
<head>
 <title>Título</title>
 <link rel="stylesheet" type="text/css" href="http://gomez-site.mx/css/style.css" />
</head>
<body>
 <h1>Ejemplos</h1>
</body>
</html>

Mediante la etiqueta link se vincula la hoja de estilos en la que se cargan todos los estilos necesarios de la página (es importante mensionar que la hoja de estilos debe tener una extension .css), indicandole en la propiedad href la ubicación de esa hoja de estilos.

Opción 2 etiqueta style

Haciendo uso de la etiqueta style, dentro de ella se incluirán todos los estilos para el documento, de igual manera que la opción anterior esta se agregará dentro de la etiqueta head veamos el ejemplo.


<!DOCTYPE html>
<html>
<head>
 <title>Título</title>
 
 <style>
 body {
 padding-left: 11em;
 font-family: Georgia, "Times New Roman", serif;
 color: red;
 background-color: #d8da3d; 
 }
 
 h1 {
 font-family: Helvetica, Geneva, Arial, sans-serif;
 }
 </style>
 
</head>
<body>
 <h1>Ejemplos</h1>
</body>
</html>

Opción 3 propiedad style

Haciendo uso de la propiedad style de cada elemento al que se le pretenda dar estilo en particular.


<!DOCTYPE html>
<html>
<head>
 <title>Título</title>
</head>
<body>
 < h1 style="padding:1px;color:red;">Ejemplos</h1>
</body>
</html>

Hasta aquí hemos visto ¿qué es css? y como implementarlo, en otras entradas profundizaremos sobre css aspectos básicos sobre css, selectores etc.