¿Qué es el CSS o la hoja de estilo?

Lenguaje de hojas de estilo utilizado para renderizar elementos de documentos HTML o XML en una pantalla mientras se incorporan opciones de estilo (diseño, color, fuente, etc.) que crean una apariencia consistente en un sitio web.

¿Recuerdas HTML (Lenguaje de marcado de hipertexto)? ¿El lenguaje de codificación que sirve de base para todo el desarrollo web? Bueno, si HTML es el primer lenguaje que querrás aprender cuando estés interesado en construir sitios web, su primo CSS es el segundo más cercano.

¿Qué es el CSS y cómo se relaciona con el HMTL?

CSS significa Hojas de Estilo en Cascada (Cascading Style Sheets) con énfasis en “Estilo”. Mientras que el HTML se utiliza para estructurar un documento web (definiendo cosas como titulares y párrafos, y permitiéndo incrustar imágenes, vídeo y otros medios), el CSS viene a través de él y especifica los diseños, colores y fuentes de las páginas de estilo de su documento, todos ellos determinados con el CSS.

Piensa en HTML como la base (cada casa tiene una), y CSS como las opciones estéticas (hay una gran diferencia entre una mansión victoriana y una casa moderna de mediados de siglo).

¿Cómo funciona el CSS?

CSS aporta estilo a sus páginas web al interactuar con elementos HTML. Los elementos son los componentes HTML individuales de una página web, por ejemplo, un párrafo que en HTML podrían tener este aspecto:

<p>Este es mi párrafo</p>

Si quieres que este párrafo aparezca en color rosa y en negrita para las personas que vean tu página web a través de un navegador web, debes utilizar código CSS con este aspecto:

p { color:pink; font-weight:bold; }

En este caso, “p” (el párrafo) se denomina “selector”, es la parte del código CSS que especifica qué elemento HTML afectará el estilo CSS. En CSS, el selector se escribe a la izquierda del primer corchete.

La información entre corchetes se llama declaración y contiene propiedades y valores que se aplican al selector. Las propiedades son cosas como el tamaño de la fuente, el color y los márgenes, mientras que los valores son la configuración de esas propiedades.

En el ejemplo anterior, “color” y “font-weight” son ambas propiedades, y “pink” y “bold” son valores. El juego completo entre corchetes de p { color:pink; font-weight:bold; } es la declaración, y de nuevo, “p” (que significa el párrafo HTML) es el selector.

Estos mismos principios básicos se pueden aplicar para cambiar el tamaño de las fuentes, los colores de fondo, las marcas de margen y mucho más. Por ejemplo. . .

body { background-color:lightblue; }

…haría que el fondo de la página sea azul claro, o… .

p { font-size:20px; color:red; }

…creará un párrafo de fuente de 20 puntos con letras rojas.

¿CSS externo, interno o inline?

Sin embargo, te preguntarás cómo se aplica este código CSS al contenido HTML.

Al igual que el HTML, el CSS se escribe en texto simple y sencillo a través de un editor de texto o procesador de texto en tu pc, hay tres maneras principales de agregar ese código CSS a tus páginas HTML.

El código CSS (u hojas de estilo) puede ser externo, interno o en línea.

Las hojas de estilo externas se guardan como archivos.css y se pueden utilizar para determinar la apariencia de un sitio web completo a través de un archivo (en lugar de añadir instancias individuales de código CSS a cada elemento HTML que desee ajustar).

Para usar una hoja de estilo externa, sus archivos .html necesitan incluir una sección de encabezado que enlaza con la hoja de estilo externa y se ve algo así:

<head>
<link rel=”stylesheet” type=”text/css” href=mysitestyle.css”>
</head>

Esto enlazará el archivo .html con tu hoja de estilo externa (en este caso, mysitestyle.css), y todas las instrucciones CSS en ese archivo se aplicarán a sus páginas .html enlazadas.

Las hojas de estilo internas son instrucciones CSS escritas directamente en el encabezado de una página.html específica. (Esto es especialmente útil si tiene una sola página en un sitio que tiene un aspecto único.) Una hoja de estilo interna se parece a esto. . .

<head>
<style>
body { background-color:thistle; }
p { font-size:20px; color:mediumblue; }
</style>
</head>

…un color de fondo de cardo y párrafos con 20 puntos, una fuente azul mediana será ahora aplicada a esta única página.html.

Finalmente, los estilos en línea son fragmentos de CSS escritos directamente en código HTML, y aplicables sólo a una única instancia de codificación. Por ejemplo:

<h1 style=”font-size:40px;color:violet;”>Título</h1>

causaría que un titular específico en una sola página.html apareciera en violeta, con una fuente de 40 puntos.

En términos generales, las hojas de estilo externas son el método más eficiente para implementar CSS en un sitio web (es más fácil hacer un seguimiento e implementar el estilo de un sitio desde un archivo CSS dedicado), mientras que las hojas de estilo internas y el estilo en línea se pueden utilizar caso por caso cuando es necesario realizar cambios de estilo individuales.

Así que si el HTML es la base, los marcos, las paredes y las vigas que soportan su sitio web, considere CSS el color de la pintura, los estilos de las ventanas y el paisajismo que viene después. No puedes llegar a ninguna parte sin poner los cimientos primero, pero una vez que lo hagas, querrás seguir con un poco de estilo, y el CSS es el billete para desatar a tu decorador interior.

Nueva llamada a la acción
seo-checklist-guia

Descarga ahora nuestra Guía Esencial Técnica SEO Checklist para optimizar tu sitio web.

Menu