Tutorial HTML

INICIO HTML Introducción HTML Editores HTML HTML básico Elementos HTML Atributos HTML Encabezados HTML Párrafos HTML Estilos HTML Formato HTML Cotizaciones HTML Comentarios HTML Colores HTML CSS HTML Enlaces HTML Imágenes HTML icono de favoritos HTML Tablas HTML Listas HTML Bloque HTML y en línea Clases HTML Identificación HTML Marcos flotantes HTML HTML JavaScript Rutas de archivo HTML Encabezado HTML Diseño HTML Responsivo HTML Código informático HTML Semántica HTML Guía de estilo HTML Entidades HTML Símbolos HTML Emoticonos HTML Juego de caracteres HTML Codificación de URL HTML HTML frente a XHTML

Formularios HTML

Formularios HTML Atributos de formulario HTML Elementos de formulario HTML Tipos de entrada HTML Atributos de entrada HTML Atributos de formulario de entrada HTML

Gráficos HTML

Lienzo HTML HTML SVG

Medios HTML

Medios HTML Vídeo HTML Audio HTML Complementos HTML HTML de YouTube

API de HTML

Geolocalización HTML Arrastrar/soltar HTML Almacenamiento web HTML Trabajadores web HTML SSE HTML

Ejemplos HTML

Ejemplos HTML Cuestionario HTML Ejercicios HTML Certificado HTML Resumen HTML Accesibilidad HTML

Referencias HTML

Lista de etiquetas HTML Atributos HTML Atributos globales HTML Compatibilidad con navegador HTML Eventos HTML Colores HTML Lienzo HTML Audio/vídeo HTML Tipos de documentos HTML Conjuntos de caracteres HTML Codificación de URL HTML Códigos de idioma HTML Mensajes HTTP Métodos HTTP Convertidor PX a EM Atajos de teclado

Estilos HTML - CSS


CSS significa hojas de estilo en cascada.

CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez.


CSS = Estilos y colores

manipular texto
Colores,  Cajas


¿Qué es CSS?

Las hojas de estilo en cascada (CSS) se utilizan para formatear el diseño de una página web.

Con CSS, puede controlar el color, la fuente, el tamaño del texto, el espaciado entre elementos, cómo se colocan y distribuyen los elementos, qué imágenes de fondo o colores de fondo se utilizarán, diferentes pantallas para diferentes dispositivos y tamaños de pantalla, y ¡mucho más!

Sugerencia: La palabra en cascada significa que un estilo aplicado a un elemento principal también se aplicará a todos los elementos secundarios dentro del elemento principal. Por lo tanto, si establece el color del cuerpo del texto en "azul", todos los encabezados, párrafos y otros elementos de texto dentro del cuerpo también obtendrán el mismo color (a menos que especifique algo diferente).


Usando CSS

CSS se puede agregar a documentos HTML de 3 maneras:

  • En línea : mediante el uso del styleatributo dentro de los elementos HTML
  • Interno - mediante el uso de un <style>elemento en la <head>sección
  • Externo : mediante el uso de un <link> elemento para vincular a un archivo CSS externo

La forma más común de agregar CSS es mantener los estilos en archivos CSS externos. Sin embargo, en este tutorial usaremos estilos en línea e internos, porque esto es más fácil de demostrar y más fácil para que usted mismo lo pruebe.


CSS en línea

Se utiliza un CSS en línea para aplicar un estilo único a un único elemento HTML.

Un CSS en línea usa el styleatributo de un elemento HTML.

El siguiente ejemplo establece el color del texto del <h1>elemento en azul y el color del texto del <p>elemento en rojo:

Ejemplo

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


CSS interno

Se utiliza un CSS interno para definir un estilo para una sola página HTML.

Un CSS interno se define en la <head>sección de una página HTML, dentro de un <style>elemento.

El siguiente ejemplo establece el color del texto de TODOS los <h1>elementos (en esa página) en azul y el color del texto de TODOS los <p>elementos en rojo. Además, la página se mostrará con un color de fondo "powderblue": 

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

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

</body>
</html>

CSS externo

Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.

Para usar una hoja de estilo externa, agregue un enlace en la <head>sección de cada página HTML:

Ejemplo

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

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

</body>
</html>

La hoja de estilo externa se puede escribir en cualquier editor de texto. El archivo no debe contener ningún código HTML y debe guardarse con una extensión .css.

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

"estilos.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Sugerencia: con una hoja de estilo externa, puede cambiar la apariencia de un sitio web completo, ¡cambiando un archivo!


Colores, fuentes y tamaños CSS

Aquí, demostraremos algunas propiedades CSS de uso común. Aprenderás más sobre ellos más adelante.

La propiedad CSS colordefine el color del texto que se utilizará.

La propiedad CSS font-familydefine la fuente que se utilizará.

La propiedad CSS font-sizedefine el tamaño del texto que se utilizará.

Ejemplo

Uso de las propiedades CSS color, font-family y font-size:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>

Borde CSS

La propiedad CSS borderdefine un borde alrededor de un elemento HTML.

Sugerencia: puede definir un borde para casi todos los elementos HTML.

Ejemplo

Uso de la propiedad de borde CSS: 

p {
  border: 2px solid powderblue;
}

Relleno CSS

La propiedad CSS paddingdefine un relleno (espacio) entre el texto y el borde.

Ejemplo

Uso de borde CSS y propiedades de relleno:

p {
  border: 2px solid powderblue;
  padding: 30px;
}

Margen CSS

La propiedad CSS margindefine un margen (espacio) fuera del borde.

Ejemplo

Uso de las propiedades de borde y margen CSS:

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Enlace a CSS externo

Las hojas de estilo externas se pueden referenciar con una URL completa o con una ruta relativa a la página web actual.

Ejemplo

Este ejemplo utiliza una URL completa para vincular a una hoja de estilo:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Ejemplo

Este ejemplo enlaza con una hoja de estilo ubicada en la carpeta html del sitio web actual: 

<link rel="stylesheet" href="/html/styles.css">

Ejemplo

Este ejemplo vincula a una hoja de estilo ubicada en la misma carpeta que la página actual:

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

Puede leer más sobre rutas de archivos en el capítulo Rutas de archivos HTML .


Resumen del capítulo

  • styleUse el atributo HTML para el estilo en línea
  • Use el elemento HTML <style>para definir CSS interno
  • Use el elemento HTML <link>para hacer referencia a un archivo CSS externo
  • Use el elemento HTML <head>para almacenar elementos <style> y <link>
  • Use la propiedad CSS colorpara colores de texto
  • Use la propiedad CSS font-familypara fuentes de texto
  • Use la propiedad CSS font-sizepara tamaños de texto
  • Usa la propiedad CSS borderpara los bordes
  • Use la propiedad CSS paddingpara el espacio dentro del borde
  • Use la propiedad CSS marginpara el espacio fuera del borde

Consejo: Puedes aprender mucho más sobre CSS en nuestro Tutorial de CSS .


Ejercicios HTML

Ponte a prueba con ejercicios

Ejercicio:

Use CSS para establecer el color de fondo del documento (cuerpo) en amarillo.

<!DOCTYPE html>
<html>
<título>
<estilo>

  :amarillo;

</style>
</head>
<body>

<h1>Mi página de inicio</h1>

</body>
</html>


Etiquetas de estilo HTML

Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource

Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .