CHTML-B-Ejercicio-CSSEjemplo3

•

Outros

0

marketingdigital1995

17/6/2023

¡Estudia con miles de materiales!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Libros

93.124 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

www.globalmentoring.com.mx
www.globalmentoring.com.mx
Crear un programa para continuar practicando lo básico de 
estilos CSS. Al finalizar deberemos observar lo siguiente:
www.globalmentoring.com.mx
Vamos a crear el proyecto:
www.globalmentoring.com.mx
Vamos a crear el archivo estilos.css
www.globalmentoring.com.mx
( )
Vamos a crear el archivo estilos.css
www.globalmentoring.com.mx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>CSS Ejemplo 3</title>
</head>
<body>
<h1>CSS Ejemplo 3</h1>
<p>
P&aacute;rrafo de Ejemplo 1
</p>
<p>
P&aacute;rrafo de Ejemplo 2
</p>
<div class="resaltado">
Agregamos una nueva
divisi&oacute;n
</div>
<br>
<div class="nuevaClaseCss">
Agregamos una 
segunda divisi&oacute;n
</div>
</body>
</html>
Archivo index.html: Dar click para ir al código
http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/CssEjercicio3/index.txt
www.globalmentoring.com.mx
body {
background:#256F5B;
font-family:"Arial Narrow";
color:white;
}
h1{
font-size:xx-large;
font-style:italic;
}
p{
font-weight:bolder;
background:#468B78;
}
/*
Agregamos una nueva clase
aplicable a cualquier elemento html
*/
.resaltado{
background:#9E354A;
font-weight:bold;
}
.nuevaClaseCss{
font-family:"Century Gothic";
font-weight:bold;
background:#4F0010;
}
Archivo estilos.css: Dar click para ir al código
http://icursos.net/cursos/HTML/Leccion03/IntroduccionCSS/CssEjercicio3/estilos.css
www.globalmentoring.com.mx
El resultado es como sigue:
www.globalmentoring.com.mx
• Con este ejercicio hemos puesto en práctica varios 
conceptos más de estilos CSS.
• La combinación de colores la obtuvimos con la ayuda del 
siguiente sitio web:
• http://paletton.com/#uid=c5v2G0l390kllllaFw0g0qFqFg0w0aF
http://paletton.com/#uid=c5v2G0l390kllllaFw0g0qFqFg0w0aF
www.globalmentoring.com.mx
Por: Ing. Ubaldo Acosta