CSS
Tal vez te preguntes qué es CSS, pues aquí te haré un super resumen de qué es y para qué sirve.
CSS son las siglas en ingles para Cascading Style Sheet (Hojas de Estilo en Cascada).
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos.
El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML.
Se mandaron 9 propuestas pero solo 2 fueron tomadas en cuenta la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).
Los realizadores de estas 2 propuestas se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada una y así nació CSS.
¿Cómo funciona CSS?
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML .
La regla tiene dos partes: un selector y una declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
CSS puede seleccionar elementos HTML utilizando el nombre de etiqueta de un elemento. Un nombre de etiqueta es la palabra (o carácter) entre corchetes angulares de HTML.
Por ejemplo, en HTML, la etiqueta de un encabezado de tercer nivel es <h3>. La sintaxis CSS para seleccionar elementos <h3> es:
En el ejemplo anterior, todos los elementos <h3> serán seleccionados y las propiedades que escribamos se aplicaran a todos los elementos con esa etiqueta.
Inline Styles
Aunque CSS es un idioma diferente al HTML, es posible escribir código CSS directamente dentro del código HTML utilizando estilos en línea.
Para darle un estilo a un elemento HTML, se puede agregar el atributo de estilo directamente a la etiqueta de apertura. Después de agregar el atributo, se establecen los estilos usando la sintaxis de las propiedades y los valores.
La etiqueta <style>
Los estilos en línea son una forma rápida de diseñar HTML, pero también tienen limitaciones. Si quisieras diseñar, por ejemplo, múltiples elementos <p>, tendrías que agregar estilo en línea a cada elemento manualmente.
Afortunadamente, HTML permite escribir código CSS en su propia sección especificada con el elemento <style>. Para usar el elemento <style>, debe colocarse dentro del elemento <head>.
La principal diferencia es que puede especificar a qué selectores aplicar el estilo. En el siguiente ejemplo le estamos dando a todos los elementos <p>un color rojo y un tamaño de fuente de 20px.
El archivo .css
Los desarrolladores evitan mezclar código, almacenando código HTML y CSS en archivos separados (los archivos .html contienen solo código HTML, y los archivos .css contienen solo código CSS).
Se crea un archivo CSS utilizando la extensión de nombre de archivo .css.
Con un archivo CSS, puede escribir todo el código CSS necesario para diseñar una página sin sacrificar la legibilidad y la capacidad de mantenimiento del archivo HTML.
Cuando los códigos están en archivos separados, los archivos deben estar vinculados. De lo contrario, el archivo HTML no podrá ubicar el código CSS, y el estilo no se aplicará.
Podemos usar el elemento <link> para vincular archivos HTML y CSS juntos. El elemento <link> debe colocarse dentro del <head> del archivo HTML. Es una etiqueta de cierre automático y requiere los siguientes tres atributos:
- href: al igual que en la etiqueta
<a>, el valor de este atributo debe ser la dirección, o ruta, del archivo CSS. - type: este atributo describe el tipo de documento al que está vinculando (en este caso, un archivo CSS). El valor de este atributo debe establecerse como:“text/css”.
- rel: este atributo describe la relación entre el archivo HTML y el archivo CSS. Debido a que está vinculando a una hoja de estilo, el valor debe ser: “stylesheet”
Y con esto ya vinculamos nuestra hoja de estilo y los cambios que hagamos en ella se aplicaran a nuestro archivo .html.
Aprende más sobre la mejor forma de iniciarte en HTML y CSS visitando la página de MUKTEK
