Curso de HTML y CSS

HTML
1.0.- SINTAXIS
La Sintaxis: es la forma como vemos el cdigo en nuestro documento.
Los Elementos: nos ayudan a estructurar y a darle significado a las partes de un documento html,
con ellos podemos crear encabezados, prrafos, textos con nfasis, subrayados o cursivas, listas de
elementos, tablas imgenes, formularios y ms.
Para definir y conocer la estructura de un elemento debemos revisar los conceptos de contenido,
texto del contenido, etiqueta y atributo.
Tipos de elementos
Elementos vacos
Elementos no vacos
Un elemento vaco es aquel cuyo modelo de contenido no le permite tener ningn contenido, sin
embargo puede tener atributos por ello es que este elemento solo tienen una etiqueta de inicio.
Ej.:
<br> ---- salto de lnea

<img src=Ubicacin Imagen>
Un elemento no vaco es aquel cuyo modelo de contenido tiene una etiqueta de inicio una de
cierre pudiendo no tener contenido.
Ej.:
<spam> </spam>
<p>texto del elemento no vaco</p>
Los Comentarios: son los textos que escribimos en nuestro documento html para realizar algn
tipo de acotacin sobre algn elemento, propiedad, regla, entre otros, por lo que los mismo no
deben mostrarse en la pgina web.
La sintaxis de los comentarios es la siguiente:

1.1.- ESTRUCTURA DE UN DOCUMENTO HTLM
La estructura bsica de un elemento es de la siguiente forma:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Donde <!DOCTYPE html> representa la versin de html con la que se est trabajando. En
este caso el DOCTYPE utilizado representa a la versin html5.
<html> representa el elemento raz debido a que dentro del estarn todos los dems
elementos.
<head> este elemento contiene la informacin del documento que no se muestra en el
navegador exento por el elemento <title> cuyo contenido siempre se muestra en la pestaa del
navegador.
<body> este elemento contiene a los elementos que le dan forma al documento.
Nota: el elemento <meta> que va dentro de nuestro elemento <head> permite asignarle la
codificacin a nuestro documento para que permita la escritura de caracteres especiales por lo
que debemos incluirlo en nuestro cdigo para resolver este problema de la siguiente manera.
<meta charset=utf-8>
1.2.- ELEMENTOS ESTRUCTURALES
Son aquellos elementos que nos permiten ordenar y agrupar los contenidos de nuestra
pgina web.
En html 4 se trabaja con los elementos div y spam.
El elemento div: es un contenedor que se puede utilizar para agrupar secciones de documentos en
bloque.
El elemento spam: es un contenedor que se puede utilizar para agrupar secciones de contenido en
lnea con dems elementos.
Estos dos elementos no tienen semntica por lo que se aconseja no usarlos demasiado en nuestro
documento para evitar el efecto divitis.
Ahora los elementos estructurales para html 5 son:
El elemento <header> contiene el encabezado de una pgina web.
El elemento <nav> contiene el men de navegacin u otras funcionalidades de navegacin de la
pgina web.
El elemento <article> contiene piezas individuales de contenido como post individuales y noticias
individuales.
Elemento <section> se utiliza para agrupar diferente reas por funciones o diferentes artculos por
temas, as mismo, se puede utilizar dentro del elemento <article>.
Elemento <aside> representa una seccin con contenido que esta sutilmente relacionado con el
contenido que est a su alrededor, pero, que no es fundamental para el flujo de la pgina.
Elemento <footer> contiene el pie de pgina.
Con estos elementos podemos crear una pgina web con secciones bien definidas que nos
permitan hacer un trabajo ms ordenado y limpio. A continuacin en el cdigo se muestra un
ejemplo de la aplicacin de esta estructura.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primera pgina</title>
</head>
<body>
<header>Aqu va la cabecera</header>
<nav>Aqu va el menu de navegacin </nav>
<section>
<article>Aqu va el artculo</article>
</section>
<aside>Aqu va la informacin sobre el autor</aside>
<footer>Aqu va el pie de pgina</footer>
</body>
</html>
Guardamos y abrimos con el navegador para ver el resultado.

1.3.- ELEMENTOS PARA DESPLEGAR TEXTO
Son los elementos que nos permiten agregar en nuestra pgina web textos como
encabezados y prrafos.
Elementos de Frase: son lo que aaden informacin estructural y semntica al texto, y; se
comportan como elementos en lnea. Dentro de estos tenemos a los elementos:
<em> que aade nfasis al texto.
Ej.
Cdigo html: <em>Me gusta mucho este curso</em>

Como se ve en la pgina: Me gusta mucho este curso
<strong> que aade un nfasis mayor (negrita).

Ej. Cdigo html: <em>Me gusta mucho este curso</em>
Como se ve en el navegador: Me gusta mucho este curso
Los elementos I y B casusa el mismo efecto que el strong ms estos dos elementos no
brindan elementos al texto. En nuestro caso procuraremos no utilizar estos elementos para dar
estilo al texto de ser necesario utilizaremos las propiedades CSS.
Elementos de Encabezado: estos nos permiten describir brevemente el tema de las secciones que
presentan siendo el h1 el ms importante y h6 el menos importante.
Ej. Cdigo html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Encabezado de nivel 1</h1>
</body>
</html>
Como se ve en el navegador:
Encabezado de nivel 1
Es importante que se evite saltar los niveles de encabezado, es decir, despus de utilizar
h1 se utilizara h2 y as sucesivamente. Si por ejemplo h2 no presenta el tamao que se desea
utiliza la propiedad CSS font-size para modificar su tamao, esto quiere decir que el objetivo del
encabezado no es brindar un tamao al texto sino resaltar su importancia.
Elemento <p>: este elemento representa un prrafo de texto en el navegador como podemos
verlo en el siguiente ejemplo.
<body>
<p>Hola a todos!</p>
<p>Curso de HTML y CSS en Devode.la.</p>
</body>
Al realizar este ejemplo en nuestro procesador de texto se puede ver como se despliega
un elemento <p> debajo del otro por ser un elemento de bloque. Es importante saber que dentro
de un elemento de bloque no puede haber otros elementos de bloque.
Ahora realicemos el siguiente ejemplo partiendo desde nuestro documento index.html
realizado anteriormente.
<!DOCTYPE html>
<html lang=es>
<head>
<title>Manual de HTML y CCS</title>
<link rel=stylesheet type=text/css href=CSS/estilos.css></link>
</link>
</head>
<body>
<header>Manuales de Programacin - HEADER</header>
<nav>Lista de Manuales - NAV</nav>
<section>
<h1>Manual de HTML y CCS</h1>
<article>
<h2><a href=fundamentos.html>fundamentos</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu
pede mollis pretium. Integer tincidunt.<em>Este texto tiene nfasis</em> Cras dapibus. Vivamus elementum semper
nisi.<em>Este texto tiene un nfasis mayor</em></p>
</article>
<article>
<h2>HTML</h2>
pede mollis pretium. Integer tincidunt. <em>Este texto tiene nfasis</em> Cras dapibus. Vivamus elementum semper
nisi.<em>Este texto tiene un nfasis mayor</em>
</article>
<article>
<h2>CCS</h2>
</article>
</section>
<aside>
<h3>Sobre el autor</h3>
<p>Este manual fue elaborado por Jos Pino, un apasionado de la tecnologa y amante de los
videojuegos</p>
</aside>
<footer>Todos los derechos reservado - FOOTER</footer>
</body>
</html>
El texto Lorem ipsum en algunos editores de texto se genera automticamente este

prrafo al colocar la primera palabra y darle a la tecla tab y este es un texto que se utiliza
precisamente para realizar prcticas como estas y poder observar como se ve nuestra pgina con
prrafos. En caso de que tu editor no lo realice puedes googlearlo para copiarlo y pegarlo.
Lugo de esto guardamos nuestro cdigo y abrimos nuestro archivo con el navegador para
ver como quedo nuestra pgina web. Cualquier duda ver el resultado al final del video de este
tema.
Todos estos elementos nos ayudaran a dotar nuestra pgina web de una mejor estructura
y semntica. Existen otros elementos que sirven para desplegar texto los cuales se vern ms
adelante.
1.4.- ENLACES
En esta seccin aprenderemos a colocar enlaces en nuestro sitio web.
Los enlaces son importantes porque nos permiten direccionar a un usuario desde una pgina web
hasta otras pginas de nuestro mismo sitio web as como tambin enlazar nuestra pgina con otro
sitio web externo, enlazar a ciertos elementos dentro de la misma pgina, enlazar a un correo
electrnico, enlazar para un recurso a descargar y ms.
Para crear estos enlaces utilizaremos el elemento <a> conocido como anchor que tiene la
siguiente estructura:
<a href=https://devcode.la/>Mi primer enlace</a>
Inicio Atributo
Enlace
Texto del enlace
Cierre
En la estructura identificamos una etiqueta de inicio y una etiqueta de cierre tambin

identificamos el atributo href cuyo valor es el enlace al cual direccionaremos al usuario para que
interacte con l y por ultimo tenemos el texto del enlace que ser lo que visualicemos en el
navegador.
Un enlace por defecto aparece subrayado y de color azul y una vez que haya sido cliqueado pasara
a ser de color morado. Cabe mencionar que estos colores son manipulables con CSS que es un
tema que veremos ms adelante.
Ahora le mostrare los cdigos de los tipos de enlaces ms utilizados.
Enlace de una pgina web a otra pgina de mismo sitio web
Creamos un archivo html llamado fundamentos y tecleamos el siguiente cdigo.
Documento fundamentos.html
<DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href=index.html>Manual de HTML y CCS</a>
</body>
</html>
Guardamos los cambios realizados y nos vamos a nuestro documento index.html donde en el
encabezado h2 crearemos un enlace hacia fundamentos como a continuacin se muestra
resaltado.
Documento index.html
<!DOCTYPE html>
<html lang=es>
<head>
</link>
</head>
<body>
<section>
<article>
<h2><a href=fundamentos.html>fundamentos</a></h2>
</article>
<article>
<h2>HTML</h2>
</article>
<article>
<h2>CCS</h2>
</article>
</section>
<aside>
videojuegos</p>
</aside>
</body>
</html>
Guardamos y abrimos en nuestro navegador el documento index y le damos clic a nuestro enlace
fundamentos el cual nos llevar a la pgina fundamentos donde est el link del Manual de HTML y
CCS y le damos clic a este el cual deber regresarnos a la pgina inicial Manual de HTML y CSS.
Recomiendo ver el video por si no se entiende esta explicacin.
Enlace de una pgina web hacia una pgina de un sitio web externo
Volvemos al documento index.html y sobre este guardamos un documento con otro nombre ej.
index2.html con la finalidad de que nos quede el primer documento con el ejemplo del primer tipo
de enlace, posterior a esto nos vamos a la seccin <aside> especficamente en el elemento
prrafo y teclearemos los cdigos resaltados que se muestran continuacin.
Documento index2.html
<!DOCTYPE html>
<html lang=es>
<head>
</link>
</head>
<body>
<section>
<article>
<h2><a href="fundamentos.html">fundamentos</a></h2>
</article>
<article>
<h2>HTML</h2>
</article>
<article>
<h2>CCS</h2>
</article>
</section>
<aside>
<p>Este manual fue elaborado por <a href="https://twitter.com/jjosepino">Jos Pino</a>, un
apasionado de la tecnologa y amante de los videojuegos</p>
</aside>
</body>
</html>
Guardamos y abrimos en el navegador donde debera aparecernos el nombre del autor Jose Pino
convertido en enlace y al darle clic debera redirigirnos hasta su cuenta twitter.
Como vern con este enlace hemos salido de nuestro sitio web a una pgina externa por lo que si
no queremos que esto ocurra deberemos agregar en nuestro enlace el atributo target=_blank
para que esta se abra en una nueva pestaa por tanto con esto ltimo nuestro enlace quedara as:
<a href="https://twitter.com/jjosepino">Jos Pino target=_blank</a>
Guardamos, actualizamos la pgina en el navegador y verificamos que efectivamente la cuenta

twitter de Jos Pino se abra en una pestaa nueva.
Enlace a elementos de una misma pgina web
Este nos permitir ubicarnos sobre una seccin especfica de nuestra pgina web segn indique el
enlace. Para entender mejor esto nos vamos a nuestro documento index.html donde realizaremos
algunos cambios por lo que aconsejo guardar uno nuevo con el mismo contenido y proceder a
editarlo agregndole ocho prrafos ms a nuestro segundo elemento article iguale al anterior
lorem ipsum, una vez hecho esto se guarda y se abre la pgina en el navegador para verificar que
se muestren estos ocho prrafos con la finalidad de que la pagina tenga ms longitud.
Posterior a esto nos regresamos al editor de texto y se colocan los atributos que a continuacin se
resalta:
<!DOCTYPE html>
<html lang=es>
<head>
</link>
</head>
<body>
<section>
<article>
<h2 id="fundamentos"><a href=fundamentos.html>fundamentos</a></h2>
</article>
<article>
<h2 id="HTML">HTML</h2>
En el ltimo prrafo, es decir, el prrafo nueve de este elemento article colocamos los codigos resaltados
nisi.<em>Este texto tiene un nfasis mayor</em><a href="#fundamentos">Ir a encabezados de Fundamentos</a> <a
href="#HTML">Ir a encabezados de HTML</a></p>
</article>
<article>
<h2>CCS</h2>
nisi.<em>Este texto tiene un nfasis mayor</em>.</p>
</article>
</section>
<aside>
videojuegos</p>
</aside>
</body>
</html>
Una vez agregados los cdigos se guardan los cambios y se actualiza la pgina en el navegador
donde debera aparecernos en el ltimo prrafo del segundo elemento article dos link o enlaces
que digan Ir a encabezados de Fundamentos e Ir a encabezado de HTML y cuando le demos clic a
cada uno de estos debera llevarnos hasta los encabezados a los que hacen referencia dentro de la
misma pgina y con esto vemos que este tipo de enlace evita devolvernos hasta el primer
encabezado de una pgina utilizando el scromg del mouse o la barra deslizadora de la pgina
ahorrando de esta forma algo de tiempo al usuario.
Enlace hacia un correo electrnico
Este enlace permite facilitar el envi de un e-mail a travs de un enlace hacia un correo
electrnico de destino ya determinado. Entonces nos vamos nuevamente a nuestro archivo
index.html y en la seccin aside colocaremos los cdigos que a continuacin se muestran
resaltados.
<aside>
videojuegos. Puedes escribirle un correo a <a href="mailto:jjose.pino@gmail.con">jjose.pino@gmail.com</a></p>
</aside>
Se guardan los cambios y se refresca la pgina en el navegado para que aparezca el correo de Jos
Pino en forma de enlace y al darle clic automticamente debera abrirse el correo que se tenga
predeterminado en la computadora por defecto, donde, si este est configurado perfectamente
aparecer en la pestaa de redaccin el correo de Jos Pino como destinatario para el envo del email.
Enlace hacia un recurso descargable
Este es un enlace que nos permite automticamente descargar a nuestra computadora un recurso,
bien sea un programa, un video, un pdf, etc.
Veamos a continuacin los cdigos que nos permiten hacer esto partiendo de nuestro documento
fundamentos.html al cual le agregaremos lo que esta resaltado si no queremos teclear todo el
cdigo.
<DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href=index.html>Manual de HTML y CCS</a> <a
href=https://www.facebook.com/18666990676/photos/pb.18666990676.2207520000.1454528073./10151896465735677/?type=3&theater>Descarga de Edgar Ramirez</a>
</body>
</html>
Una vez hecho esto se guardan los cambios y se abre en el navegador la pgina para verificar que
al darle clic a nuestro enlace Descarga de Edgar Ramrez se descargue la foto de este famoso
personaje de cine Venezolano.
CSS
2.1.- SINTAXIS DE LENGUAJES DE ESTILOS CSS
Est basada en reglas que se define por selectores, propiedades y valores tal como se presenta en
la siguiente estructura.
Selector {
Propiedad1: valor1;
Propiedad2: valor2;
Propiedad3: valor3;wss
}
Caractersticas de las reglas de CSS
Siempre escribir las reglas en minsculas aunque esto sea opcional es lo que se estila.
El selector del identificador puede contener nmeros y letras.
Ej.: .identificadores {
Propiedad: valor;
}
Ej.:
El primer carcter de un selector identificador no puede ser un nmero.

El identificador de un selector puede tener caracteres no permitidos como la & utilizando
la barra invertida.
identificadores\& {
Propiedad: valor;
}
Los selectores: corresponden a cualquier elemento dentro de nuestro documento incluso

podemos usar clases como el ejemplo anterior o el atributo id entre otros como se ver
ms adelante.
Ej.:
.selector {
Propiedad: valor;
}
(a cualquier clase)
#selector {
Propiedad: valor;
}
(a cualquier id)
Propiedades: es una caracterstica escrita en ingls a la que le asignamos un valor para

poder cambiar el aspecto o estilo de un elemento.
Ej.:
selector {
color: valor;
background: valor;
font-family: valor;
font-size: valor;
}
Uso de estilos CSS en documento HTML

Hay varias formas de hacer estos pero la que se explicara en este ejemplo es la ms
utilizada la cual consiste en crear un documento en CSS con los estilos que queramos y enlazar
nuestro documento HTML con este como se muestra a continuacin.
Ej.: Primero creamos una carpeta dentro de nuestra carpeta donde tenemos los documentos html
llamada CSS y posterior a esto se crea un documento CSS llamado estilos.css con la siguiente
regla:
p{
Color: green;
}
Guardamos este documento en la carpeta anteriormente creada.

Ahora abrimos en el editor de texto el documento index.html y le realizaremos los
cambios que a continuacin se muestran dentro del elemento head.
<head>
<Title>Manual de HTML y CCS</Title>
<link rel:stylesheet type:text/css href:CSS/estilos.css>
</head>
Guardamos y abrimos en el navegador nuestro documento index.html donde se puede ver

como el texto de los prrafos cambio a color verde.
Nota: si no te sucede lo anterior debes verificar que en elemento link especficamente en atributo
href hayas escrito bien el nombre de la carpeta y del documento css, es decir, respetando las
maysculas y minsculas.
Entonces se tiene que los archivos css se deben de tener en una carpeta llamada CSS, para
que as se tenga un poco de orden, ya que este ser el mtodo que se utilizar para darle estilos a
los documentos html debido a que con un solo documento css se le puede aplicar estilo a dos o
ms archivos css que estn enlazados al mismo y de esta forma poder compartir estilos y escribir
las reglas una nica vez.
2.2.- SELECTORES SIMPLES
Un selector representa una estructura, esta estructura puede ser usada como una condicin en
una regla CSS.
Ej.: Selector{
Propiedad: valor;
}
Un selector nos ayuda a referirnos a un elemento, una clase, un id entre otros en nuestro
documento html.
En CSS tenemos distintos tipos de selectores.
Ej.:
Selectordeelemento{
Propiedad: valor;
}
.selectordeclase{
Propiedad: valor;
}
#selectordeid{
Propiedad: valor;
}
Selector Universal: Este selector aplica reglas a todos los elementos que se encuentran en
nuestro documento html.
Ej.: *{
Color:blue;
}
Entonces aplicando este estilo CSS todos los textos del documento html se colocan de color azul.
Selector de tipo: este selector aplica el estilo CSS a los elementos que elijamos, adems, este
selector se puede aplicar a varios elementos.
Ej.: p{
Color:orange;
{
Entonces solo el contenido que est dentro del elemento <p> se coloca de color naranja.
Selector ID: posee el atributo id y nos permite definir un nombre nico con el cual se pueda
encontrar cualquier elemento dentro de nuestro documento html.
Ej.: REALIZAR EN HTML
<article id=noticia>
<h1>selector de ID</h1>
<p>En este ejemplo veremos como funciona el selector ID</p>
</article>
REALIZAR EN CSS
#noticia{
color:grey;
}
Nota: no olvides enlazar el documento html con el css para que se pueda aplicar el estilo y logres
ver los cambios en la pgina desde el navegador.
El resulta que se obtiene es que todos los elementos que estn dentro de <article> se colocan de
color gris.
Selector de clase: se le puede asignar cualquier elemento para que se le apliquen estilos en
comn, para esto, se pueden crear estilos con un nombre de clase y esta clase se le puede
asignar a cualquier elemento.
Ej.: REALIZAR EN DOC. HTML

<article>
<h1 class=miprimeraclase>Selector de clase</h1>
<p>En este ejemplo veremos cmo funciona el selector de clase</p>
</article>
REALIZAR EN DOC. CSS

.miprimeraclase{
Color:violet;
}
El resultado obtenido es que el texto del elemento h1 fue afectado por la clase y se muestra de
color violeta.
2.3.- LAS PSEUDO CLASES

El concepto pseudo clase se introdujo para permitir la seleccin basada en la informacin
que esta fuera de la estructura del documento o que son difciles o imposibles de expresar con los
selectores simples. Una pseudo clase siempre contiene dos puntos seguidos del nombre de la
pseudo clase.
Ej.:
:pseudoclase
Pseudo clases ms utilizadas:

Pseudo clase :link y :visited
Codigo html con link
<html>
<head>
<title></title>
<link rel=stylesheet type=text/css href=CSS/Pseudoclaseslinkyvisited.css> </link>
</head>
<body>
<h1 class="miprimeraclase">Pseudo clases :link y :visited
<a target="_blank" href="https://facebook.com">En este ejemplo veremos cmo funciona las
pseudo clases :link y :visited</a>
</body>
</html>
Codigo css aplicando esta pseudo clase

a:link{
color:yellow;
}
a:visited{
color:olive;
}
Esta pseudo clase permite cambiar el estado de un enlace de acuerdo a si fue visitado o
no, por ejemplo al realizar los cdigos anteriores cuando abramos nuestra pgina nos aparecer
un link en amarillo y luego de abrirlo este pasar a ser de color verde oliva as como pasa con los
link de google que antes de abrirlos se muestran en azul y despus de abiertos se muestran en
morado.
Pseudo clases basadas en la accin del usuario: :hover, :active, :focus
Cdigo html para crear un formulario
<html>
<head>
<title></title>
<link rel=stylesheet type:"text/css" href="CSS/Pseudoclaseshoveractiveyfocus.css"></link>
</head>
<body>
<h1>Pseudo clases :hover, :active y:focus</h1>
<form>
<fieldset>
<legend>Datos Personales</legend>
Nombres: <input type="text"/>
Apellidos: <input type="text"/>
</fieldset>
</form>
</body>
</html>
Cdigo css para dar estilo con esta pseudo clase

legend:hover{
color:red;
}
legend:active{
color:blue;
}
input:focus{
color:orange;
}
Aqu podremos observar en nuestra pgina que al pasar el cursor por el texto Datos
personales de nuestra pgina este cambiara de color negro a rojo y cuando le demos clic este se
pondr de color azul as como cuando escribamos nuestros datos estos se mostraran en
anaranjado durante la accin de escribir pues ah el elemento estar en el foco.
Pseudo clases first-child, last-child, nth-child
Estas se usan para dar diferentes estilos a los elementos de una lista de acuerdo a su
posicin.
De acuerdo a esto veamos el siguiente ejemplo:
Codigo html de una lista
<html>
<head>
<title><li>Pseudo clases first-child, last-child, nth-child, etc.</title>
<link rel=stylesheet type=text/css href=CSS/Pseudoclasesfirstchildlastchildnthchild.css></link>
</head>
<body>
<ul>
<li>Primer Hermano</li>
<li>Segundo Hermano</li>
<li>Tercer Hermano</li>
<li>Cuarto Hermano</li>
<li>Ultimo Hermano</li>
</ul>
</body>
</html>
Cdigo css aplicando las pseudo clases

li:first-child{
background: yellow;
}
li:last-child{
background: red;
}
li:nth-child(2n){
background: orange;
}
li:nth-child(3n){
background: olive;
}
El resultado que se obtendr en nuestra pgina es que el elemento Primer Hermano se

sombreara de color amarillo, el elemento segundo hermano se colocara de color rojo, el segundo
y cuarto hermano se colocaran de color anaranjado y el elemento tercer hermano se colocara de
color verde oliva.
Esto se debe a que:
First-Child: Fija el aspecto del primer elemento de un tipo de selector.
Last-Child: Fija el aspecto de la ltima instancia de un selector particular en el elemento
padre.
Nth-child(numero): Esta pseudo-clase de gran potencia es una de las novedades en CSS3 y
permite personalizar los estilos para el hijo n. Como ejemplo, tenemos en nuestro HTML un listado
de 8 elementos:
<ul class="menu">
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
<li>elemento 4</li>
<li>elemento 5</li>
<li>elemento 6</li>
<li>elemento 7</li>
<li>elemento 8</li>
</ul>
Queremos que el tercer elemento del listado tenga una fuente de color verde. Utilizando
la pseudo-clase nth-child:
ul.menu li:nth-child(3) {
color: green ;
}
Adems, esta pseudo-clase tiene la capacidad de crear reglas ms complejas. Por ejemplo,
un problema habitual a la hora de maquetar tablas y/o listados es la posibilidad de alternar dos
estilos para sus diferentes elementos.
Hasta ahora, esto se solucionaba a nivel de programacin, colocando un class para los
elementos pares y otro para los impares. Gracias a CSS3 y la potencia de esta pseudo-clase,
podemos establecer un estilo para todos los elementos pares de nuestro men de esta forma tan
sencilla:
ul.menu li:nth-child(2n) {
color: green ;
}
2.4 LOS PSEUDOELEMENTOS

En CSS3 un pseudo elemento est formado por doble dos puntos (::) seguido del nombre
del pseudo elemento como se muestra a continuacin.
::pseudo elemento
Los pseudo elementos te permiten accerder a informacin del documento que no son
accesibles de otra manera tales como ::first-letter y first-line, as mismo tambin pueden permitir
a los autores referirse a contenidos que no se existen en el documento tales como la hace los
pseudo elementos ::after y before. Veamos el siguiente ejemplo:
Primero en nuestro editor de texto creamos el documento Pseudo Elementos.html donde
escribiremos el cdigo que se muestra debajo, donde; tenemos un encabezado h1 seguido de un
prrafo con algunos estilos definidos.
<html>
<head>
<title></title>
</head>
<body>
<h1>Pseudo Elementos</h1>
<p>First-line First-letter. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
</body>
</html>
Luego en CSS creamos un documento llamado PseudoElementos.css y escribimos lo siguiente:
body{
background:#2c3e50;
margin: 30px 30px;
font-family: trebuchet ms;
color:white;
}
.titulo{
text-align: center;
}
h1::before{
content: "Before";
}
Y creamos el link de este archivo css en el archivo html anterior para que se puedan aplicar los
estilos y poder ver los resultados en nuestro navegador ya que la herramienta CODEPEN utilizada
en el video el cual los vincula automticamente sin este elemento es paga y pues el que no la
pueda pagar no se quede sin realizar la prctica.
Entonces despus de esto abrimos el archivo Pseudo Elementos.html con nuestro navegador
donde se debera ver el texto de color blanco y el fondo de nuestra pgina en azul marino.
Posterior a esto en nuestro archivo CSS agregamos el atributo que aparece resaltado:
body{
background:#2c3e50;
margin: 30px 30px;
color:white;
}
.titulo{
text-align: center;
}
h1::before{
content: "Before";
background: orange;
}
Guardamos y actualizamos nuestra pgina donde, podremos notar que en nuestro encabezado la
palabra Before se resalta con color anaranjado.
Luego de esto volvemos a nuestro archivo css y agregamos nuevamente los cdigos que se
encuentran resaltados:
body{
background:#2c3e50;
margin: 30px 30px;
color:white;
}
.titulo{
text-align: center;
}
h1::before{
content: "Before";
background: orange;
}
h1::after{
content: "After";
background: orange;
Guardamos y volvemos a nuestra pgina y la actualizamos nuevamente con la finalidad de

observar que en nuestro encabezado aparece la palabra After resaltada de color anaranjado.
Ahora le anexaremos a nuestro cdigo lo que esta resaltado:
body{
background:#2c3e50;
margin: 30px 30px;
color:white;
}
.titulo{
text-align: center;
}
h1::before{
content: "Before";
background: orange;
}
h1::after{
content: "After";
background: orange;
}
::p first-letter{
Font-size: 36px;
Color: gold;
}
Guardamos y volvemos a recargar nuestra pgina en el navegador para observar como la letra F
que est en el inicio de nuestro prrafo se coloc de color dorado (gold). Esto se debe porque el
pseudo elemento first-letter representa el primer carcter del texto de un elemento.
Por ultimo agregamos a nuestro cdigo lo que esta resaltado:
body{
background:#2c3e50;
margin: 30px 30px;
color:white;
}
.titulo{
text-align: center;
}
h1::before{
content: "Before";
background: orange;
}
h1::after{
content: "After";
background: orange;
}
::p first-letter{
Font-size: 36px;
color: gold;
}
::p first-line{
color: crimson;
}
Guardamos y volvemos a recargar nuestra pgina en el navegador para poder ver como se cambi
la primera lnea de nuestro prrafo a color carmes. Esto se debe a que first-line describe el
contenido de la primera lnea de un elemento.
2.5.- COMBINACIN DE SELECTORES
Este punto se explicara mediante un ejemplo.
Primero creamos dos documentos uno html y el otro css con el nombre que queramos
ejemplo combinaciondeselectores.html y combinaciondeselectores.css y en el primero
teclearemos el siguiente cdigo:
<html>
<head>
<title></title>
<link rel=stylesheet type=text/css href=CSS/Cobinaciondeselectores.css></link>
</head>
<body>
<ul>
<li>Objeto 1</li>
<li>Objeto 2</li>
<ol>
<li>Objeto anidado 1</li>
<li>Objeto anidado 2</li>
</ol>
</li>
<li>Objeto 3</li>
</ul>
</body>
</html>
Se guardan los cambios y abrimos con el navegador para verificar que veamos lo siguiente.
Ahora en el segundo documento escribimos las siguientes reglas:

ul li{
margin-left: 40px;
}
Gurdanos y actualizamos nuestra pgina donde se podr notar que todos los elementos li
descendientes de ul adoptan un margen izquierdo de 40 pixeles, ahora, se cambia el combinador y
se utilizar el combinador hijo el cual se denota con el siguiente signo > y el cdigo del documento
css queda as:
ul > li{
margin-left: 40px;
}
Guardamos y refrescamos la pgina en nuestro navegador y se debera ver que solo los
elementos hijos de ul adoptan el margen de 40 pixeles los dems descendientes no.
Entindase por elementos li hijo los que estn dentro del elemento ul y los elementos li
descendentes son los que estn dentro del elemento ol.
Ahora veamos un nuevo ejemplo.
Documento HTML
<html>
<head>
<title></title>
<link rel=stylesheet type=text/css href=CSS/ nombredeldocumentocss ></link>
</head>
<body>
<div>
<p>Prrafo 1</p>
<p>Prrafo 2</p>
<div>Caja</div>
<p>Prrafo 3</p>
<p>Prrafo 4</p>
</div>
</body>
</html>
Guardamos y abrimos con el navegador.

Documento CSS
p + p{
background:yellow;
}
Guardamos, enlazamos a nuestro documento html y despus de refrescar la pgina en el

navegador se observa que solo el prrafo 2 se sombrea de color amarillo al usar el combinador de
hermano adyacente p + p ahora cambiamos a combinador de hermano general de la siguiente
forma.
p~p{
background:yellow;
}
Y luego de guarda y refrescar la pgina se podr ver que ahora tanto el prrafo 2 como el 3
adoptan un fondo amarillo. Esto se debe a que en un combinador hermano adyacente el elemento
hermano ubicado a la derecha debe estar en el documento inmediatamente despus del elemento
hermano ubicado a la izquierda es por ello que primer elemento p no puede ser ya que no tiene a
nadie que lo preceda y el prrafo 3 tampoco ya que lo precede un elemento div y no un p,
mientras que con el combinador general no es necesario que un elemento hermano este
inmediatamente despus del otro y es por ello que el prrafo 3 a pesar de estar despus de un
elemento div y no de un elemento p tambin se coloca de fondo amarillo.
2.6.- COLORES
Aqu se aprender que opciones tenemos para asignar colores a los elementos dentro de nuestro
sitio web.
La manera ms sencilla de definir un color en CSS es utilizar el espacio de colores RGB o tambin
llamado Standard red, Green and blue. El espacio de colores RBG son formados por la combinacin
de tres canales de colores rojo, verde y azul cuyo rango de valores van de 0 a 255 la combinacin
de estos tres colores nos permiten crear millones de colores, para ser exactos permiten crear
(256x256x256)=16.777.216 colores donde se puede encontrar el color que ms nos agrade o que
mejor se adecue a nuestras necesidades.
Actualmente existen cuatro maneras principales para representar colores en CSS con el Estndar
red, green and blue dentro de CSS y estos son: Keywords, notacin hexadecimal, RGB y HSL.
Keywords: son valores con nombres en ingles que representan colores en la vida cotidiana tal
como pink de rosado, orange de naranja, yellow de amarillo, entre otros. Estos colores tienen
su correspondiente valor en una notacin hexadecimal y algo que tenemos que tener en
cuenta es que este mtodo es un poco limitado para definir colores en cuanto a la variedad de
colores por lo que para solucionar esta limitacin tenemos otras opciones. La lista completa de
estos colores la podemos encontrar en www.w3.org/TR/css3-color/.
Ej.: Creamos un documento html y css con el nombre que ms nos guste y escribimos el
siguiente cdigo segn corresponda:
Documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset: "UTF-8">
<title></title>
<link rel=stylesheet type=text/css href=CSS/nombredeldocumentocss></link>
</head>
<body>
<p>Representacin de colores por keywords</p>
</body>
</html>
Guardamos y lo abrimos en nuestro navegador. Ahora en:

Documento CSS
p{
color:red;
background:yellow;
}
Guardamos y enlazamos el mismo con nuestro documento html en el elemento link como
anteriormente se ha venido haciendo y por ultimo refrescamos nuestra pgina en el navegador y
verificamos que el texto de nuestro prrafo se muestre de color rojo y con de fondo de color
amarillo
Notacin hexadecimal: esta es la notacin ms utilizada y la definimos por el smbolo (#)
seguidos por nmeros hexadecimales que pueden ser un valor de 0 al 9 y una letra de la A
hasta la F. Se pueden usar tres o seis nmeros hexadecimales para formar el color del valor
adecuado. En una notacin de seis caracteres los dos primero caracteres representan el color
rojo, los dos siguientes el color verde y los dos ltimos el color azul. Estos pares se obtienen
mediante la conversacin de 0 a 255 en su sistema hexadecimal.
Veamos un ejemplo:
Documento HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel=stylesheet type=text/css href=CSS/colocarnombredeldocumentocss ></link>
</head>
<body>
<p>Valores hexadecimales</p>
</body>
</html>

Documento CSS
p{
color:#ff0000;
}
Guardamos, enlazamos con el documento html, actualizamos la pgina en el navegador y

observamos que el texto del prrafo se coloca de color rojo. Lugo nos vamos nuevamente a
nuestro documento css y cambiamos la posicisin de las ff como se muestra a continuacin.
p{
color:#00ff00;
}
Guardamos, actualizamos la pgina en el navegador y observamos que el texto del prrafo se

coloca de color verde. Lugo nos vamos nuevamente a nuestro documento css y nuevamente
cambiamos la posicisin de las ff como se muestra a continuacin.
p{
color:#0000ff;
}

coloca de color verde. Lugo nos vamos nuevamente a nuestro documento css y volvemos a
cambiar la posicisin de las ff como se muestra a continuacin.
p{
color:#0000ff;
}

coloca de color azul.
Entonces con este sistema hexadecimal se puede representar millones de colores como se
mencion anteriormente.
Una notacin hexadecimal se puede representar con 3 caracteres siempre y cuando en cada
canal se repitan los dos caracteres.
Ej.: #FF0000 = #F00 = Rojo
#00FF00 = #0F0 = Verde
RGB y RGBA
Estas notaciones nos permiten combinar los colores usando dos funciones llamadas RGB y
RGBA utilizando un formato decimal. RGB utiliza tres canales rojo, verde y azul en cambio RGBA
adems de estos tres canales utiliza un cuarto canal llamado alfa el cual define la opacidad y oscila
entre los valores 0 y 1, donde 0 significa que el pixel no tiene ninguna opacidad por lo tanto es
totalmente transparente y 1 significa que el pixel es totalmente opaco por ende no cuenta con
ninguna transparencia.
Veamos el siguiente ejemplo:
Creamos un documento html y css con el nombre que ms nos guste y escribimos el cdigo
segn corresponda:
Documento HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel=stylesheet type=text/css href=CSS/colocarnombredeldocumentocss></link>
</head>
<body>
<p class=colorrbg>Color RBG</p>

<p class=colorrbga>Color RBGA</p>
</body>
</html>

Documento CSS
Para agregarle color al texto de la clase RGB:
.colorrgb{
color: rgb(255,0,0);
}

observamos que el texto del se coloca de color rojo. Lugo nos vamos nuevamente a nuestro
documento css y cambiamos el color rgb como se muestra a continuacin.
.colorrgb{
}

coloca de color verde. Lugo vamos otra vez a nuestro documento css y cambiamos el color rgb
como se muestra a continuacin.
.colorrgb{
}

coloca de color azul.
Ahora para agregarle color al texto de la clase RGBA utilizando la funcin RBGA la cual
constara de cuatro valores separados por comas donde los tres primeros valores van desde 0 a
255 y el cuarto valor va de 0 a 1 ya que representa la opacidad. Entonces tenemos:
.colorrgba{
color: rgba(0,0,255,.4);
}

vemos el resultado donde se nota que el color azul tiene transparencia.
HSL Y HSLa
El modelo HSL se representa grficamente mediante un cono doble o un doble hexgono. Los
dos vrtices se corresponden con los colores blanco y negro, el ngulo con el matiz, la distancia
al eje con la saturacin y la distancia al eje blanco negro se corresponde con la luminancia.
Los colores HSL son asignados con la funcin HSL del ingls Hue(o matiz), Saturation(o saturacin)
y lightness(o brillo). Para usar esta funcin se debe agregar tres valores entre parntesis el
primero es el matiz con un valor que va entre 0 y 359 porque a partir de 360 los matices se
repiten, en cuanto al segundo que es la saturacin y el tercero que es el brillo sus valores estn
basados en porcentajes que van de 0% a 100%.
Primero como siempre se crean dos documento uno html y otro css para transcribir los cdigos
segn corresponda.
Documento HTML
<!DOCTYPE html>
<html>
<head>
<title></title> <link rel=stylesheet type=text/css href=CSS/colocarnombredeldocumentocss></link>
</head>
<body>
<p class=colorhsl>Color HSL</p>
<p class=colorhsla>Color HSLa</p>
</body>
</html>
Guardamos y abrimos con el navegador.
Documento CSS
.colorhsl{
color: hsl(240,100%,50%);
}
.colorhsla{
color: hsla(240,100%,50%,.4);
}
Guardamos, enlazamos con el documento html, actualizamos la pgina en el navegador y se

cmo los textos cambian a color azul donde, el color de la clase HSLa es claro porque tiene
transparencia.
Si deseas encontrar colores de manera rpida para tus diseos se recomienda visitar las
pginas:
http://www.color-hex.com
http://www.flatuicolors.com/
http://color.adobe.com/es/create/color-wheel/
As mismo existen ms herramientas.

2.7.- LONGITUDES
Las longitudes en CSS nos ayudan a definir los tamaos de los elementos estructurales, de
las letras, de los bordes entre otros. Para establecer longitudes en CSS tenemos varias unidades
tanto absolutas como relativas.
Unidades de Longitud Absolutas
Las unidades de longitud absolutas estn fijas en relacin a unidades fsicas que son:
Centmetro (cm)
Milmetro (mm)
Pulgada (in)
Pixel (px)
Punto (pt)
Pica (pc)
Dnde:
1 in = 2,54 cm
1 px = 1/96 in
1 pt = 1/72 in
1 pc = 12 pt
Cabe mencionar en esta parte que una pulga de CSS al medirla con una regla no
necesariamente mide una pulga esto depender de la densidad de pixeles de la pantalla.
De estas unidades debes saber que la ms popular es el pixel pero en la actualidad con a la
aparicin de nuevos dispositivos con tamao de pantallas diferentes los pixel han perdido
popularidad, sin embargo, son confiables e ideales para comenzar por ello en este curso
trabajaremos con esta unidad y con otra cuando sea necesario.

Primero como siempre se crean dos documento uno html y otro css para transcribir los cdigos
segn corresponda.
Documento HTML
<!DOCTYPE html>
<html>
<head>
<meta chater: "UTF-8">
<title></title>
<link rel=stylesheet type=text/css href=CSS/colocarnombredeldocumentocss></link>
</head>
<body>
<h1>Unidades de Longitudes Absolutas</h1>
<div class="pulgada">pulgada</div>
<div class="centimetro">centimetro</div>
<div class="pica">pica</div>
<div class="milimetro">milimetro</div>
<div class="punto">punto</div>
<div class="pixel">pixel</div></body>
</html>
Guardamos y nos vamos a:

Documento CSS
div{
height:50px;
font-family:Verdana;
font-size:16;
overflow:visible;
}
.pulgada{
width: 7in;
background: green;
}
.centimetro{
width: 7cm;
background: gold;
}
.pica{
width: 7pc;
background: olive;
}
.milimetro{
width: 7mm;
background: red;
}
.punto{
width: 7pt;
background: blue;
}
.pixel{
width: 7px;
background: maroon;
}
Guardamos, enlazamos con el documento html, actualizamos la pgina en el navegador y si el

cdigo est bien debera verse de la siguiente manera:
Ahora manipula en el documento css el ancho de la pulgada con los valores 6, 5, 4 y

regresas a 7 para que de esta formas veas surte efecto esta variacin en la pgina.
Unidades de Longitud Relativas
Estas a diferencia de las absolutas no est completamente definida ya que su valor siempre esta
referenciado respecto a otro valor. A pesar de aparente dificultad son las ms utilizadas en el
diseo web por la flexibilidad con que se adaptan a los diferentes medios, entre estas unidades
tenemos a:
em
rem
ex
ch
Las cuales estn relacionadas al tamao de la fuente, donde la ms utilizada es em. Veamos un
ejemplo para profundizar con la unidad rem.
Primero crea dos documento uno html y otro css para transcribir los cdigos segn corresponda.
Documento HTML
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/ colocarnombredeldocumentocss ">
</head>
<body>
<span class="unidadrem">rem</span>
</body>
</html
Documento CSS
html{
font-size: 40px;
}
.unidadrem{
color:crimson;
}
Ahora le agregamos a la clase .unidadrem lo siguiente
.unidadrem{
color:crimson;
Font-size: 4rem
}
Guardamos y actualizamos la pgina en el navegador y se podr observar como la fuente aumenta

su tamao 4 veces ms que el que tena, es decir, ahora es de 140px, esto se debe a que la unidad
rem es relativa al tamao de la fuente del elemento raz que todos los documentos es el elemento
html.
Ahora veamos otro ejemplo con la propiedad relativa em.
Documento HTML
<html>
<head>
<link rel=stylesheet type=text/css href=CSS/ colocarnombredeldocumentocss></link>
</head>
<body>
<div class="caja1">
50
</div>
<div class="caja2">
<p>Tamao de fuente heredado</p>
</div>
</body>
</html>
Como de costumbre guardamos y nos vamos a:

Documento CSS
.caja1{
background: green;
font-size: 50px;
height: 50px;
}
.caja2{
font-size: 20px;
}
Guardamos y vemos el navegador nuestra pgina donde se podr notar que el valor de la caja uno
50 aparcera con un color de fondo verde y como no le dimos un ancho el mismo adoptara el
ancho total de la pgina por lo que ahora en caja 1 agregaremos un ancho, quedando el cdigo de
la siguiente manera:
.caja1{
background: green;
font-size: 50px;
height: 50px;
width: 1em;
}
Y al actualizar la pgina veremos que ahora el ancho del color de fondo ser de 50px y si lo
volvemos a aumentar a 2em este se duplicara, esto se debe a que la unidad em es relativa al
tamao de fuente del elemento, en este caso el elemento tiene un tamao de fuente de 50px.
Ahora nos vamos al segundo elemento div que es la clase caja 2 donde vemos que el elemento hijo
<p> con texto de tamao de fuente heredado de 20px entonces nos vamos a nuestro editor de css
y crearemos un selector con el elemento p y variaremos el tamao de la fuente de la siguiente
manera:
.caja2{
font-size: 20px;
p{
font-size: 1em;
}
Guardamos, actualizamos la pgina y vemos que el texto se mantiene del mismo tamao por lo
que ahora le daremos un tamao de fuente de 2em y guardamos nuevamente los cambios,
refrescamos y vemos que el tamao de fuente se duplico, esto se debe a que cuando un elemento
no tiene un tamao de fuente definido en la hoja de estilo la unidad em ser relativa al tamao de
fuente del elemento padre ms cercano con un tamao de fuente definido en este caso el
elemento div con clase2 con tamao de fuente de 20px es por esto que al asignar el valor 2em se
duplica el tamao del texto y pasa a ser de 40px.
2.8.- PORCENTAJES
Los porcentajes en CSS nos ayudan a definir los tamaos de los elemento estructurales, los
tamaos de fuentes, entre otros. El porcentaje est incluido en un captulo aparte debido a que
tcnicamente no es una longitud a pesar de estar muy relacionados. Un porcentaje est
representado por un nmero y el smbolo % cuyo valor siempre es relativo a otro valor por
ejemplo a una longitud.
Ahora veamos el siguiente ejemplo.
Documento HTML
<html>
<head>
<title></title>
><link rel="stylesheet" type="text/css" href="CSS/ colocarnombredeldocumentocss ">
</head>
<body>
<div class="leve1">
<div class="leve2">
<div class="leve3">
20px
</div>
40px
</div>
80px
</div>
</body>
</html>
Documento CSS
.leve1{
width: 400px;
height: 400px;
background: red;
font-size: 80px;
}
.leve2{
background: green;
}
.leve3{
background: blue;
}
Guardamos y verificamos en el navegador como queda nuestra pgina. Despus de esto nos
vamos nuevamente al documento css le agregamos al selector level2 de la clase2 lo siguiente:
}
.leve2{
background: green;
width: 50%;
height: 50%;
font-size: 50%
}
Guardamos los cambios, actualizamos la pgina y vemos en el navegador que el elemento ahora
posee el 50%, es decir, que ahora tiene la mitad del alto, ancho y tamao de fuente del elemento
padre, esto se debe a que los porcentajes hacen que esta propiedades adopten un valor
proporcional a la longitud del elemento padre quedando el ancho y el alto de 200px y una fuente
de 40px ahora en el selector level 3 agregamos lo siguientes:
}
.leve3{
background: blue;
width: 50%;
height: 50%;
font-size: 50%
}
Guardamos, refrescamos la pgina y vemos que igualmente adopto la mitad de los valores de su
elemento padre, esto se debe a que si bien las unidades del elemento padre son porcentajes lo
que se hereda y proporciona es el valor calculado y no el porcentual.

Curso de HTML y CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso de HTML y CSS

Uploaded by

Copyright:

Available Formats

HTML

<br> ---- salto de lnea

Guardamos y abrimos con el navegador para ver el resultado.

Cdigo html: <em>Me gusta mucho este curso</em>

<strong> que aade un nfasis mayor (negrita).

El texto Lorem ipsum en algunos editores de texto se genera automticamente este

Texto del enlace

En la estructura identificamos una etiqueta de inicio y una etiqueta de cierre tambin

Guardamos, actualizamos la pgina en el navegador y verificamos que efectivamente la cuenta

Caractersticas de las reglas de CSS

El primer carcter de un selector identificador no puede ser un nmero.

Los selectores: corresponden a cualquier elemento dentro de nuestro documento incluso

Propiedades: es una caracterstica escrita en ingls a la que le asignamos un valor para

Uso de estilos CSS en documento HTML

Guardamos este documento en la carpeta anteriormente creada.

Guardamos y abrimos en el navegador nuestro documento index.html donde se puede ver

Ej.: REALIZAR EN DOC. HTML

REALIZAR EN DOC. CSS

2.3.- LAS PSEUDO CLASES

Pseudo clases ms utilizadas:

Codigo css aplicando esta pseudo clase

Cdigo css para dar estilo con esta pseudo clase

Cdigo css aplicando las pseudo clases

El resultado que se obtendr en nuestra pgina es que el elemento Primer Hermano se

2.4 LOS PSEUDOELEMENTOS

Guardamos y volvemos a nuestra pgina y la actualizamos nuevamente con la finalidad de

Ahora en el segundo documento escribimos las siguientes reglas:

Guardamos y abrimos con el navegador.

Guardamos, enlazamos a nuestro documento html y despus de refrescar la pgina en el

Guardamos y lo abrimos en nuestro navegador. Ahora en:

Guardamos y lo abrimos en nuestro navegador. Ahora en:

Guardamos, enlazamos con el documento html, actualizamos la pgina en el navegador y

Guardamos, actualizamos la pgina en el navegador y observamos que el texto del prrafo se

Guardamos, actualizamos la pgina en el navegador y observamos que el texto del prrafo se

Guardamos, actualizamos la pgina en el navegador y observamos que el texto del prrafo se

<p class=colorrbg>Color RBG</p>

Guardamos y lo abrimos en nuestro navegador. Ahora en:

Guardamos, enlazamos con el documento html, actualizamos la pgina en el navegador y

Guardamos, actualizamos la pgina en el navegador y observamos que el texto del prrafo se

Guardamos, actualizamos la pgina en el navegador y observamos que el texto del prrafo se

Guardamos, enlazamos con el documento html, actualizamos la pgina en el navegador y

Guardamos, enlazamos con el documento html, actualizamos la pgina en el navegador y se

As mismo existen ms herramientas.

Veamos el siguiente ejemplo:

Guardamos y nos vamos a:

Guardamos, enlazamos con el documento html, actualizamos la pgina en el navegador y si el

Ahora manipula en el documento css el ancho de la pulgada con los valores 6, 5, 4 y

Guardamos y actualizamos la pgina en el navegador y se podr observar como la fuente aumenta

Como de costumbre guardamos y nos vamos a:

You might also like