Que es CSS y para que sirve?
El CSS podría definirse como un tipo de lenguaje que permite definir y crear la presentación
visual de un documento ya estructurado y escrito en un lenguaje de marcado como puede ser HTML.
Es decir, permite generar el diseño visual de páginas web e interfaces de usuario.
El código CSS hace la vida más fácil al desarrollador front-end al separar las estructura
de un documento HTML de su presentación. Dicho de otro modo el HTML actuaría como es esqueleto de
la web, definiendo su estructura básica, y el CSS añadiría toda la capa de personalización sobre
el que la web define su aspecto final.
Formas de aplicar CSS
a. Estilo Inline
Con este método, las instrucciones de diseño se integran directamente en el código
fuente mediante una etiqueta de estilo. Las propiedades deseadas solo se asignan a un
elemento, de modo que es posible realizar diseños diferentes en todo el documento HTML.
En el ejemplo siguiente, el encabezamiento H1 debe aparecer en azul y con un tamaño de
letra de 14:
<p> <h1 style="color:blue; font-size:14px;"></h1></a>Esto es un encabezado</h1></p>
b. Interna
En este caso, se incluye el CSS en la cabecera del documento HTML. La etiqueta de estilo
se convierte así en parte del elemento de cabecera y se aplica a todo el archivo.
Las instrucciones de diseño están contenidas en el documento, pero están separadas del código
HTML. En el siguiente ejemplo, se aplica el mismo comando que en el ejemplo anterior.
Esta vez, sin embargo, todos los encabezados H1 del archivo deben ser formateados de acuerdo
con la información.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1> Esto es un encabezado </h1>
<p>Esto es un párrafo</p>
</body>
</html>
c. Externo
Este es posiblemente el mejor método para enlazar CSS en HTML. Un sitio web suele
constar de muchas páginas, por lo que tiene sentido guardar las instrucciones de
diseño en un archivo separado. Esto permite una separación limpia entre el contenido
y el diseño y facilita el mantenimiento. El archivo exportado está simplemente vinculado
al documento HTML. Se guarda la hoja de estilos externa con la extensión .css y luego se
utiliza una etiqueta de enlace para incluirla en el archivo HTML.
En el siguiente ejemplo, el archivo CSS se llama stylesheet.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1> Esto es un encabezado </h1>
<p>Esto es un párrafo</p>
</body>
</html>
¿Cómo añadir comentarios en HTML?
Los comentarios en HTML se encapsulan entre <!-- y -->. Cualquier texto o código dentro
de estos delimitadores no será interpretado ni mostrado en el navegador, pero será visible
al inspeccionar el código fuente. Ejemplo:
<!-- Este es un comentario en HTML -->
Al comentar un bloque de código, se desactiva temporalmente su funcionalidad sin tener que
eliminarlo por completo. Esto es útil para realizar pruebas o realizar ajustes sin afectar
el código principal. Ejemplo:
<!--
<div class="elemento-oculto">
Contenido oculto temporalmente
</div> -->
