ESTILO CSS

HOJAS DE ESTILO - CSS

son un mecanismo simple

que describe cmo se
va a presentar un
documento en la
pantalla o como se va a
imprimir.
 HOJAS DE ESTILO - CSS

CSS nos ayuda a separar

el contenido de la
presentacin.
 HOJAS DE ESTILO - CSS

CSS nos permite

controlar el estilo y el
formato de mltiples
pginas Web a la vez
 Una hoja de estilo
externa puede ser
enlazada a un
documento HTML
mediante el elemento
LINK de HTML:
HOJAS DE ESTILO INTERNAS
HOJAS DE ESTILO EXTERNAS

2
EJEMPLO-01 sin CSS
EJEMPLO-01con CSS
EJEMPLO 02 - CSS EXTERNA
 DEFINIR CSS EN UN ARCHIVO EXTERNO

PASO 1: Se crea un archivo de texto y se le aade

solamente el siguiente contenido:

PASO 2: Se guarda el archivo de texto con el nombre

estilos.css Se debe poner especial atencin a que el archivo
tenga extensin .css y no .txt
 EJEMPLO 02 - CSS EXTERNA

PASO 3: En la pgina HTML se enlaza el archivo CSS externo mediante

la etiqueta <link>:
 LEYENDA:

rel: indica el tipo de relacin que existe entre el recurso

enlazado (en este caso, el archivo CSS) y la pgina HTML. Para
los archivos CSS, siempre se utiliza el valor stylesheet
type: indica el tipo de recurso enlazado. Sus valores estn
estandarizados y para los archivos CSS su valor siempre es
text/css
href: indica la URL del archivo CSS que contiene los estilos. La
URL indicada puede ser relativa o absoluta y puede apuntar a
un recurso interno o externo al sitio web.
media: indica el medio en el que se van a aplicar los estilos del
archivo CSS. Ms adelante se explican en detalle los medios
CSS y su funcionamiento.
Colocando una imagen de
fondo
 COMPONENTES DE UN ESTILO CSS BSICO

Las hojas de estilo en CSS estn compuestas de reglas. Cada

regla tiene tres partes:

Regla: Est compuesta de una parte de "selectores", un

smbolo de "llave de apertura" ({), otra parte denominada
"declaracin" y por ltimo, un smbolo de "llave de cierre"
(}).
COMPONENTES DE UN ESTILO CSS BSICO
el selector (en el ejemplo sera: 'h1'), el cual le dice al
navegador la parte del documento que se ver afectada por la
regla;
la propiedad (en el ejemplo seran 'color y background), las
cuales especifican qu aspecto del diseo va a cambiarse;
y el valor, establece el nuevo valor de la caracterstica
modificada en el elemento.
General.css
 Una hoja de estilo
externa puede ser
enlazada a un
documento HTML
mediante el elemento
LINK de HTML:
 REGLAS DE ESTILO CSS

La declaracin indica "qu hay que hacer" y el selector indica "a quin hay que
hacrselo"
 El selector no es ms que el tag de html
al que queremos que afecte el estilo.

A un mismo elemento HTML se le pueden asignar infinitas reglas CSS y cada regla
CSS puede aplicarse a un nmero infinito de elementos. En otras palabras, una
misma regla puede aplicarse sobre varios selectores y un mismo selector se puede
utilizar en varias reglas.
 SELECTORES BSICOS
SELECTOR DE TIPO O ETIQUETA
Selecciona todos los elementos de la pgina cuya etiqueta HTML
coincide con el valor del selector.
 SELECTORES BSICOS
SELECTOR DE TIPO O ETIQUETA
Selecciona todos los elementos de la pgina cuya etiqueta HTML
coincide con el valor del selector.
 SELECTORES BSICOS
En las hojas de estilo complejas, es habitual agrupar las propiedades
comunes de varios elementos en una nica regla CSS y posteriormente
definir las propiedades especficas de esos mismos elementos.
 SELECTORES BSICOS
SELECTOR DE CLASE

Cmo se pueden aplicar estilos CSS slo al primer prrafo?

 SELECTORES BSICOS
SELECTOR DE CLASE

Cmo se pueden aplicar estilos CSS slo al primer prrafo?

/* Pone de color rojo TODOS los prrafos */
p{
color:red;
}

/* Pone de color rojo todos los prrafos que estn dentro de un div, en
cualquier nivel de anidamiento */

div p {
color:red;
}
...
<div>esto es un div
<p>con un prrafo dentro</p>
</div>
<p>y este esta fuera</p>
 EJERCICIO 01

/* Pone de color rojo los span que sean hijos de div */

div > span {
color:red;
}

<div>un div con <span>span hijo</span></div>

<div><p>un div con <span>span nieto</span></p></div>
 EJERCICIO 02

/* Pone de color rojo los prrafos que van despus de un div */

div + p {
color:red;
}

<div>texto 1</div><p>parrafo 1</p><p>parrafo 2</p>

 EJERCICIO 03

/* Pone de color rojo los prrafos que tengan align center */

p[align="center"] {
color:red;
}

<p align="center>centrado y rojo</p><p>normal</p>

 EJERCICIO 08

EJERCICIO:

Definir todas las marcas de cabecera

(h1,h2,h3,h4,h5,h6) con la misma
fuente (Verdana) pero tamaos de
fuente distinta.
 EJERCICIO 05

background-color:#eeeeee;

color:#000000;
background-color:#ffff00;
font-style:italic;
EJERCICIO 05
 EJERCICIO 06

color:#00aa00;
text-decoration:underline;
text-decoration:line-through

En una pgina html, definir un ttulo con nivel h1 (subrayar todo el ttulo).
Luego un prrafo que tenga algunas palabras subrayadas y otras tachadas
(utilizar la marca span para asignar estilos a una palabra).
EJERCICIO 06
 EJERCICIO 07

Definir dos reglas en una hoja de estilo externa. Luego crear una pgina HTML que
contenga 3 preguntas y 3 respuestas. A cada pregunta y respuesta disponerla en
un prrafo distinto. Asignar los estilos .pregunta y .respueta
EJERCICIO 07
EJERCICIO 08
EJERCICIO 08