Estilos CSS a un DIV

Diseño de un div Aplicaremos estilos a la etiqueta DIV html para ello haremos uso de estilos CSS para modificar colores, fondo, espacios y centrar texto

La etiqueta div. La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico. Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos.

Ademas posee atributos que pueden ser modificados con Estilos CSS, El elemento div es un contenedor genérico sin un significado semántico en particular. Se utiliza comúnmente en el desarrollo de documentos con propósitos estilísticos, en conjunto con los atributos style y class. También puede resultar útil para proveer atributos comunes a los elementos contenidos por el, como por ejemplo langtitle.

Ejemplo de uso de un DIV o varios DIVs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #cajanegra{
            border:1px solid red;
            width: 400px;
            height: 300px;
            padding: 10px;
            text-align: center;
            color: white;
            background: black;
            border-radius: 10px;
            margin: 0 auto;
        }
        #cajablanca{
            margin: 150px auto;
            width: 300px;
            height: 300px;
            text-align: center;
            border:1px solid white;
            background: #EDEDED url(https://www.textures.com/system/gallery/photos/Fabric/Carpet/107911/Carpet0012_1_270.jpg);
            box-shadow:0px 0px 50px black;
            border-radius: 50%;
            
        }
        .text-center{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="cajanegra" class="text-center">    
        <h1>HOLA 2019</h1> 
    </div>
    <div id="cajablanca" class="text-center">    
            <h1>BIENVENIDO</h1> 
    </div>
    
</body>
</html>

Aclaramos que para centrar el elemento h1 estamos usando flexbox en la clase.text-center;

.text-center{
            display: flex; // modifica la visualizaciòn de la capa
            justify-content: center; // centrar el contenido horizontalmente
            align-items: center; // centra el contenido verticalmente
        }

 

Siempre indicando que los estilos definidos deben corresponderse en un nuevo archivo, y hacer referencia de recurso a traves de la etiqueta link; no es recomedable cargar los estilos en el mismo documento html.

 

VIDEO Cómo aplicar estilos CSS a un div o capa en HTML

Visitas: 114 | Publicado:2019-01-02 11:59:36

Publicaciones que te pueden interesar

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::