CSS: una guía simple para principiantes
julio 16, 2023
CSS
CSS, también conocido como Hojas de Estilo en Cascada, es el conjunto de reglas y código que utilizas para dar estilo y personalizar tu página web. CSS Básico te brinda los fundamentos necesarios para dar tus primeros pasos en este campo. Este módulo abordará y responderá preguntas comunes que puedas tener, tales como: ¿Cómo puedo cambiar el color del texto a rojo o negro? ¿Cómo puedo posicionar mi contenido en diferentes lugares de la pantalla? ¿Cómo puedo decorar mi página web utilizando imágenes de fondo y colores?
Antes de CSS, empecemos por HTML
En esencia, HTML es un lenguaje simple que se compone de elementos. Estos elementos se aplican a diferentes partes de texto en un documento, brindándoles un significado específico (como un párrafo, una lista con viñetas o parte de una tabla). Además, HTML permite estructurar un documento en secciones lógicas, como una cabecera, tres columnas de contenido o un menú de navegación. También ofrece la posibilidad de incrustar contenido multimedia, como imágenes y videos, en una página web. Se recomienda aprender HTML y CSS al mismo tiempo, trabajando de forma conjunta ambas disciplinas. CSS aporta un valor añadido a HTML y no podrás aprender CSS sin controlar HTML.
Empezar con CSS
A diferencia de HTML, CSS (Cascading Style Sheets) no es un lenguaje de programación ni un lenguaje de marcado. Se considera un lenguaje de hojas de estilo, lo que significa que te permite aplicar estilos selectivamente a elementos en documentos HTML.
Ahora, para aplicar este CSS a tu documento HTML, necesitarás realizar unos pasos adicionales. Simplemente copia estas tres líneas de código CSS en un nuevo archivo en tu editor de texto y guárdalo como «style.css» en el directorio de estilos correspondiente.
Sin embargo, ten en cuenta que solo escribir el código CSS no cambiará cómo se muestra tu documento HTML en el navegador. Para que los estilos definidos en tu archivo CSS se apliquen correctamente, deberás vincular ese archivo CSS a tu documento HTML. Si no has seguido nuestro proyecto anteriormente, te recomendamos leer sobre el manejo de archivos y los conceptos básicos de HTML para comprender cómo realizar este paso correctamente.
- Abre tu archivo index.html y pega la siguiente línea en algún lugar dentro del <head>, es decir, entre las etiquetas <head> y </head>.
- Guarda el archivo index.html y cárgalo en tu navegador.
Partes de una regla de CSS
- Selector: Elige el elemento HTML al cual deseas aplicar el estilo. En el ejemplo dado, se utilizan los elementos
<p>. Puedes cambiar el selector para aplicar estilo a otros elementos según tus necesidades. - Define la propiedad específica del elemento al que deseas aplicar estilo. En este caso, se utiliza la propiedad
colorpara cambiar el color del texto a rojo. Puedes seleccionar cualquier otra propiedad que desees afectar en tu regla de estilo. - La regla de estilo completa especifica qué propiedad deseas modificar y cómo deseas que se vea. En el caso mencionado, se utiliza la regla color: red; para cambiar el color del texto a rojo en los elementos.
- En CSS, tienes varias opciones para aplicar estilo a un elemento HTML. Puedes seleccionar qué propiedad deseas modificar y cómo afectará visualmente al elemento. En el ejemplo, la propiedad color es modificada en los elementos <p>, pero hay muchas otras propiedades y formas de estilizar elementos en CSS.
Fuentes y texto
Después de familiarizarte con los fundamentos de CSS, es hora de agregar más información y reglas a tu archivo «style.css» para embellecer aún más tu ejemplo. Comenzaremos por mejorar las fuentes y el texto en general.
- Primero, asegúrate de haber guardado las fuentes de Google Fonts en un lugar seguro. Luego, busca el elemento <link> en tu archivo «index.html» y agrega el siguiente código en algún lugar dentro de la sección <head>.
- A continuación, añade las siguientes líneas de código en tu archivo «style.css», reemplazando la asignación de font-family con tu selección de fuentes obtenida en el paso «¿Cuál será la apariencia de tu sitio web?». Esta regla establecerá una fuente base global y un tamaño de fuente para toda la página. Dado que <html> es el elemento principal de la página, todos los elementos dentro de él heredarán estas propiedades de tamaño y fuente.
- A continuación, selecciona el tamaño de fuente deseado para los elementos de texto dentro del cuerpo del HTML, como <h1>, <li> y <p>. También puedes centrar el texto del título, establecer un ancho de línea y ajustar el espaciado entre letras para mejorar la legibilidad del contenido de texto. Puedes utilizar las siguientes reglas de ejemplo y ajustar los valores según tus preferencias.
Conclusiones
Esperamos que hayas logrado comprender los conceptos principales de cómo funciona CSS y de qué se trata a través de este artículo. No obstante, debemos destacar que se trata de una guía concisa y resumida. Por lo tanto, te recomendamos encarecidamente que, si deseas continuar tu aprendizaje y formación en CSS y/o HTML, busques y explores una variedad más amplia de guías, información, cursos y recursos adicionales.
Existe una vasta cantidad de recursos disponibles que te ayudarán a profundizar tus conocimientos y habilidades en CSS y HTML. Explorar diferentes guías y cursos te permitirá obtener una perspectiva más completa y diversa de estos lenguajes de diseño web. Además, podrás adquirir una comprensión más profunda de los diversos aspectos y técnicas avanzadas de CSS y HTML.
Mantén presente en todo momento que la práctica constante y la experimentación activa son elementos de vital importancia para lograr el dominio de estas habilidades. No te conformes con solo adquirir conocimientos teóricos, sino que es esencial que continúes explorando, practicando de manera regular y buscando constantemente nuevas fuentes de información y conocimiento para así mantener un progreso continuo en tu trayecto de aprendizaje en CSS y HTML.
Recuerda que el campo del desarrollo web es dinámico y en constante evolución, con nuevas técnicas y tendencias emergiendo regularmente. Para mantenerte actualizado y fortalecer tus habilidades, es recomendable estar al tanto de las últimas novedades, participar en comunidades en línea, seguir blogs especializados y considerar la posibilidad de asistir a talleres o cursos relacionados.
Aprovecha al máximo todas las oportunidades de aprendizaje que se te presenten, y nunca subestimes el poder de la práctica autodirigida. Practicar regularmente, abordar proyectos desafiantes y experimentar con nuevas técnicas te permitirá consolidar y expandir tu conocimiento en CSS y HTML. En este emocionante viaje de desarrollo web, te deseamos sinceramente un gran éxito y satisfacción personal. ¡Confiamos en que alcanzarás grandes logros y seguirás creciendo como profesional en este apasionante campo!
