Está en la página 1de 86

Hojas de estilo en cascada

Manual práctico de Hojas de Estilo en


cascada
Funcionalidades
Sintaxis

 CSS tiene una sintaxis propia.


 Puede ser aplicada:
– A pequeñas partes del documento
– A una parte más extensa del documento
– A todo el documento
CSS

 Las Hojas de Estilo permiten:


– Realizar cambios de color
– Realizar cambios de estilos tipográficos
– Posicionar texto e imágenes
– Otros
 Las CSS se puede utilizar para controlar muchos
documentos al mismo tiempo.
 El World Wide Web Consortium (W3C) se creó en 1994
para establecer los estándares técnicos del crecimiento
y desarrollo de la Web.
CSS

 El estándar creado por la W3C ha sufrido


varias modificaciones con el transcurrir de los
años.
 Uno de los principios básicos es que separa
la estructura de la presentación.
 “Separación de Contenido y presentación”
 Cambiando la hoja de estilo, cambiamos
todas las páginas.
CSS más ventajas para su uso

 Hace más accesibles a las páginas web


 Disminuye notablemente el trabajo de
producción, al separar el contenido de la
presentación.
 El Resultado es mejorado.
Sintaxis (1)

 La sintaxis está compuesta de tres partes:


– Un selector
– Una propiedad
– Un valor
 Selector {propiedad: valor}
Sintaxis (2)

 El Selector normalmente es el elemento o


etiqueta HTML que usted desea definir
 La Propiedad es el atributo que usted desea
cambiar
 Cada propiedad pueda tomar un valor definido.
 La Propiedad y el valor son separados por una
coma y encerrados por llaves.
Sintaxis (3)

 Body {color:black}

Si el valor contiene múltiples palabras, coloque


comillas alrededor del valor.

P {font-family:”sans serif”}
Sintaxis (4)

 SI usted quiere especificar más de una


propiedad, debe separarlas con un punto y
coma.
 El ejemplo debajo muestra como definir un
paragrafo alineado al centro, con un color de
texto rojo.
 p {text-align:center;color:red}
Sintaxis (5)

 Para hacer las definiciones de estilos más leíbles,


puede describir una propiedad en cada linea,
según como se muestra:
p
{
text-align:center;
color:black;
font-family:arial;
}
Sintaxis (6)

 Agrupando etiquetas
Usted puede agrupar etiquetas (selectores),
separados cada uno por una coma. En el ejemplo
debajo mostramos todos los títulos que se mostraran
en color verde.
h1,h2,h3,h4,h5,h6
{
color:green
}
Selector de Clases

 Con el selector de clases usted puede definir


diferentes estilos para el mismo tipo de
etiqueta (selector) HTML.
 A usted puede gustarle tener dos tipos de
párrafos en su documento: uno alineado a la
derecha, y otro párrafo centrado.
p.right {text-align:right}
p.center {text-align:center}
Atributo class

 También puede usar el atributo class en su


documento HTML
<p class=“right”>Este es un párrafo que será
alineado a la derecha</p>
<p class=“center”>Este es un párrafo que
será alineado al centro</p>
Más de una clase

 Para aplicar más de una clase en la etiqueta


HTML la sintaxis es:
<p class=“center bold”>Este es un
párrafo</p>
El párrafo indicado, tiene por estilo la clase
centrado y la clase negrita.
Estilo para todas las etiquetas

 También, puede omitir la etiqueta HTML para definir


un estilo que se aplicará para todas las etiquetas
HTML que tengan cierta clase.
.center {text-align:center}

<h1 class=“center”>Este es un título que está alineado


al centro</h1>
<p class=“center”>Este es un párrafo que también está
alineado al centro</p>
El selector id

 También puede definir estilos para etiquetas


HTML con el selector id. El selector id es
definido como #.
 La regla del estilo que se muestra hará que el
elemento que tenga el atributo id se muestre
con un valor en color verde.
#green {color:green}
Orden de la cascada

 ¿Qué estilo se aplicará cuando hay mas de


un estilo específo para un elemento HTML?
Generalmente decimos que todos los estilos
puede ser en cascada dentro de una nuevo
estilo virtual por la siguiente regla donde el
número 4 es es de más alta prioridad.
Orden de la cascada

1. Browser default
2. External Style Sheet
3. Internal Style Sheet (in the head section)
4. Inline Style (inside an HTML element)
CSS Background

 CSS background properties son usadas para definir


el efecto de fondo de un elemento.
 Los efectos usados para el background son:
– Background-color
– Background-image
– Background-repeat
– Background-attachment
– Background-position
Background-color

 La propiedad background-color, especifica el


color de fondo de un elemento.
 El background-color de una página es
definido en el selector body.
body {background-color:#b0c4de}
Background-color

 ELcolor de fondo puede ser especificado


para:
 name – a color name, like “red”
 RGB – an RGB value, like “rgb(255,0,0)
 Hex – a hex value, like “#FF0000”
Ejemplo

 En el ejemplo que se muestra, los elementos


h1, p, y div tienen diferentes colores de
fondo.
h1 {background-color:#6495ed}
p {background-color:#e0FFFF}
div {background-color:#b0c4de}
CSS Text

 Text Color
 Text Alignment
 Text Decoration
 Text Transformation
 Text Indentation
Text Color

 La propiedad color es usada para configurar el


color del texto. El color puede ser especificado
por:
 name – a color name, like “red”
 RGB – an RGB value, like “rgb(244,0,0)”
 Hex – a hex value, like “ff0000”
 El color por default de una página es definido
en el selector BODY.
Text Color - Ejemplo

body {color:blue}
h1 {color:#00ff00}
h2 {color:rgb(255,0,0)}
Text Alignment

 La propiedad Text-Alignment es usada para


configurar el alineamiento horizontal de un texto.
 El texto puede ser centrado, o alineado a la
izquierda o derecha o justificado.
 Cuando el alineamiento del texto es justificado, cada
linea es ajustada de manera que cada linea tenga el
mismo ancho y los márgenes a la izquierda y
derecha son ajustados. Esto es aplicable a revistas y
newspapers.
Text alignment - Ejemplo

h1 {text-align:center}
p.date {text-align:right}
p.main {text-align:justify}
Text Decoration

 La propiedad text-decoration es usada para


configurar o remover la decoration de un
texto.
 La propiedad text-decoration es
comúnmente usada para remover
subrayados de vínculos con propósitos de
diseño.
Text decoraration - Ejemplo

a {text-decoration:none}
También puede ser usada para decorar textos:
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
No es recomendable subrayar textos que no
son vínculos, porque confunden al usuario.
Text-Transformation

 Lapropiedad text-transformation es usada


para especificar letras mayúsculas,
minúsculas o la primera letra de cada
palabra mayúscula.
Text-transformation - Ejemplo

p.uppercase {text-transformation:uppercase}
p.lowercase {text-transformation:lowercase}
p.capitalize {text-transformation:capitalize}
Text-indentation

 La propiedad text-indentation es usada para


especificar la indentación de la primera línea de un
texto.
p {text-indent:50px}
 También se puede configurar el espacio entre
caracteres.
p {letter-spacing:-3px}
 Asimismo, se puede configurar la altura de la linea
de un párrafo
p {line-height: 110%}
Text-indentation

 También se puede configurar el espacio en


blanco entre palabras.
p {word-spacing:30px}
CSS FONT

 Las propiedades de CSS Font definen la familia del


tipo de letras, negrita, tamaño, y el estilo de un texto.
 CSS Font Families

En CSS hay dos tipos de nombres de familias:


generic family – Un grupo de familias de letras con
look similar (like “Serif” or “Monospace”)
font family – Una familia de letras específicas (like
“Times New Roman” or “Arial”)
Font Family
 La familia de letras de un texto es configurada con la
propiedad font-family.
 La propiedad font-family puede cambiar entre
diferentes nombres como un sistema “fallback”. Si el
browser, no soporta el primer tipo de letra, tratará
con el siguiente.
 Inicie con la letra que usted quiera, y finalice con una
familia genérica, para dejar que el browser elija una
letra similar y no otras letras que estén disponibles.
 Más de una familia de letras es especificada en una
lista separadas por comas.
Font Family - Ejemplo

p {font-family:”Times New Roman”, Georgia,


Serif}
Font Style

 La Propiedad Font-Style es mas usada para


especificar textos inclinados.
 Esta propiedad tiene tres valores:

- normal – El texto es mostrado normal


- italic – El texto es mostrado inclinado
- oblique – The text is “leaning” (oblique is
very similar to italic, but less supported)
Font Style - Ejemplo

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
Font Size

 La propiedad font-size configura el tamaño


del texto
 En el diseño de una web, el tamaño del texto
es un elemento que requiere administración.
Como quiera, usted puede no usar los
ajustes para el tamaño de la letra, de modo
de hacer párrafos ó encabezados mas
vistosos.
Font Size

 Elvalor del tamaño del texto puede ser


absoluto o relativo.
 Tamaño absoluto:
– Configura el texto a un tamaño específico
– No habilita al usuario para que éste haga cambios
en el tamaño del texto en todos los browsers.
– El tamaño absoluto es usado cuando el tamaño de
salida es conocido.
Font Size

 Tamaño Relativo:
– Configura el tamaño del texto relativo a los
elementos que lo rodean.
– Permite al usuario el cambio del tamaño del texto
en los browsers.
 Siusted no especifica el tamaño del texto, el
tamaño por default para un texto normal, en
párrafos es 16px. (16px=1em)
Configurar tamaño del texto usando
pixels

 La configuración del tamaño del texto con


pixeles confiere el control total sobre el
tamaño del texto.
 Ejemplo:
– h1 {font-size:40px}
– h2 {font-size:30px}
– p {font-size:14px}
Configurando el tamaño del texto
usando Em

 Para solucionar el problema de resizing con Internet


Explorer, muchos desarrolladores usan em en lugar
de pixels.
 La unidad de tamaño em es recomendada por la
W3C.
 1 em es igual al tamaño de letra actual. El tamaño
de letra por default en los browsers es 16 px. Por
ello el tamaño por default de 1em=16px.
 El tamaño puede ser calculado de pixels a em
usando esta fórmula: pixels/16=em
Ejemplo

h1 {font-size: 2.5em}
/* 40px/16 =2.5em */
h2 {font-size: 1.875em}
/* 30 px/16 = 1.875 */
p {font-size:0.875em}
/* 14px/16=0.875em */
Usando una combinación de
porcentajes y Em.

 La solución que trabaja en todos los


browsers, es para configurar por default el
tamaño de la letra el porcentaje en el cuerpo.
 body {font-size:100%}

h1 {font-size:2.5em}
h2 {font-size:1.875em}
p {font-size:0.875em}
CSS Box Model

 Todos los elementos HTML pueden ser


considerados como cajas. En CSS, el término
“box model” es usado cuando hablamos acerca
de la disposición de los elementos en el diseño.
 El modelo de Cajas CSS es esencialmente una
caja que envuelve a los elementos HTML y
consta de: los márgenes, las fronteras, el relleno
y el contenido real.
The CSS Box Model

 Explicación de las diferentes partes:


Margin: Limpia un area alrededor del borde. El margen no
tiene un color de background y este es completamente
transparente.
Border: Una frontera que está alrededor del padding y del
contenido. El border es afectado por el color de
background de la caja.
Content: El contenido de la caja, donde el texto y las
imágenes aparecerán.
Para configurar el ancho y la altura de un elemento correctamente
en todos los browsers, usted necesita conocer como trabaja el
modelo de cajas.
Ancho y altura de un elemento

 Importante:
Cuando usted especifica las propiedades del ancho y
la altura de un elemento con CSS, usted está
configurando el ancho y la altura del área de
contenido. Para conocer el tamaño total de un
elemento, usted también debe sumar el padding,
border y margin.
El ancho total de un elemento en el ejemplo que
sigue es 300px
Ancho y altura de un elemento

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

250px + 20px + 10px + 20px = 300px.


Ancho de un elemento

 El
total del ancho de un elemento siempre será
calculado de esta manera:
Ancho Total del elemento = ATE
ATE = width + left padding + right padding + left
border + right border + left margin + right
margin.
Altura de un elemento

La altura total de un elemento siempre será


calculada de ésta manera:
Total altura de un elemento= TAE

TAE = height + top padding + bottom padding +


top border + bottom border + top margin +
bottom margin.
Tema de compatibilidad de Browser

 Para que IE lea correctamente y muestre lo


que indicamos hay que agregar la siguiente
instrucción en el Documento HTML.
<!DOCTYPE html PUBLIC “-//W3C//DTD
XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1-transitional.dtd
>
(Antes de la instrucción <html>)
CSS Border

 La propiedad CSS Border define el borde


alrededor de un elemento.
 La Propiedad CSS Border muestra
específicamente el estilo y color del borde de
un elemento.
Border Style
La propiedad border-style especifica el tipo de borde a mostrar.
none: Defines no border
dotted: Defines a dotted border
solid: Defines a solid border
double: Defines two border. The width of th two border are the same
as the border-width value.
groove: Defines a 3D grooved border. The effect depends on the
border-color value.
ridge: Defines 3D ridget border. The effect depends on the border-
color value.
inset: Defines a 3D inset border. The effect depends on the border-
color value.
outset: Defines a 3D outset border. The effects depends on the
border-color value.
Border width

 La propiedad border width es usada para


configurar el ancho del borde.
 El ancho es configurado en pixels, o por
alguno de los valores pre-definidos: thin,
medium, or thick.
 La propiedad “border-width” no trabaja si es
usada sola. Use la propiedad “border-style”
para configurar primero los bordes.
Configuración de borde

 Así por ejemplo:


p
{
border-style:groove;
border-width:10px;
}
Border Color
 La propiedad border-color, es usada para configurar el color
del borde. El color puede ser configurado por:
name - especifique el nombre del color, tal como “red”.
RGB – especifique el valor RGB, tal como “rgb(255,0,0)”
Hex – especifique un valor headecimal, tal como “#FF0000”

Usted puede configurar el color de borde como “transparent”.


La propiedad “border-color” no trabaja si es usada sola. Use la
propiedad “border-style” para configurar primero los bordes.
border-color

 Ejemplo:

p.one
{
border-style:groove;
border-color:red;
}
Border – Individual sides

 En CSS es posible especificar diferentes tipos de


bordes para los diferentes lados.
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:groove;
}
Propiedad simple

 Elejemplo anterior, también puede ser


configurado con una simple propiedad
border-style: dotted solid;
De 1 a 4 valores

 La propiedad border-style puede tener de 1 a


4 valores:
- border.style:dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
Border Shorthand property

 Elcódigo corto, es también posible de


especificar para todos las propiedades de los
bordes en una sola propiedad. Esto es
comunmente llamado propiedad shorthand.
 La shorthand property para el border es
“border”.
border: 5px solid red;
Border property

 Cuando usamos la propiedad border, el


orden de los valores será:
– Border-width
– Boder-style
– Border-color
 No es materia si uno de lo valores arriba
está perdido (para todo, border-styke es
requerido), como longitud para el resto de
las ordenes especificadas
Margin

 El margin limpia un área alrededor de un elemento


(fuera del borde), El margen no tiene un color de
fondo y es completamente transparente.
 El margen superior, derecho, inferior e izquierdo
pueden ser cambiados independientemente, usando
propiedades separadas. Una propiedad de margen
corto puede ser utilizada para cambiar todos los
márgenes al mismo tiempo.
Margin

 La propiedad margin puede tener uno de 1 a 4 valores


– Margin:25px 50px 75px 100px;
 Top margin es 25 px
 Right margin es 50px
 Bottom margin es 75 px
 Left margin es 100 px
– Margin: 25px 50px 75px;
 Top margin es 25 px
 Right margin and left margin son 50 px
 Bottom margin es 75 px.
Margin

 Margin:25px 50px;
– Top and bottom margin son 25 px
– Right and left margin son 50 px
 Margin:25px;
– Todos los 4 márgenes son 25 px.
Margin - Possible values

Value Description
Auto The browser sets the margin.
The result of this is dependant of the borwser.

Lenght Defines a fixed margin (in pixels, pt, em, etc.)

% Defines a margin in % of the containing


element.
Margin – Individual sides

 En CSS es posible especificar márgenes


diferentes para lados diferentes.
 Ejemplo:
– margin-top:100px;
– margin-bottom:100px;
– margin-right:50px;
– margin-left:50px;
Margin-Shorthand property

 Para un código corto, es posible especificar


todos las propiedades de los márgenes en
una sola propiedad. Esto es llamado la
propiedad corta.
 La propiedad corta para todos los márgenes
de propiedad es “margin”:
 Ejemplo:
– margin:100px 50px;
Valores de margin-property (1)

 Losvalores que puede tener van de 1 a 4.


 margin:25px 50px 75px 100px;
– top margin is 25px
– right margin is 50px
– bottom margin is 75px
– left margin is 100px
Valores de margin-property (2)

 margin:25px 50px 75px;


– top margin is 25px
– right and left margins are 50px
– bottom margin is 75px
Valores de margin-property (3)

 margin:25px 50px;
– top and bottom margins are 25px
– right and left margins are 50px
Valores de margin property (4)

 margin:25px;
– all four margins are 25px
Padding (1)

 La propiedad padding define el espacio entre


el borde del elemento y el contenido del
elemento.
 El padding, limpia el área alrededor del
contenido de un elemento (dentro del borde).
El padding es afectado por el color de fondo
del elemento. (background-color)
Padding (2)

 El padding superior, derecho, inferior e


izquierdo pueden ser cambiados
independientemente usando las propiedades
de separación.
 Una propiedad corta de padding, también
puede ser usada para cambiar todos los
paddings al mismo tiempo.
padding (3)

Possible Values

Value Description
Length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element
padding – Individual sides

 Exemple:
– padding-top:35px;
– padding-bottom:25px;
– padding-right:50px;
– paddingleft:50px;
padding-Shorthand property

 Para acortar el código, es posible especificar


todas las propiedades del padding en una
sóla propiedad. Esto es llamado una
propiedad corta.
 La propiedad corta para todas las
propiedades padding es “padding”:
 Example:
– padding:25px 50 px;
padding property

 La propiedad property puede tener uno de


los cuatro valores siguientes:
 padding:25px 50px 75px 100px;
– top padding is 25px
– right padding is 50px
– bottom padding is 75px
– left padding is 100px
Padding property

 padding:25px 50px 75px;


– top padding is 25px
– right and left paddings are 50px
– bottom padding is 75px
padding property

 padding:25px 50px;
– top and bottom paddings are 25px
– right and left paddings are 50px
padding property

 padding:25px;
– all four paddings are 25px
padding property

 Tambien se puede declarar antes del body:


 <html>
 <head>
 <style type=“text/css”>
 p.ex1 {padding:2cm}
 p.ex2 {padding:0.5cm 3cm}
 </style>
 <head>
padding property

 <body>
 <p class=“ex1”>Este es un párrafo</p>
 <p class=“ex2”>Este es el otro párrafo</p>
 </body>
 </html>
Gracias