¿Cómo incluir el CSS en un proyecto web?

¿Cómo incluir el CSS en un proyecto web?

El CSS se encarga de la apariencia visual del sitio o página web. Controla colores, tipografías, tamaños...

El CSS (Cascading Style Sheets) o Hojas de Estilo en Cascada, en español, es el lenguaje encargado de dar vida y estilo a los documentos HTML. 

Mientras que HTML define la estructura y el contenido de una página web, el CSS se centra en su apariencia visual, permitiendo controlar elementos como colores, tipografías, tamaños y diseños más avanzados.

Importancia del CSS en la web 

Su principal ventaja es la posibilidad de aplicar estilos de manera consistente en todo un sitio web, facilitando cambios globales con poco esfuerzo.

Algunas razones por las que el CSS es fundamental:

  • Reutilización de estilos: Los mismos estilos pueden aplicarse a múltiples páginas, ahorrando tiempo considerablemente.

  • Flexibilidad en diseño: Permite adaptarse fácilmente a diferentes dispositivos y resoluciones de pantalla.

  • Separación de contenido y presentación: Mantiene el código HTML limpio y enfocado en la estructura, mientras que el CSS se encarga del diseño, facilitando la colaboración entre desarrolladores y diseñadores, entre otras.

Estructura de una hoja de estilo CSS

Una hoja de estilo está compuesta por selectorespropiedades y valores. Por ejemplo:



En este caso:

  • h1 es el selector que apunta a los encabezados <h1>.
  • color y font-size son las propiedades.
  • blue y 24px son los valores aplicados.

Por lo tanto, el encabezado H1 será de color azul y tendrá un tamaño de 24 pixeles.

Cómo incluirlo en tu proyecto

El CSS puede ser incluido en un proyecto de tres formas:

CSS en línea:
Se escribe directamente en la etiqueta HTML usando el atributo style.



2. CSS interno:
Se escribe dentro de una etiqueta <style> en el archivo HTML.



3. CSS externo:
Se escribe en un archivo .css separado y se vincula al HTML con la etiqueta <link>. 



Esta es la manera más recomendada, ya que facilita los cambios de forma masiva en todo un sitio web.


Infórmate sobre los nanocursos de CSS y HTML (a distancia) de Teleduc.

Regresar al blog

Deja un comentario

Ten en cuenta que los comentarios deben aprobarse antes de que se publiquen.

Mantente informado con TELEDUC UC ¿Quieres inscribirte a nuestro newsletter?

Inscribirme

Artículos relacionados

Programas relacionados

Cursos para ti