En este artículo, discutiremos los elementos y cómo agregar un color específico a un elemento usando las propiedades CSS .
Básicamente, el elemento HTML es la colección de etiquetas de inicio y finalización con el contenido insertado entre ellas. Los elementos se pueden anidar.
<tagname> Content </tagname>
Nota: Consulte el artículo Elementos HTML para una mejor comprensión.
Acercarse:
- Para agregar color al texto, use la propiedad de color CSS .
- Para agregar color al cuadro, use la propiedad CSS background-color .
- Para agregar color al borde, use la propiedad CSS border-color .
Ejemplo 1: Agregue color al texto usando el enfoque anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Element Color</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
En el código anterior, creamos una etiqueta h1 y cambiamos el color del texto a verde. Para cambiar el color del texto, hemos utilizado la propiedad de color CSS .
Producción:
Color de texto
Ejemplo 2: Añadir color a la Caja.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Element Color</title>
<style>
.box-color {
background-color: lightgreen;
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<div class="box-color">GeeksforGeeks</div>
</body>
</html>
En el código anterior, hemos creado una etiqueta div con un color de cuadro de nombre de clase. En la etiqueta de estilo, hemos usado la propiedad CSS background-color para cambiar el color del fondo.
La misma propiedad de color de fondo también se usa para cambiar el fondo en la etiqueta del cuerpo para cambiar el color de toda la página web.
Producción:
color de la caja
Nota: Las dimensiones del diseño dependen totalmente del usuario.
Ejemplo 3: Agregar color al Borde.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Element Color</title>
<style>
.border {
border-color: green;
border-style: solid;
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<div class="border">GeeksforGeeks</div>
</body>
</html>
En el código anterior, hemos creado una etiqueta div con un borde de nombre de clase . En la etiqueta de estilo, hemos usado la propiedad border-color de CSS para cambiar el color y la propiedad border-style para que sea visible.
Producción:
Color del borde
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA