Cascading Style Sheets Tema 1:

Introducción al CSS
Prof. Renny Batista

© Abril, 2015
¿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
Sintaxis

 Unconjunto 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
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
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
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
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">Encabeza
do Centrado</h1>
<p
Abril, 2015 7
class="center">Párrafo
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">Encabeza
do no afectado</h1>
<p
class="center">Párrafo
Abril, 2015
centrado</p> 8
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
Agrupación de selectores
 Se puede agrupar los para minimizar el
selectores, 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
¿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:

1 Hoja de estilos externa

2 Hoja de estilo interna

3 Estilo en línea (inline)

Abril, 2015 11
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
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
 Unejemplo 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
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 {
bac
kgr
oun
d-
col
or:
lin
en;
}
h1 {
color: maroon;
Abril, 2015 14
margin-left: 40px;
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:

1 Predeterminado del navegador

2 Hoja de estilos externa

3 Hoja de estilo interna (en la sección <head>)

4 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
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
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
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
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
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
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
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
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
Propiedades: Text Indent

 La propiedad text-indent se para especificar la

utiliza de la primera línea de un texto.
sangría

p {
text-indent: 50px;
}

Abril, 2015 24
Propiedades: Fuentes

 EnCSS, hay dos tipos de nombres de familias

de fuentes:
1 Familia genérica (generic family)
– Un grupo de familias de fuentes con un
aspecto similar (como "Serif" o "Monospace")
2 Familia tipográfica (font family)
– Una familia de fuentes concretas (como
"Times New Roman" o "Arial").

Abril, 2015 25
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
Propiedades: Font Family (Serif Fonts)

font-family Texto de ejemplo

Georgia, serif This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", This is a heading

Palatino, serif This is a paragraph

"Times New Roman", Times, serif This is a heading

This is a paragraph

Abril, 2015 27
Propiedades: Font Family (Sans-Serif Fonts)

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", This is a heading
sans-serif
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

Abril, 2015 28
Propiedades: Font Family (Monospace Fonts)

font-family Texto de ejemplo

"Courier New", Courier, monospace This is a heading

This is a paragraph

"Lucida Console", Monaco, This is a heading

monospace This is a paragraph

Abril, 2015 29
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
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
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
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
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
Bibliografías

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/

Abril, 2015 35