R1. CSS

Desarrollo Basado en Plataformas
HOJAS DE ESTILO CSS.

Tutor:
Fredy M. Jordán C.
F.A.F.I.
Hojas de Estilo CSS Sistemas de Información.
Introducción.
• Originalmente, las páginas HTML sólo incluían información sobre sus
contenidos de texto e imágenes. Con el desarrollo del estándar HTML,
las páginas empezaron a incluir también información sobre el aspecto de
sus contenidos: tipos de letra, colores y márgenes.
• Incluir en una misma página HTML los contenidos, el diseño y la

programación complica en exceso su mantenimiento. Normalmente, los
contenidos y el diseño de la página web son responsabilidad de
diferentes personas, por lo que es conveniente separarlos.
F.A.F.I.
CSS es un lenguaje utilizado en el diseño web para definir la presentación

(aspecto visual) de una página web o documentos HTML. La idea original detrás
de CSS es la de separar la información (contenido) de su representación visual, de
modo que cambiar el diseño no implique modificar el contenido y viceversa.
Contenidos HTML5 CSS

+
Presentación
 (Contenidos) + (Presentación)
HTML
Figura: Esquema de la separación de los contenidos y su presentación.
F.A.F.I.
• Encabezado
• Cuerpo
 <header></header>
• Tablas  <section></section>
• Listas  <article></article>
• Multimedia  <aside></aside>
 <footer></footer>
F.A.F.I.
Principales Características.
• Permite definir el estilo de cada elemento HTML de
manera exacta.
• Permite escalar tamaños en función del tamaño de
la pantalla.
• Aísla el contenido de la presentación.
• Permite incorporar cierta lógica a los estilos
aplicados.
• Permite crear plantillas de estilos que pueden
F.A.F.I.
¿Por qué CSS?.

• El mantenimiento de un Sitio Web es más sencillo.
• Se pueden crear sitios para diferentes plataformas como dispositivos

móviles o impresoras.
• Ahorro de tiempo en cambios «de fondo».
• Compatibilidad con navegadores modernos.
• Amigable con Motores de Búsqueda (GOOGLE).

F.A.F.I.
Sintaxis de una regla en CSS. ▪ Selector:

Indica el elemento o elementos HTML a
los que se aplica la regla CSS.
▪ Declaración:
Especifica los estilos que se aplican a los
elementos. Está compuesta por una o
más propiedades CSS.
▪ Propiedad:
Permite modificar el aspecto de una
característica del elemento.
Figura: Componentes de un Estilo CSS Básico.
▪ Valor:
Indica el nuevo valor de la característica
modificada en el elemento.
F.A.F.I.
Ejemplos de reglas en CSS.

F.A.F.I.
¿Cómo se usa CSS en HTML?

F.A.F.I.
¿Cómo se usa CSS con HTML5?.
A. Dentro de la etiqueta HTML.
B. Embebido en un documento HTML.
C. Como un archivo externo.

F.A.F.I.
A. Dentro de la etiqueta HTML.
Esta técnica es la menos utilizada, puesto que no aprovecha las

ventajas de CASCADA del CSS.
Se utiliza directa ADENTRO DE LA ETIQUETA HTML, no necesita
predefinirse en el HEAD.
ESTILO.
Ejemplo:
<h2 style=“font-family: Arial; font-size: 24px"> Capitulo 1 </h2>
ESTILO.
F.A.F.I.

Esta técnica requiere definir los estilos en una zona específica del propio
documento HTML.
Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la
sección <head>.
¿CUÁNDO EMPLEAR?
Este método se emplea cuando se define un número pequeño de estilos o

cuando se quieren incluir estilos específicos en una determinada página HTML
que completen los estilos que se incluyen por defecto en todas las páginas del
sitio web.
F.A.F.I.
¿Inconvenientes?
El principal inconveniente es que si se quiere hacer una modificación

en los estilos definidos, es necesario modificar todas las páginas que
incluyen el estilo que se va a modificar.
F.A.F.I.

<html>
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p> Un párrafo de texto. </p>
</body>
</html>
F.A.F.I.

F.A.F.I.
C. Como un archivo externo.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Estilos.css">
</head>
<body> h1
<h1> Contenido del Documento Web</h1> {
</body> font-style: italic;
</html> font-family: Vernada;
font-size: 18px;
color: #FF0000;
text-align: center;
}
F.A.F.I.
Tipos de Selectores.
F.A.F.I.
Tipos de Selectores:
A. Selector universal.
B. Selector de etiqueta.
C. Selector descendente.
D. Selector de clase.
E. Selectores de ID.
F. Combinación de selectores básicos.
F.A.F.I.
F.A.F.I.
A. Selector Universal.
• Se utiliza para seleccionar todos los elementos del documento web.
• El selector universal se indica mediante un asterisco (*).
• No se utiliza regularmente, ya que es difícil que un mismo estilo se pueda
aplicar a todos los elementos de una página.
• El siguiente ejemplo elimina el margen y relleno de todos los elementos HTML:
*{
margin: 0;
padding: 0;
}
F.A.F.I.
• Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el
valor del selector.
• Para utilizar este selector, es necesario indicar el nombre de una etiqueta HTML
correspondiente a los elementos que se quieren seleccionar.
h1 { p{
color: red; color: blue;
font-family: Arial; font-size: 2em;
} }
F.A.F.I.
B. Selector de etiqueta - Ejemplo.

• CSS permite agrupar todas las reglas individuales en una sola regla con un
selector múltiple, para ello se incluyen todos los selectores separados por una
coma (,).
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, Sans-Serif;
}
F.A.F.I.
• 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 específicas de esos mismos elementos.
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, Sans-Serif;
}
h1 { font-size: 3em; }
h2 { font-size: 1.5em; }
F.A.F.I.
C. Selector descendente.
• Selecciona los elementos que se encuentran dentro de otros elementos.
• Un elemento es descendiente de otro cuando se encuentra entre las etiquetas
de apertura y de cierre del otro elemento, sin importar el nivel de profundidad
en el que se encuentre.
• Ejemplo: selecciona todos los elementos <span> de la página que se encuentren
dentro de un elemento <p>.
F.A.F.I.
C. Selector descendente - Ejemplo.

p span {
color: blue;
<p> font-family: Tahoma;
………….. }
<span >Texto 1</span>
…………...
<a href=“…” >……<span >Texto 2</span> p#parrafo{
……………. background-color: yellow;
</p> font-style: italic;
color:red;
line-height: 3;
text-align: center;
}
F.A.F.I.
D. Selector de clase.
• Puedes crear tus propios estilos que a su vez pueden aplicarse a CUALQUIER
ETIQUETA HTML.
• Por ejemplo, supongamos que quiero hacer un estilo que pueda usar donde yo
quiera para resaltar un texto, a este le puedo nombrar así «marcador». La
única diferencia es que ahora el selector lleva un punto antes:
.marcador { background-color: yellow;}
• Para aplicar una clase, tengo que escribir directamente en la etiqueta HTML
que quiero una clase…
<h2 class=“marcador">Capítulo 1</h2>

F.A.F.I.
D. Selector de clase - Ejemplo.

h1
{
<!DOCTYPE HTML> font-style: italic;
<html> font-family: Vernada;
<head> font-size: 18px;
<meta charset="utf-8"> color: #FF0000;
<link rel="stylesheet" type="text/css" href="Estilos.css"> text-align: center;
</head> }
<body> .parrafo1
<h1> Contenido del Documento Web</h1> {
<p class=“parrafo1”>Teclado dispositivo de entrada. </p> font-family: Vernada;
</body> font-size: 18px;
</html> color: blue;
text-align: justify;
}
F.A.F.I.
E. Selector de ID.
• Aplica estilos CSS a un único elemento del documento web. Aunque puede
utilizarse selector de clase para aplicar estilos a un único elemento, existe otro
selector más eficiente en este caso.
• El selector de ID selecciona un elemento de la página a través del atributo id.

Este selector sólo selecciona un elemento de la página porque el valor del
atributo id no se puede repetir en dos elementos diferentes de una misma
página.
• La sintaxis es muy parecida al selectores de clase, salvo que se utiliza el

símbolo almohadilla (#) en vez del punto (.) como prefijo del nombre de la
regla CSS:
F.A.F.I.
E. Selector de ID - Ejemplo.
<p>Primer párrafo</p>
<p id=“destacado”>Segundo párrafo</p> #destacado {

color: blue;
<p>Tercer párrafo</p>
font-family: Tahoma;
}
F.A.F.I.
F. Combinación de selectores.
• CSS permite la combinación de uno o más tipos de selectores para restringir el
alcance de las reglas CSS.
• A continuación se muestran algunos ejemplos habituales de combinación de
selectores.
.aviso .especial {
color: red;
font-family: Verdana;
}
• El selector del ejemplo selecciona aquellos elementos con un class="especial"

que se encuentren dentro de cualquier elemento con un class="aviso".
F.A.F.I.
F. Combinación de selectores - Regla compuesta.

• Ahora, el selector solamente selecciona aquellos elementos de tipo <span>
con un atributo class="especial" que estén dentro de cualquier elemento de
tipo <div> que tenga un atributo class="aviso".
• La combinación de selectores puede llegar a ser todo lo compleja que sea
necesario:
ul#menuPrincipal li.destacado a#inicio {
color: red;
font-family: Verdana;
}
• Este selector hace referencia al enlace con un atributo id=“inicio” que se
encuentra dentro de una <li> con un atributo class=“destacado”, que forma
parte de una lista <ul> con atributo id=“a menuPrincipal”.
F.A.F.I.
Fuentes, Texto y Fondos.

F.A.F.I.
Fuentes.
Propiedad Descripción Ejemplo
Establecer el tipo de letra (fuente) font-family: Monospace;
font-family: fuente; del elemento. font-family: Arial, Serif;
Establecer el tamaño del tipo de letra font-size: 16px;
font-size: tamaño; (fuente) del elemento.. font-size: 200%;
font-weight: bold;
font-weight: valor; Permite elegir el grosor del trazo.
font-weight: 800;
Establece el estilo de letra del font-style: italic;
font-style: valor; elemento. font-style: oblique;
F.A.F.I.
Texto.
text-align: valor; Define la alineación del texto. text-align: justify;
Permite controlar la altura ocupada line-height: 1,2 em;
line-height: valor; por cada línea de texto. (interlineado) line-height: 200%;
Permite añadir a un bloque de texto text-decoration: underline,
text-decoration: valor; distintos tipos de rayado. text-decoration: overline,
Permite cambiar el texto a minúsculas text-transform: uppercase;
text-transform: valor; o mayúsculas. text-transform: lowercase;
Establecer un espaciado entre cada
letter-spacing: valor; letras de un bloque de texto.
letter-spacing: 5px;
color: color; Establecer el color del elemento. color: magenta;

F.A.F.I.
Fondos.
Permite establecer el color de
background-color: color; fondo del elemento.
background-color: aqua;
Permite definir una o varias background: url ("fuego.svg")

background: valores; imágenes de fondo en un mismo right repeat-y,
elemento. url ("tartan.png");
Establece cualquier imagen como background-image: url
background-image: imagen; fondo de un elemento. ("fuego.svg");
Permite controlar la repetición de
background-repeat: valor; la imagen. (default repeat)
background-repeat: repeat-x;
Permite establecer la posición de

background-position: valor; la imagen de fondo.
background-position: left;
F.A.F.I.
Unidades de Medida.
F.A.F.I.
UNIDADES DE MEDIA.
F.A.F.I.
UNIDADES ABSOLUTAS body {

El cuerpo de la página debe mostrar
margin: 0.5 in;
un margen de media pulgada.
}
h1 {
Los elementos <h1> deben mostrar un
line-height: 2 cm; interlineado de 2 centímetros.
}
p{
Las palabras de todos los párrafos
word-spacing: 4mm; deben estar separadas 4 milímetros
} entre si.
a{
Los enlaces se deben mostrar con un
font-size: 12pt; tamaño de letra de 12 puntos.
}
F.A.F.I.
UNIDADES RELATIVAS. p{ El valor 0.5em se interpreta como "la mitad

font-size: 32px; del tamaño de letra del elemento", ya que se
margin: 0.5em; debe multiplicar por 0.5 su tamaño de letra
(32px * 0.5 = 16px).
}
div#contenido { Todos los navegadores muestran por
defecto el texto de los párrafos con un
width: 600px; tamaño de letra de 16 píxel.
}
div.principal { El valor 80% es la anchura de su elemento
padre. Por tanto, el elemento <div> cuyo
width: 80%; atributo class vale principal tiene una anchura
} de 80% * 600px = 480px.
F.A.F.I.
Manejo de Colores.
F.A.F.I.
Trabajando con Colores en CSS.

1. Palabras Claves.
2. RGB Hexadecimal.
3. RGB Decimal.
el modelo RGB consiste en

definir un color indicando la
cantidad de color rojo,
verde y azul que se debe
mezclar para obtener ese
color.
Selector de color de imagen en línea:

https://imagecolorpicker.com/es/
F.A.F.I.
EJEMPLO COLORES. p{
color: rgb(71, 98, 176);
}
p{
color: rgb(27%, 38%, 69%);
}
p{
color: #4762B0; Notación Reducida:
} #AAA = #AAAAAA
h1, h2, h3, h4, h5, h6 { #FFF = #FFFFFF
color: blue; #A0F = #AA00FF
} #369 = #336699
F.A.F.I.
Tipos de Cajas.
F.A.F.I.
DE BLOQUE [block] Ocupa todo el ancho disponible de la página web y no permite que
otro elemento se coloque a su lado
Las propiedades width y heigth afectan el tamaño del elemento.
Las etiquetas de bloque más usadas son: <h1>…<h6>, <p>, <ul>,

<div>, <header>, <section>, <footer>, <form>, <table>.
La propiedad padding  agrega un margen interno incrementando el

tamaño total del elemento.
F.A.F.I.
DE LINEA [inline] Ocupa el espacio mínimo necesario en horizontal de la página web, y

permite que otro elemento se coloque a su lado.
Las propiedades width y heigth no afectan el tamaño del elemento.
Las etiquetas de línea más usadas son: <a>, <spam>, <img>, <input>.

tamaño total del elemento pero no genera un espacio externo entre
elementos adyacentes a él, gráficamente se sobreponen.
F.A.F.I.
Ocupa el espacio mínimo necesario en horizontal de la página web, y

permite que otro elemento se coloque a su lado.
DE LINEA-BLOQUE
[inline-block]
Las propiedades width y heigth afectan el tamaño del elemento.

tamaño total del elemento.
F.A.F.I.
Bordes.
F.A.F.I.
Bordes.
 Cualquier elemento de una página web puede tener un
borde (en inglés, border).
 Permite establecer algunas o todas las propiedades de

los cuatro bordes (arriba, derecha, abajo e izquierda) de
un elemento, definiendo.
 Estas propiedades son: estilo, color, grosor/tamaño.

F.A.F.I.
Bordes – Propiedades.
Establece algunas o todas las
border: solid #C00 1px;
border: tipo_borde color tamaña; propiedades de algunos o todos los
bordes de los elementos.
border-left: solid #C00 1px;
Establece el estilo de algunos o todos border-style: solid double;

border-style: tipo_borde;
los bordes de los elementos border-top-style: solid;
Establece el color de algunos o todos border-color: red;
border-color: color;
los bordes de los elementos. border-right-color: rgb(255, 0, 0);
Establece la anchura de algunos o todos border-width: 3px;
border-width: tamaño;
los bordes de los elementos border-bottom-width: 3px;
Establece un radio de algunos o todos border-radius: 20px;
border-radius:
los bordes del elemento. border-top-left-radius: 20px;
F.A.F.I.
Borde – Tipos.
F.A.F.I.
Márgenes
Exteriores e Interiores.
F.A.F.I.
TODO elemento HTML esta contenido en una caja o contenedor.

F.A.F.I.
Margen Exterior. (margin)

 El margen exterior de un elemento es el espacio
transparente situado alrededor del borde del elemento,
independientemente de que el borde sea o no visible.
 La propiedad margin permite establecer el tamaño del
margen exterior.
 Se pueden escribir de 1 a 4 valores, que se interpretan:
 1 valor: Aplica a los cuatro lados.
 2 valores: 1er aplica lados inferior y superior, 2do los lados derecho e izquierdo.
 3 valores: 1er aplica lado superior, 2do derecho e izquierdo y 3ro lado inferior.
 4 valores: Lado superior, derecho, inferior e izquierdo
F.A.F.I.

F.A.F.I.
margin - Propiedades
Permite establecer el tamaño del
margin: valores; margen exterior.
margin: 20px 30px;
Establece el tamaño margen

margin-top: valor; exterior lado superior|arriba.
margin-top: 20px;

margin-right: valor; exterior lado derecho.
margin-right: 30px;

margin-bottom: valor; exterior lado inferior|abajo.
margin-bottom: 50px;

margin-left: valor; exterior lado izquierdo.
margin-left: 10px;
Para centrar elemento de bloque, utilizar propiedades margin-left y margin-right con valor auto.
F.A.F.I.
1 2
4
3
F.A.F.I.
Margen Interior. (padding)

 El margen interior de un elemento es el espacio
transparente situado entre el elemento y el borde.
 Este espacio se puede de definir aunque el elemento no
tenga borde.
 La propiedad padding permite establecer el tamaño del
margen interior.
 1 valor: Aplica a los cuatro lados.
 2 valores: 1er valor lados inferior y superior, 2do los lados derecho e izquierdo.
 3 valores: 1er aplica lado superior, 2do derecho e izquierdo y 3ro lado inferior.
 4 valores: Lado superior, derecho, inferior e izquierdo
F.A.F.I.
Margen Interior. (padding)

F.A.F.I.
padding - Propiedades
Permite establecer el tamaño del
padding: valores; margen interior.
padding: 40px 20px;

padding-top: valor; interior lado superior|arriba.
padding-top: 20px;

padding-right: valor; interior lado derecho.
padding-right: 30px;

padding-bottom: valor; interior lado inferior|abajo.
padding-bottom: 50px;

padding-left: valor; interior lado izquierdo.
padding-left: 10px;
F.A.F.I.
Modelo de Caja.
F.A.F.I.
Posicionamiento.
F.A.F.I.
Posicionamiento.
A. Normal o estático. (static)
B. Relativo. (relative)
C. Absoluto. (absolute)
D. Fijo. (fixed)
F.A.F.I.
Posicionamiento.
 Los navegadores posicionan de forma automática todas las cajas de un documento HTML.
CSS permite modificar la posiciones actuales de las cajas.
 Las propiedades de posicionamiento CSS permiten: (1) posicionar un elementos, (2) colocar
un elemento detrás de otro, (3) especificar que debe suceder cuando el contenido de un
elemento es demasiado grande.
 Los elementos pueden ser posicionados utilizando las propiedades: top (superior), bottom
(inferior), left (izquierda) y right (derecha). Sin embargo estas propiedades no funcionaran a
menos que la propiedad position se establezca en primer lugar.
F.A.F.I.
Posicionamiento.
A la propiedad position se le pueden indicar los siguiente valores:
Valor Significado
static Utiliza el orden natural de los elementos HTML.

relative Los elementos se mueven ligeramente en base a su posición estática.
absolute Los elementos se colocan en base al contenedor padre.
Posicionamiento fijo. Idéntico al absoluto, pero aunque hagamos scroll no se

fixed
mueve.
F.A.F.I.
Aplica por omisión, elementos

Posicionamiento. ocupan todo el ancho de la página
web.
STATIC
Los elementos se muestran en la
pantalla en el mismo orden del
código fuente HTML.
Permite mover un elemento con top, rigth, bottom,

relación a su posición origen. left
POSICIONAMIENTO RELATIVE
Espacio asignado al elemento
persiste.
El elemento es removido y top, rigth, bottom,

colocado donde nosotros left
queremos.
ABSOLUTE
Espacio asignado al elemento no
persiste.
F.A.F.I.
Posicionamiento.
Al utilizar los modos de posicionamiento: absolute, fixed o relative, podemos utilizar una serie de
propiedades para modificar la posición de un elemento siendo esta:
Propiedad Valor Significado
top: auto tamaño Empuja una distancia de la parte superior hacia el inferior.
bottom: auto tamaño Empuja una distancia de la parte inferior hacia la superior.
left: auto tamaño Empuja el elemento una distancia de izquierda a derecha.
right: auto tamaño Empuja el elemento una distancia de derecha a izquierda.
z-index: auto nivel Ordena en el eje de profundidad, superponiendo u ocultando.

F.A.F.I.
Posicionamiento.
F.A.F.I.
Posicionamiento – Profundidad (niveles).
 La propiedad z-index, establece el nivel de profundidad en el que está un elemento

sobre los demás.
 De esta forma, podemos hacer que un elemento se coloque encima o debajo de otro.
 Hay que indicar un número que representará el nivel de profundidad del elemento. Los
elementos un número más alto estarán por encima de otros con un número más bajo,
que permanecerán ocultos detrás de los primeros.
F.A.F.I.
Posicionamiento – Profundidad (niveles).
Nota: Los niveles z-index, así como las propiedades top, left, bottom y right no funcionan con elementos
que estén utilizando posicionamiento estático. Deben tener un tipo de posicionamiento absoluto.
F.A.F.I.
Elementos Flotantes.
F.A.F.I.
Elementos flotantes.
 La propiedad float establece el esquema de posicionamiento flotante para un

elemento HTML.
 Cuando existe un elemento flotante, los elementos que se encuentran a
continuación fluyen a lo largo de él, salvo que haya un elemento que tenga
establecido la propiedad clear en both.
 Las propiedades float y clear se pueden aplicar a cualquier elemento de una
página web.
F.A.F.I.
F.A.F.I.
Propiedad Valor Significado
Cambia el flujo para que el elemento flote a la izquierda o

float: none | left | right
derecha.
Impide que los elementos puedan flotar en la orientación

clear: none | left | right | both
indicada.
F.A.F.I.
ul { background: grey; }
Nota: Con esto conseguimos que los ítems de la li {
lista floten uno a continuación de otro. background: blue;
width: 100px;
Cambiando la representación de elementos se
padding: 8px;
suele conseguir una solución más limpia y
margin: 8px;
organizada.
}
ul, li {
p{ float: left;
clear:both }
}
La propiedad clear impide que elementos floten en una zona indicada.

F.A.F.I.
Pseudo - clases.
F.A.F.I.
Estados de los enlaces:

• Todo enlace tiene 4 estados: • No visitado: Es aquel estado que tiene
link, visited, hover y active cualquier enlace por defecto.
• Visitado: Es el estado opuesto al primero,
cuando ya hemos visitado dicho enlace.
• En CSS esto se traduce a: • Activo: Este estado es exactamente cuando
pulsamos el enlace; sí y solo sí lo estamos
a:link { color: red; } pulsando (en el momento que dejamos de
a:visited { color: darkred; } pulsarlo ya no es ese estado.
• Hover: Es ese estado en el que el ratón está
a:hover { color: hotpink; } encima del enlace, da mucho juego para
a:active { color: fuchsia; } los menú es y verás que es muy utilizado.
Se define con «hover».
F.A.F.I.
Estados de los enlaces:

F.A.F.I.

R1. CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

R1. CSS

Cargado por

Copyright:

Formatos disponibles

Desarrollo Basado en Plataformas

HOJAS DE ESTILO CSS.

• Incluir en una misma página HTML los contenidos, el diseño y la

CSS es un lenguaje utilizado en el diseño web para definir la presentación

Contenidos HTML5 CSS

¿Por qué CSS?.

• Se pueden crear sitios para diferentes plataformas como dispositivos

• Ahorro de tiempo en cambios «de fondo».

• Compatibilidad con navegadores modernos.

• Amigable con Motores de Búsqueda (GOOGLE).

Sintaxis de una regla en CSS. ▪ Selector:

Ejemplos de reglas en CSS.

¿Cómo se usa CSS en HTML?

¿Cómo se usa CSS con HTML5?.

A. Dentro de la etiqueta HTML.

B. Embebido en un documento HTML.

C. Como un archivo externo.

A. Dentro de la etiqueta HTML.

Esta técnica es la menos utilizada, puesto que no aprovecha las

B. Embebido en un documento HTML.

Este método se emplea cuando se define un número pequeño de estilos o

B. Embebido en un documento HTML.

El principal inconveniente es que si se quiere hacer una modificación

B. Embebido en un documento HTML.

B. Embebido en un documento HTML.

C. Como un archivo externo.

B. Selector de etiqueta - Ejemplo.

C. Selector descendente - Ejemplo.

.marcador { background-color: yellow;}

<h2 class=“marcador">Capítulo 1</h2>

D. Selector de clase - Ejemplo.

• El selector de ID selecciona un elemento de la página a través del atributo id.

• La sintaxis es muy parecida al selectores de clase, salvo que se utiliza el

<p id=“destacado”>Segundo párrafo</p> #destacado {

• El selector del ejemplo selecciona aquellos elementos con un class="especial"

F. Combinación de selectores - Regla compuesta.

Fuentes, Texto y Fondos.

color: color; Establecer el color del elemento. color: magenta;

Permite definir una o varias background: url ("fuego.svg")

Permite establecer la posición de

UNIDADES ABSOLUTAS body {

UNIDADES RELATIVAS. p{ El valor 0.5em se interpreta como "la mitad

Trabajando con Colores en CSS.

el modelo RGB consiste en

Selector de color de imagen en línea:

Las propiedades width y heigth afectan el tamaño del elemento.

Las etiquetas de bloque más usadas son: <h1>…<h6>, <p>, <ul>,

La propiedad padding  agrega un margen interno incrementando el

DE LINEA [inline] Ocupa el espacio mínimo necesario en horizontal de la página web, y

Las propiedades width y heigth no afectan el tamaño del elemento.

La propiedad padding  agrega un margen interno incrementando el

Ocupa el espacio mínimo necesario en horizontal de la página web, y

Las propiedades width y heigth afectan el tamaño del elemento.

La propiedad padding  agrega un margen interno incrementando el

 Permite establecer algunas o todas las propiedades de

 Estas propiedades son: estilo, color, grosor/tamaño.

Establece el estilo de algunos o todos border-style: solid double;

TODO elemento HTML esta contenido en una caja o contenedor.

Margen Exterior. (margin)

Margen Exterior. (margin)

Establece el tamaño margen

Establece el tamaño margen

Establece el tamaño margen

Establece el tamaño margen