CSS - Tema 1: introducción a las Hojas de Estilos, reglas básicas.

1. Cascading Style Sheets
Tema 1: Introducción al CSS
© Abril, 2015
Prof. Renny Batista

2. ¿Qué es CSS?
 CSS es un lenguaje de hojas de estilos creado para
controlar el aspecto o presentación de los documentos
electrónicos definidos con HTML y XHTML.
 Al crear una página web, se utiliza en primer lugar el
lenguaje HTML/XHTML para marcar los contenidos, es
decir, para designar la función de cada elemento dentro
de la página: párrafo, titular, texto destacado, tabla, lista
de elementos, etc.
 Una vez creados los contenidos, se utiliza el lenguaje CSS
para definir el aspecto de cada elemento: color, tamaño
y tipo de letra del texto, separación horizontal y vertical
entre elementos, posición de cada elemento dentro de la
página, etc.
Abril, 2015 2

3. Sintaxis
 Un conjunto de reglas CSS consiste en un selector y un
bloque de declaración:
 El selector es el elemento HTML al cual se le quiere aplicar
el estilo.
 El bloque de declaración contiene una o más
declaraciones separadas por punto y coma.
 Cada declaración incluye un nombre de propiedad
(property) y un valor (value), separados por dos puntos.
Abril, 2015 3

4. Los comentarios
 Los comentarios se utilizan para explicar su código, y
pueden se de ayuda al editar el código fuente. Los
comentarios son ignorados por los navegadores.
 Un comentario CSS comienza con / * y termina con * /.
Los comentarios también pueden abarcar varias líneas:
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Abril, 2015 4

5. Los selectores
 Los selectores CSS permiten seleccionar y manipular los
elementos HTML.
 Se utilizan para "encontrar" (o seleccionar) elementos HTML en
base a su identificación, clase, tipo, atributo, y más.
 El selector de elementos selecciona elementos basados en el
nombre del elemento.
 Se puede seleccionar todos elementos <p> de una página:
estos elementos <p> serán alineados en el centro, con un texto
de color rojo.
p {
text-align: center;
color: red;
}
Abril, 2015 5

6. Los selectores: id
 El selector de id utiliza el atributo id de un elemento HTML
para seleccionar un elemento específico.
 Un id debe ser único dentro de una página, por lo que el
selector de id se utiliza si quiere seleccionar un elemento
único.
 Para seleccionar un elemento con una identificación
específica, escriba una almohadilla, seguido por el id del
elemento.
#para1 {
text-align: center;
color: red;
}
<p id="para1">Buenos Dias..!</p>
<p>Este párrafo no está afectado por el estilo</p>
Abril, 2015 6

7. Los selectores: class
 El selector class selecciona elementos con un atributo de
clase específica.
 Para seleccionar los elementos con una clase específica,
escriba un carácter de punto, seguido del nombre de la
clase:
 En el siguiente ejemplo, todos los elementos HTML con
class = "center" serán alineados en el centro:
.center {
text-align: center;
color: red;
}
<h1 class="center">Encabezado Centrado</h1>
<p class="center">Párrafo centrado.</p>
Abril, 2015 7

8. Los selectores: class
 También puede especificar que sólo un elemento HTML
en concreto debe verse afectado por un class.
 En el siguiente ejemplo, todos los elementos <p> con class
= "center" serán alineados en el centro.
p.center {
text-align: center;
color: red;
}
<h1 class="center">Encabezado no afectado</h1>
<p class="center">Párrafo centrado</p>
Abril, 2015 8

9. Agrupación de selectores
 Si tiene elementos con las mismas definiciones de estilo,
como este:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Abril, 2015 9

10. Agrupación de selectores
 Se puede agrupar los selectores, para minimizar el
código.
 Para selectores de grupo, separe cada selector con una
coma.
 En el siguiente ejemplo hemos agrupado los selectores del
código anterior:
h1,h2,p {
text-align: center;
color: red;
}
Abril, 2015 10

11. ¿Cómo insertar los estilos?
 Cuando un navegador lee una hoja de estilo, se dará
formato al documento de acuerdo con la información en
la hoja de estilos.
 Hay tres maneras de insertar una hoja de estilo:
Hoja de estilos externa
Hoja de estilo interna
Estilo en línea (inline)
Abril, 2015 11
1
2
3

12. Hoja de estilos externa
 Una hoja de estilo externa es ideal cuando se aplica el estilo
a muchas páginas. Con una hoja de estilos externa, puede
cambiar el aspecto de un sitio Web completo, cambiando
un sólo archivo.
 Cada página debe incluir un enlace a la hoja de estilos con
la etiqueta <link>. La etiqueta <link> va dentro de la sección
del <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Abril, 2015 12

13. Hoja de estilos externa
 Una hoja de estilo externa puede estar escrito en cualquier
editor de texto. El archivo no debe contener etiquetas
HTML. El archivo de hoja de estilo se debe guardar con la
extensión .css
 Un ejemplo de un archivo de hoja de estilo llamado
"myestyle.css", se muestra a continuación:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Abril, 2015 13

14. Hoja de estilos interna
 Una hoja de estilo interna debe ser usado cuando un único
documento tiene un estilo único. Usted define estilos
internos en la sección <head> de una página HTML, dentro
de la etiqueta <style>, así:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Abril, 2015 14

15. El orden en cascada…
¿Qué estilo se utilizará cuando hay más de un estilo especificado
para un elemento HTML?
 En términos generales podemos decir que todos los estilos
"cascada" van hacia una nueva hoja "virtual" de estilo por las
siguientes reglas, donde el número cuatro tiene la más alta
prioridad:
Predeterminado del navegador
Hoja de estilos externa
Hoja de estilo interna (en la sección <head>)
Estilo en línea (dentro de un elemento HTML)
 Así, un estilo en línea (dentro de un elemento HTML) tiene la más
alta prioridad, lo que significa que va a reemplazar un estilo
definido dentro de la etiqueta <head>, o en una hoja de estilos
externa, o en un navegador (el valor por defecto).
Abril, 2015 15
1
2
3
4

16. Propiedades: Background
 La propiedad background-color especifica el color de
fondo de un elemento.
 El color de fondo de una página se establece así:
body {
background-color: #b0c4de;
}
 Con CSS, un color usualmente se especifica:
– En un valor HEX - como "# FF0000"
– En un valor RGB - como "rgb (255,0,0)"
– Con un nombre de color - como “red"
Abril, 2015 16

17. Propiedades: Background
 La propiedad background-image especifica una imagen
para ser utilizada como fondo de un elemento.
 Por defecto, la imagen se repite por lo que cubre la
totalidad del elemento.
 La imagen de fondo de una página se puede configurar
como esto:
body {
background-image: url("paper.gif");
}
Abril, 2015 17

18. Propiedades: Background
 De forma predeterminada, la propiedad background-
image repite una imagen horizontal y verticalmente.
 Si queremos que la imagen se repita sólo horizontalmente
utilizamos background-repeat: repeat-x.
 Para repetir una imagen en vertical background-repeat:
repeat-y.
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Abril, 2015 18

19. Propiedades: Background
 Por defecto una imagen de fondo se muestra en el mismo
lugar que el texto. Para cambiar la posición de la imagen,
de modo que no perturbe demasiado el texto, utilizamos la
propiedad background-position:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
Abril, 2015 19

20. Propiedades: Abreviación de las propiedades
 Como se puede ver en los ejemplos anteriores, hay muchas
propiedades a tener en cuenta cuando se trata de fondos.
 Para acortar el código, también es posible especificar
todas las propiedades en una sola propiedad. Esto se llama
una propiedad abreviada.
 La propiedad abreviada para el fondo no es más que
"background":
body {
background: #ffffff url("img_tree.png") no-repeat
right top;
margin-right: 200px;
}
Abril, 2015 20

21. Propiedades: Abreviación de las propiedades
 Cuando se utiliza la propiedad abreviada el orden de los
valores de la propiedad es:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
 No importa si uno de los valores de la propiedad no se
encuentra, siempre y cuando los que están presentes
son en este orden.
Abril, 2015 21

22. Propiedades: Text Color
 La propiedad de color se utiliza para ajustar el color del
texto.
 El color por defecto para una página se define en el
selector del body.
body {
color: blue;
}
h1 {
color: #00ff00;
}
h2 {
color: rgb(255,0,0);
}
Abril, 2015 22

23. Propiedades: Text Decoration
 La propiedad text-decoration se utiliza para establecer o eliminar
decoraciones de texto.
 También se utiliza sobre todo para eliminar los subrayados de
enlaces para propósitos de diseño:
a {
text-decoration: none;
}
 También se puede utilizar para decorar texto:).
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Abril, 2015 23

24. Propiedades: Text Indent
 La propiedad text-indent se utiliza para especificar la
sangría de la primera línea de un texto.
p {
text-indent: 50px;
}
Abril, 2015 24

25. Propiedades: Fuentes
 En CSS, hay dos tipos de nombres de familias de
fuentes:
Familia genérica (generic family)
– Un grupo de familias de fuentes con un aspecto
similar (como "Serif" o "Monospace")
Familia tipográfica (font family)
– Una familia de fuentes concretas (como "Times
New Roman" o "Arial").
Abril, 2015 25
1
2

26. Propiedades: Font Family
 La familia de fuentes de un texto se establece con la propiedad
font-family.
 La propiedad font-family debe contener varios nombres de
fuente como un sistema de "retorno". Si el navegador no soporta
la primera fuente, se intenta con el siguiente tipo de letra.
 Comience con la fuente que desea, y terminar con una familia
genérica, para que el navegador elija una fuente similar en la
familia genérica, si no hay otras fuentes disponibles.
 Nota: Si el nombre de una familia de fuentes es más que una
palabra, debe ser entre comillas, como: "Times New Roman".
 Más de una familia de la fuente se especifica en una lista
separada por comas:
p {
font-family: "Times New Roman", Times, serif;
}
Abril, 2015 26

27. Propiedades: Font Family (Serif Fonts)
Abril, 2015 27
font-family Texto de ejemplo
Georgia, serif This is a heading
This is a paragraph
"Palatino Linotype", "Book Antiqua",
Palatino, serif
This is a heading
This is a paragraph
"Times New Roman", Times, serif This is a heading
This is a paragraph

28. Propiedades: Font Family (Sans-Serif Fonts)
Abril, 2015 28
font-family Texto de ejemplo
Arial, Helvetica, sans-serif This is a heading
This is a paragraph
"Arial Black", Gadget, sans-serif This is a heading
This is a paragraph
"Lucida Sans Unicode", "Lucida Grande",
sans-serif
This is a heading
This is a paragraph
Tahoma, Geneva, sans-serif This is a heading
This is a paragraph
"Trebuchet MS", Helvetica, sans-serif This is a heading
This is a paragraph
Verdana, Geneva, sans-serif This is a heading
This is a paragraph

29. Propiedades: Font Family (Monospace Fonts)
Abril, 2015 29
font-family Texto de ejemplo
"Courier New", Courier, monospace This is a heading
This is a paragraph
"Lucida Console", Monaco,
monospace
This is a heading
This is a paragraph

30. Propiedades: Font Style
 La propiedad font-style define la fuente elegida bien con
el valor normal, el valor italic o el valor oblique:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Abril, 2015 30

31. Propiedades: Font-size
 El tamaño de la fuente se establece por medio de la
propiedad font-size.
 A la hora de describir el tamaño de las fuentes, existen
muchas unidades diferentes (por ejemplo, píxeles,
porcentajes o em) entre las que elegir. Aquí nos
centraremos en las unidades más comunes y adecuadas.
Como ejemplo, podemos incluir:
h1 {
font-size: 40px;
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em
El tamaño puede ser calculada de píxeles a em
utilizando esta fórmula: píxeles / 16 = em */
}
body {
font-size: 100%;
}
Abril, 2015 31

32. Propiedades: Links
 A los enlaces se les pueden aplicar estilos con cualquier propiedad
CSS (por ejemplo, color, font-family, etc.).
 Además, los enlaces pueden personalizarse diferente según el
estado en que se encuentran.
 Los cuatro estados de un enlaces son:
– a: link - un enlace no visitado normales
– a: visited - un vínculo que el usuario ha visitado
– a: hover - un enlace cuando el mouses del usuarios pasa sobre él
– a: activo - un enlace al momento en que se hace clic
 Al configurar el estilo de varios estados de los enlaces, hay algunas
reglas de orden:
 a:hover debe venir después a:link y a:visited
 a:active debe venir después a:hover.
Abril, 2015 32

33. Propiedades: Links
/* link sin visitar */
a:link {
color: #FF0000;
}
/* link visitado */
a:visited {
color: #00FF00;
}
/* mouse sobre el link */
a:hover {
color: #FF00FF;
}
/* link seleccionado */
a:active {
color: #0000FF;
}
Abril, 2015 33

34. Propiedades: Links
 La propiedad text-decoration se utiliza sobre todo para
eliminar los subrayados de enlaces:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Abril, 2015 34

35. Bibliografías
Abril, 2015 35
Tutorial CSS. http://es.html.net/tutorials/css/
W3Schools a web developers site. http://www.w3schools.com
LibrosWeb.es. Introducción a CSS. http://librosweb.es/libro/css/