19/3/23, 14:53 Estilos HTML CSS
Estilos HTML - CSS
❮ Anterior Próximo ❯
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
m a n i p u l a r t e x t o
C o l o r e s , C a j a s
¿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 más).
Usando CSS
CSS se puede agregar a documentos HTML de 3 maneras:
En línea : mediante el uso del style atributo dentro de los elementos HTML
[Link] 1/9
19/3/23, 14:53 Estilos HTML CSS
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 style atributo 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>
Inténtalo tú mismo "
ADVERTISEMENT
CSS interno
Se utiliza un CSS interno para definir un estilo para una sola página HTML.
[Link] 2/9
19/3/23, 14:53 Estilos HTML CSS
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>
Inténtalo tú mismo "
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="[Link]">
</head>
<body>
<h1>This is a heading</h1>
[Link] 3/9
19/3/23, 14:53 Estilos HTML CSS
<p>This is a paragraph.</p>
</body>
</html>
Inténtalo tú mismo "
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 "[Link]":
"[Link]":
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 color define el color del texto que se utilizará.
La propiedad CSS font-family define la fuente que se utilizará.
La propiedad CSS font-size define el tamaño del texto que se utilizará.
Ejemplo
[Link] 4/9
19/3/23, 14:53 Estilos HTML CSS
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>
Inténtalo tú mismo "
Borde CSS
La propiedad CSS border define 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;
}
Inténtalo tú mismo "
[Link] 5/9
19/3/23, 14:53 Estilos HTML CSS
Relleno CSS
La propiedad CSS padding define 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;
}
Inténtalo tú mismo "
Margen CSS
La propiedad CSS margin define un margen (espacio) fuera del borde.
Ejemplo
Uso de las propiedades de borde y margen CSS:
p {
border: 2px solid powderblue;
margin: 50px;
}
Inténtalo tú mismo "
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
[Link] 6/9
19/3/23, 14:53 Estilos HTML CSS
Este ejemplo utiliza una URL completa para vincular a una hoja de estilo:
<link rel="stylesheet" href="[Link]
Inténtalo tú mismo "
Ejemplo
Este ejemplo enlaza con una hoja de estilo ubicada en la carpeta html del sitio web actual:
<link rel="stylesheet" href="/html/[Link]">
Inténtalo tú mismo "
Ejemplo
Este ejemplo vincula a una hoja de estilo ubicada en la misma carpeta que la página actual:
<link rel="stylesheet" href="[Link]">
Inténtalo tú mismo "
Puede leer más sobre rutas de archivos en el capítulo Rutas de archivos HTML .
Resumen del capítulo
Use el style atributo HTML para el estilo en línea
Use el <style> elemento HTML para definir CSS interno
Use el <link> elemento HTML para hacer referencia a un archivo CSS externo
Use el elemento HTML <head> para almacenar elementos <style> y <link>
Use la color propiedad CSS para colores de texto
Use la font-family propiedad CSS para fuentes de texto
Use la font-size propiedad CSS para tamaños de texto
Usa la border propiedad CSS para los bordes
Use la padding propiedad CSS para el espacio dentro del borde
Use la margin propiedad CSS para el espacio fuera del borde
[Link] 7/9
19/3/23, 14:53 Estilos HTML CSS
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>
Enviar respuesta "
Comience el ejercicio
[Link] 8/9
19/3/23, 14:53 Estilos HTML CSS
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
[Link] 9/9