Las etiquetas HTML son un lenguaje de programación y etiquetación con códigos dentro de una página web, su función principal es darle instrucciones a cualquier sitio web sobre cómo debería mostrar los textos.
Por otro lado CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como html. CSS separa el contenido de la representación visual del sitio.
La diferencia entre un sitio web que implementa CSS y uno que no, es enorme y definitivamente se nota.
Quizás hayas visto algún sitio web que no se puede cargar por completo y tiene un fondo blanco con la mayor parte del texto en azul y negro. Eso significa que la parte CSS del sitio no se cargó correctamente o no existe.
CSS utiliza una sintaxis simple basada en el inglés con un conjunto de reglas que la gobiernan. Como mencionamos anteriormente, HTML no fue hecho con la intención de utilizar elementos de estilo, sino solo para el marcado de la página. Fue creado simplemente para describir el contenido. Por ejemplo:
<!-- Bloque de código eliminado por incompatibilidad -->Pero, ¿cómo le aplicas un estilo al párrafo? La estructura de sintaxis CSS es bastante simple. Cuenta con un selector y un bloque de declaración. Primero seleccionas un elemento y luego declaras lo que quieres hacer con él. Bastante sencillo
Es por ello que hoy te mostraremos algunas de las etiquetas mas utilizadas en CSS.
Font-family:
Define la familia tipográfica. Es conveniente poner una lista de dos o tres tipografías separadas por coma, porque si el usuario no tiene instalada la tipografía que nosotros elegimos, el navegador opta por mostrar la siguiente que debería ser una similar, si tampoco la tiene instalada, mostrará la tipografía por defecto.
<!-- Bloque de código eliminado por incompatibilidad -->Font-size:
Define el tamaño de la fuente y el valor se puede escribir en pixels o en ems. En este momento se recomienda usar ems. Los dos son valores relativos, el pixel es un valor relativo a la resolución de la pantalla, pero el em es relativo al tamaño de la fuente definida por el usuario. Si el usuario no cambió la configuración, el valor por defecto de los textos en todos los navegadores es de 16px. Entonces 1em = 16px.
<!-- Bloque de código eliminado por incompatibilidad -->Color:
Define el color de la tipografía. Los colores se pueden escribir de 3 formas distinas: con sistema hexadecimal, por ejemplo: #FF0000 (es rojo). Con los nombres de los colores (más limitado) por ejemplo: black, red, green. O usando RGB, esta paleta permite agregar el canal alfa para hacer transparencias.
<!-- Bloque de código eliminado por incompatibilidad -->Width:
Define el ancho de un elemento, el valor se puede escribir en pixels, ems o porcentaje.
<!-- Bloque de código eliminado por incompatibilidad -->Max-width o min-width:
Definen el ancho máximo o mínimo de un elemento. Muy importante en sitios adaptables.
<!-- Bloque de código eliminado por incompatibilidad -->Height:
Define el alto de un elemento, el valor se puede escribir en pixels, ems o porcentaje.
<!-- Bloque de código eliminado por incompatibilidad -->Max-height o min-height:
Definen el alto máximo o mínimo de un elemento. Muy importante en sitios adaptables.
<!-- Bloque de código eliminado por incompatibilidad -->Padding:
Es la distancia desde el borde de un elemento hasta su contenido.
<!-- Bloque de código eliminado por incompatibilidad -->Margin:
Es la distancia entre un elemento y otro (desde el borde de un elemento hacia afuera).
<!-- Bloque de código eliminado por incompatibilidad -->Border:
Define el borde de un elemento, su color, su estilo y grosor.
<!-- Bloque de código eliminado por incompatibilidad -->Background:
Define los fondos de un objeto. El fondo puede ser una imagen o un color. El color puede ser pleno o degradado. La imagen se puede repetir formando una trama (es lo que ocurre por defecto) o se puede especificar que no repita y que se coloque en determinada posición.
<!-- Bloque de código eliminado por incompatibilidad -->Estas son algunas de las propiedades básicas que normalmente usamos en nuestro día a día, ¿Cuál crees tu que hace falta aquí? Coméntanos en nuestros grupos de Telegram y Discord.