InicioCrear web desde cero › Dar formato a un DIV

Dar formato a un DIV

Como darle formato a un DIV o capa con estilos CSS

Dando formato a un DIV

Esto se hace con estilos CSS, si hiciste el curso para aprender a crear una pagina web ya sabes crear una hoja de estilos y relacionarla con un archivo html.

Para darle formato a un DIV tenemos que identificarlo de alguna forma, para esto existe el atributo ID, en el pondremos el nombre del DIV para luego llamarlo desde la hoja de estilos, la forma de escribirlo es así:

<div id="capa1">¡Esta es mi primer capa!</div>

Como podemos ver, a esta capa le pusimo "capa1" de nombre, ahora solo nos falta abrir la hoja de estilos que creamos y llamarlo de esta manera:

#capa1{
    background-color:green;
}


esto hará que el color de fondo de esa capa sea verde, en la siguiente imagen se puede apreciar:
 

Ejemplo 1 maquetacion css

También podes ver este ejemplo haciendo clic acá.

Como vemos, el color se estira, esto es porque no le definimos un ancho determinado, para hacer agregaremos el atributo width a #capa1 de la siguiente forma:

#capa1{
    width:210px;
    background-color:green;   
}


Ahora seguramente ya verás el fondo verde en un area mucho mas corta como en este ejemplo, pero ¿que pasa si queremos que la capa sea mas alta?

Simple, le agregaremos el atributo height con el valor en pixeles que queramos, de esta forma:

#capa1{
    width:210px;
    height:300px;
    background-color:green;   
}

 

Ejemplo 3


Con esto ya tendremos una especie de rectangulo verde donde podremos agregar texto como queremos, acá esta el ejemplo.

En la siguiente lección veremos una nueva propiedad CSS para posicionar las capas, no te la pierdas!
 


Siguiente lección: propiedad float