Definición de estilos CSS en la cabecera del documento

Podemos definir en la cabecera del documento, estilos que serán aplicados a toda la página. Es una forma muy comoda de darle formato a todo el documento ya que los estilos serán seguidos en toda la página y nos ahorraremos mucho código aplicado a etiquetas individuales.

Para cumplir con este fin haremos uso de la etiqueta <style> y </style> colocada en la cabecera de la página para definir los distintos estilos del documento.

Vamos a ver un ejemplo de su uso:

<html>
<head>
   <title>Primer Ejemplo CSS</title>
   <style type="text/css">
       #cuadro {
           width:400px;
           height:200px;
           margin:auto;
           padding:10px;
           background:#F60;
           box-shadow:10px 10px 10px #999;
           border-radius:20px 0 20px 0;
        }
       #cuadro h1 {
           font-family:Arial;
           font-size:24px;
           color:#FFF;
           text-align:center;
       }
   </style>
</head>
<body>
   <div id="cuadro">
       <h1>Ejemplo de uso de la etiqueta <style> </h1>
    </div>
</body>
</html>

Resultado:

Ejemplo de uso de la etiqueta <style>

Explicación:

Bien, primero vamos que la etique <style> se utiliza entre la etique <head> (cabecera) y </head> (fin de la etiqueta de cabecera)
Se definió la propiedad type="text/css" y esta indica al navegador que el código que sigue debe ser interpretado como estilo CSS
Se finalizan los estilos solamente cuando se cierra la etique con </style>
Cuando se define un nuevo estilo y se usa # se indica que se hará una división en la página web, tambien conocido como CAPA, en este caso la capa se llama cuadro1
Cada una de las propiedades modificadas en este código tienen su función y a continuación se detalla cada una:

width:400px; define el ancho de la capa en 400 pixeles
height:200px; define el alto de la capa en 200 pixeles
margin:auto; centra la capa en la página o dentro del elemento donde aplique
padding:10px; define la separación del texto a 10 pixeles del margen superior
background:#F60; define el fondo con color anaranjado
box-shadow:10px 10px 10px #999; esta propiedad define una sombra para la capa una sombra en la parte derecha e inferior de 10 pixeles con color gris
border-radius:20px 0 20px 0; esta propiedad es algo especial, porque permite redondear las esquinas de la capa, en este ejemplo se redondea la esquina superior izquierda y la inferior derecha con 20 pixeles

Los estilos definidos simpre se inician con { y se terminan con } y cada línea se finaliza con (;) punto y coma.

En el segundo estilo utilizamos el código #cuadro1 h1 { esto porque lo que queremos es que la modificación de la etiqueta de encabezado h1 solo tenga efecto dentro de la capa cuadro1, sus propiedades se explican a continuación:

font-family:Arial; define la fuente Arial
font-size:24px; establece el tamaño de fuente en 24 pixeles
color:#FFF; define el color blanco para el texto
text-align:center; centra el texto en la capa

Hazta aquí con esta lección, en la proxima estudiaremos como crear una capa principal y dentro de ella crearemos tres capas más colocadas en una posición exacta.

Espero que escriban sus dudas o comentarios.

Aprendamos CSS

sábado, 12 de mayo de 2012

Ejemplo de uso de la etiqueta <style>

1 comentario: