Cómo agregar CSS

Tabla de contenido

Cuando un navegador lee una hoja de estilo, formateará el documento HTML de acuerdo con la información de la hoja de estilo.

Tres formas de insertar CSS

Hay tres formas de insertar una hoja de estilo:

CSS externo
CSS interno
CSS en línea

CSS externo

Con un hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando ¡solo un archivo!

Cada página HTML debe incluir una referencia al archivo de hoja de estilo externo dentro el elemento , dentro de la sección principal.

Ejemplo

Los estilos externos se definen dentro del elemento , dentro de la sección <head> de una página HTML:

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Una hoja de estilo externa se puede escribir en cualquier editor de texto y debe guardarse con una extensión .css.

El archivo .css externo no debe contener etiquetas HTML.

Así es como se ve el archivo "mystyle.css":

"miestilo.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

Nota: No agregue un espacio entre el valor de la propiedad (20) y la unidad. (px):

Incorrecto (espacio):

margin-left: 20 px;

Correcto (sin espacios):

margin-left: 20px;

CSS interno

Se puede utilizar una hoja de estilo interna si una sola página HTML tiene un estilo único.

El estilo interno se define dentro del elemento <style>, dentro del encabezado sección.

Ejemplo

Los estilos internos se definen dentro del elemento <style>, dentro de la sección <head> de una página HTML:

 <!DOCTYPE html>
<html>
<head>
<style>
body {
  
  background-color: linen;
}
h1 {
  color: maroon;
  
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a 
  heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS en línea

Se puede utilizar un estilo en línea para aplicar un estilo único a un solo elemento.

Para usar estilos en línea, agregue el atributo de estilo al elemento relevante. El El atributo de estilo puede contener cualquier propiedad CSS.

Ejemplo

Los estilos en línea se definen dentro del atributo "estilo" del archivo relevante. elemento:

 <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This 
  is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

  </body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Consejo: Un estilo en línea pierde muchas de las ventajas de una hoja de estilo (al mezclar contenido con presentación). Utilice este método con moderación.

Múltiples hojas de estilo

Si algunas propiedades se han definido para el mismo selector (elemento) en diferentes hojas de estilo, Se utilizará el valor de la última hoja de estilo leída.

Supongamos que una hoja de estilos externa tiene el siguiente estilo para el elemento <h1>:

h1
{
  color: navy;
}

Luego, supongamos que una hoja de estilos interna también tiene el siguiente estilo para el elemento <h1>:

h1
{
  color: orange;   
}

Ejemplo

Si el estilo interno se define después del enlace a la hoja de estilos externa, los elementos <h1> serán "naranja":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

Ejemplo

Sin embargo, si el estilo interno se define antes del enlace a la hoja de estilo externa, los elementos <h1> serán "Armada":

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

Orden en cascada

¿Qué estilo se utilizará cuando se especifique más de un estilo para un elemento HTML?

Todos los estilos de una página se "en cascada" en un nuevo estilo "virtual". hoja por las siguientes reglas, donde el número uno tiene la máxima prioridad:

Estilo en línea (dentro de un elemento HTML)
Hojas de estilo externas e internas (en la sección principal)
Navegador predeterminado

Por lo tanto, un estilo en línea tiene la máxima prioridad y anulará los estilos externos y estilos internos y valores predeterminados del navegador.

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>