Cómo usar un archivo css en html

Informática y Electrónica

HTML y CSS son los bloques fundamentales para crear cualquier sitio web moderno. HTML (Lenguaje de marcas de hipertexto) es el lenguaje de marcado utilizado para definir la estructura y el contenido del sitio web, mientras que CSS (Hojas de estilo en cascada) se utiliza para definir la apariencia visual del sitio web.

En este artículo, te mostraremos cómo utilizar un archivo CSS en HTML para personalizar la apariencia de tu sitio web. Aprenderás a vincular el archivo CSS a tu documento HTML, a definir las reglas de estilo en el archivo CSS y a aplicar estas reglas a tus elementos HTML.

Antes de comenzar, asegúrate de tener un conocimiento básico de HTML y CSS. Si eres nuevo en estos lenguajes, te recomendamos que eches un vistazo a nuestras guías introductorias sobre HTML y CSS.

Crear un archivo CSS

Para crear un archivo CSS, debes utilizar un editor de texto como Notepad o Sublime Text. Sigue estos pasos:

Abre tu editor de texto preferido.
Crea un nuevo documento vacío.
Guarda el documento con la extensión .css (por ejemplo, style.css).

Sintaxis del archivo CSS

El archivo CSS está compuesto por una serie de reglas que definen el estilo de los elementos HTML. Cada regla consta de dos partes: el selector y la declaración.

Selector: indica el elemento HTML al que se aplica el estilo.
Declaración: indica el estilo a aplicar al elemento seleccionado. Por ejemplo, para seleccionar todos los párrafos e establecer su color de texto en rojo, la regla se escribirá de la siguiente manera:

p {
  color: red;
}

En este caso, "p" es el selector que indica todos los párrafos del HTML mientras que "color: red;" es la declaración que establece el color del texto en rojo.

Vinculación del archivo CSS al HTML

Después de crear el archivo CSS, debes vincularlo a tu documento HTML. Hay dos formas de hacerlo:

Inserción directa: Inserta la siguiente línea de código dentro del tag head del HTML:

  <link rel="stylesheet" href="style.css">

Inserción interna: Inserta el código CSS dentro del tag style del HTML:

  <head> <style> /* inserta aquí el código CSS */ </style>
  </head>

Recuerda guardar tanto el archivo HTML como el archivo CSS en la misma carpeta para garantizar que el vínculo funcione correctamente.

Vincular el archivo CSS al HTML

Una vez que hayas creado tu archivo CSS, debes vincularlo a tu archivo HTML para que el estilo se aplique al contenido de la página web.

Método 1: Vinculación externa

El método más común para vincular Para agregar un archivo CSS a HTML, se utiliza un enlace externo. Para hacerlo, inserta el siguiente código en la sección <head> de tu archivo HTML:

<link rel="stylesheet" type="text/css" href="style.css">

Donde "style.css" es el nombre de tu archivo CSS. Asegúrate de proporcionar la ruta correcta de tu archivo CSS en caso de que esté en una carpeta diferente al HTML.

Método 2: Estilo interno

También puedes incluir el estilo directamente en la sección <head> de tu documento HTML utilizando la etiqueta <style>. Así es cómo:

<head>
    <style type="text/css">
        /* Inserta aquí tus reglas CSS */
    </style>
</head>

Asegúrate de incluir el tipo de medio "text/css" en la etiqueta <style>.

Ambos métodos funcionan bien, pero generalmente se prefiere el uso del enlace externo porque permite mantener el estilo separado del contenido y hace más fácil la gestión de los archivos.

Escribir el código CSS

Después de crear el archivo CSS, puedes comenzar a escribir el código. El código CSS está compuesto por reglas que definen cómo los elementos HTML deben ser visualizados en la pantalla.

Sintaxis del código CSS

La sintaxis básica para una regla CSS es la siguiente:

Selector: identifica el elemento HTML al que se aplica la regla.
{}: delimita el bloque de declaraciones de la regla.
Propiedad: define el aspecto del elemento seleccionado.
Valor: especifica el valor de la propiedad.

Ejemplo:

selector {
  propiedad: valor;
}

Por ejemplo, si deseas cambiar el color del texto de todos los párrafos en un documento HTML, puedes usar el selector "p" (que selecciona todas las etiquetas <p>) y la propiedad "color" con un valor específico:

p {
  color: blue;
}

En este caso, todos los párrafos en el documento tendrán texto de color azul.

Cómo aplicar las reglas CSS a los elementos HTML

Para aplicar las reglas CSS a los elementos HTML, debes vincular el archivo CSS al documento HTML utilizando la etiqueta <link> en la sección <head> del documento HTML.

Ejemplo:

<!DOCTYPE html>
<html>
  <head> <title>Título del documento</title> <link rel="stylesheet" href="style.css">
  </head>
  <body> ...
  </body>
</html>

En este ejemplo, el archivo CSS "style.css" está vinculado al documento HTML utilizando el atributo "href".

del tag <link>. El navegador leerá el archivo CSS y aplicará las reglas definidas en el archivo a todos los elementos HTML seleccionados por los selectores definidos en las reglas.

Utilizar las reglas CSS para modificar el estilo del HTML

CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para definir la apariencia y presentación de un documento HTML. Utilizando CSS, puedes modificar el color del texto, el tipo de letra, el tamaño del texto y muchas otras propiedades de estilo.

Para utilizar las reglas CSS en un archivo HTML, debes incluir el código CSS dentro de las etiquetas <style></style>. Por ejemplo:

<head>
  <title>Mi sitio web</title>
  <style> p { color: blue; font-size: 18px; }
  </style>
</head>

<body>
  <p>Este es un ejemplo de cómo utilizar las reglas CSS.</p>
</body>

En este ejemplo, hemos definido una regla CSS para los párrafos (<p>) en nuestro documento HTML. La regla especifica que el color del texto debe ser azul y el tamaño del carácter debe ser de 18 píxeles.

También puedes utilizar clases e IDs para aplicar las reglas CSS a partes específicas de tu página web. Por ejemplo:

<head>
  <title>Mi sitio web</title>
  <style> .titolo { font-size: 24px; font-weight: bold; } #sottotitolo { font-size: 18px; color: gray; }
  </style>
</head>

<body>
  <h1 class="titolo">¡Bienvenidos a mi sitio web!</h1>
  <h2 id="sottotitolo">Descubre nuestras ofertas especiales.</h2>
</body>

En este ejemplo, hemos definido una clase CSS llamada "titolo" para nuestro título principal y un ID CSS llamado "sottotitolo" para nuestro subtítulo. La clase "titolo" define el tamaño del carácter en 24 píxeles y el estilo del texto en negrita, mientras que el ID "sottotitolo" define el tamaño del carácter en 18 píxeles y el color del texto en gris.

Con el uso de las reglas CSS, puedes personalizar la apariencia de tu página HTML de manera fácil y rápida. Recuerda utilizar siempre las mejores prácticas para garantizar que tu código esté limpio y bien organizado.

Conclusiones

CSS es una herramienta poderosa para personalizar la apariencia de tu página web. Utilizando las reglas CSS, puedes modificar fácilmente el color del texto, el tamaño del carácter y muchas otras propiedades de estilo. Recuerda utilizar las clases e IDs para aplicar las reglas CSS a partes específicas de tu página web y seguir las mejores prácticas para garantizar que tu código esté limpio y bien organizado.

Ruggero Lecce - Consulente senior di personal branding in Italia

Michael Anderson - Ingeniero de software

Mi nombre es Michael Anderson y trabajo como ingeniero informático en Midland, Texas.

Mi pasión es compartir mi conocimiento en diversas áreas y mi objetivo es hacer la educación accesible para todos. Creo que es esencial explicar conceptos complejos de manera simple e interesante.

Con GlobalHowTo, mi objetivo es motivar y enriquecer las mentes de aquellos que desean aprender.