CSS
CSS signifíca Cascading Style Sheets, es un lenguaje de diseño gráfico para definir la presentación de documentos HTML. CSS describe cómo los elementos HTML deben ser mostrados en la pantalla, en papel, o en otras formas de medios. CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas a la vez. CSS puede ser almacenado en archivos externos, lo que permite actualizar un sitio web entero simplemente actualizando un archivo. CSS hace que el sitio web sea más accesible para los visitantes con discapacidades. CSS es fácil de aprender y entender, pero también es poderoso.
Para utilizar CSS en un documento HTML, se puede hacer de tres maneras:
- CSS Externo: Se crea un archivo con extensión .css y se enlaza al documento HTML con la etiqueta <link>.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>En el archivo styles.css se pueden definir los estilos de los elementos HTML.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>h1 {
color: blue;
}
p {
color: red;
}- CSS Interno: Se utiliza la etiqueta <style> dentro del documento HTML.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>Actividad
- Definir los estilos de los elementos HTML dentro del documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>- CSS en línea: Se utiliza el atributo style en los elementos HTML.
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue;">Este es un título</h1>
<p style="color: red;">Este es un párrafo</p>
</body>
</html>Actividad
- Definir los estilos de los elementos HTML utilizando el atributo style.
Ver respuesta
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue;">Este es un título</h1>
<p style="color: red;">Este es un párrafo</p>
</body>
</html>En este capítulo se utilizará CSS Externo para definir los estilos de los elementos HTML.
Ahora que hemos aprendido cómo se puede utilizar CSS en un documento HTML, vamos a ver cómo se pueden definir los estilos de los elementos HTML.
Para comprender mejor el tema de CSS vamos a utilizar varios ejemplos que permitirán conocer cada uno de los conceptos necesarios para poder aplicar estilos a los elementos HTML.
Selectores
Los selectores son patrones que se utilizan para seleccionar los elementos a los que se les aplicarán los estilos. Existen varios tipos de selectores, los más comunes son:
- Selector de tipo
- Selector de clase
- Selector de ID
- Selector de atributo
- Selector universal
A continuación se describen brevemente cada uno de los selectores:
- Selector de tipo: Selecciona todos los elementos de un tipo específico.
Ejemplo:
p {
color: red;
}- Selector de clase: Selecciona todos los elementos que tienen un atributo class específico.
Ejemplo:
.texto-rojo {
color: red;
}- Selector de ID: Selecciona un único elemento que tiene un atributo id específico.
Ejemplo:
#titulo {
color: blue;
}- Selector de atributo: Selecciona todos los elementos que tienen un atributo específico.
Ejemplo:
[title] {
color: green;
}- Selector universal: Selecciona todos los elementos de la página.
Ejemplo:
* {
color: black;
}Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando los selectores de tipo, clase, ID, atributo y universal.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 id="titulo">Este es un título</h1>
<p class="texto-rojo">Este es un párrafo</p>
<p title="Este es un párrafo con título">Este es un párrafo con título</p>
<p>Este es un párrafo sin título</p>
</body>
</html>h1 {
color: blue;
}
.texto-rojo {
color: red;
}
#titulo {
color: green;
}
[title] {
color: purple;
}
* {
color: black;
}En los siguientes ejemplos se verán más detalles sobre cómo se pueden utilizar los selectores para aplicar estilos a los elementos HTML.
Comentarios
Para añadir comentarios en un archivo CSS se utiliza la siguiente sintaxis:
/* Este es un comentario */Los comentarios en CSS se utilizan para explicar el código y hacerlo más fácil de entender.
Actividad
- Añadir comentarios en el archivo styles.css.
Ver respuesta
/* Este es un comentario */
h1 {
color: blue; /* Este es un comentario */
}
.texto-rojo {
color: red; /* Este es un comentario */
}
#titulo {
color: green; /* Este es un comentario */
}
[title] {
color: purple; /* Este es un comentario */
}
* {
color: black; /* Este es un comentario */
}Los comentarios son útiles para explicar el código y hacerlo más fácil de entender.
Colores, valores y convenciones
Par entender acerca de este tema crearemos un archivo styles.css y lo enlazaremos a un archivo index.html.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>En el archivo styles.css se pueden definir los estilos de los elementos HTML.
Ejemplo:
h1 {
color: blue;
}
p {
color: red;
}En este ejemplo, el título se mostrará en color azul y el párrafo en color rojo.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>h1 {
color: blue;
}
p {
color: red;
}En CSS se pueden utilizar varios tipos de valores para definir los estilos de los elementos HTML. Algunos de los valores más comunes son:
- Colores: Se pueden utilizar nombres de colores, códigos hexadecimales, códigos RGB, códigos RGBA, códigos HSL y códigos HSLA.
Ejemplo:
h1 {
color: blue; /* Nombre de color */
color: #ff0000; /* Código hexadecimal */
color: rgb(255, 0, 0); /* Código RGB */
color: rgba(255, 0, 0, 0.5); /* Código RGBA */
color: hsl(0, 100%, 50%); /* Código HSL */
color: hsla(0, 100%, 50%, 0.5); /* Código HSLA */
}- Tamaños: Se pueden utilizar valores en píxeles, porcentajes, ems, rems, etc.
Ejemplo:
h1 {
font-size: 24px; /* Tamaño en píxeles */
font-size: 150%; /* Tamaño en porcentaje */
font-size: 1.5em; /* Tamaño en ems */
font-size: 1.5rem; /* Tamaño en rems */
}- Unidades de medida: Se pueden utilizar diferentes unidades de medida como píxeles, porcentajes, ems, rems, etc.
Ejemplo:
h1 {
margin: 10px; /* Margen en píxeles */
margin: 10%; /* Margen en porcentaje */
margin: 1em; /* Margen en ems */
margin: 1rem; /* Margen en rems */
}- Fuentes: Se pueden utilizar diferentes fuentes para los textos.
Ejemplo:
h1 {
font-family: Arial, sans-serif; /* Fuente Arial */
}Border
- Bordes: Se pueden utilizar diferentes estilos de bordes.
Ejemplo:
h1 {
border: 1px solid black; /* Borde sólido de 1 píxel de ancho y color */
}Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando colores, tamaños, unidades de medida y fuentes.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>h1 {
color: blue; /* Nombre de color */
font-size: 24px; /* Tamaño en píxeles */
margin: 10px; /* Margen en píxeles */
font-family: Arial, sans-serif; /* Fuente Arial */
}
p {
color: red; /* Nombre de color */
font-size: 18px; /* Tamaño en píxeles */
margin: 5px; /* Margen en píxeles */
font-family: Verdana, sans-serif; /* Fuente Verdana */
}En los siguientes ejemplos se verán más detalles sobre cómo se pueden utilizar los valores y convenciones para aplicar estilos a los elementos HTML.
Border en profundidad
Los bordes son una parte importante de la presentación de un sitio web. Se pueden utilizar para resaltar elementos, crear separaciones entre elementos, etc.
En CSS se pueden definir los bordes de un elemento utilizando la propiedad border. La propiedad border tiene tres sub-propiedades que se pueden utilizar para definir el ancho, el estilo y el color del borde.
Ejemplo:
h1 {
border: 1px solid black;
}En este ejemplo, se define un borde de 1 píxel de ancho, de estilo sólido y black.
La propiedad border también se puede dividir en tres sub-propiedades: border-width, border-style y border-color.
Ejemplo:
h1 {
border-width: 1px;
border-style: solid;
border-color: black;
}En este ejemplo, se define un borde de 1 píxel de ancho, de estilo sólido y black.
La propiedad border también se puede dividir en cuatro sub-propiedades: border-top, border-right, border-bottom y border-left.
Ejemplo:
h1 {
border-top: 1px solid black;
border-right: 2px dashed red;
border-bottom: 3px dotted blue;
border-left: 4px double green;
}En este ejemplo, se definen bordes diferentes para cada lado del elemento.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando bordes.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>h1 {
border-top: 1px solid black;
border-right: 2px dashed red;
border-bottom: 3px dotted blue;
border-left: 4px double green;
}
p {
border-top: 1px solid black;
border-right: 2px dashed red;
border-bottom: 3px dotted blue;
border-left: 4px double green;
}Unidades de medida
Las unidades de medida son una parte importante de la presentación de un sitio web. Se pueden utilizar para definir tamaños, márgenes, rellenos, etc.
En CSS se pueden utilizar diferentes unidades de medida como píxeles, porcentajes, ems, rems, etc.
Ejemplo:
h1 {
font-size: 24px; /* Tamaño en píxeles */
margin: 10px; /* Margen en píxeles */
padding: 5%; /* Relleno en porcentaje */
width: 50em; /* Ancho en ems */
height: 100%; /* Altura en porcentaje */
}Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando diferentes unidades de medida.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>h1 {
font-size: 24px; /* Tamaño en píxeles */
margin: 10px; /* Margen en píxeles */
padding: 5%; /* Relleno en porcentaje */
width: 50em; /* Ancho en ems */
height: 100%; /* Altura en porcentaje */
}
p {
font-size: 18px; /* Tamaño en píxeles */
margin: 5px; /* Margen en píxeles */
padding: 2%; /* Relleno en porcentaje */
width: 30em; /* Ancho en ems */
height: 50%; /* Altura en porcentaje */
}En este ejemplo, se utilizan diferentes unidades de medida para definir el tamaño de la fuente, el margen, el relleno, el ancho y la altura de un elemento.
Background
El Background es una parte importante de la presentación de un sitio web. Se puede utilizar para definir el color de fondo, una imagen de fondo, etc.
En CSS se pueden definir el color de fondo de un elemento utilizando la propiedad background-color.
Ejemplo:
h1 {
background-color: yellow;
}En este ejemplo, se define el color de fondo del elemento h1 como amarillo.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando el color de fondo.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>
h1 {
background-color: yellow;
}
p {
background-color: lightblue;
}Box model, margin, padding, overflow
El Box Model es una parte importante de la presentación de un sitio web. Se puede utilizar para definir el tamaño, el margen, el relleno, etc. de un elemento.
En CSS se pueden definir el tamaño de un elemento utilizando las propiedades width y height.
Ejemplo:
h1 {
width: 200px;
height: 100px;
}En este ejemplo, se define el ancho del elemento h1 como 200 píxeles y la altura como 100 píxeles.
También se pueden definir el margen y el relleno de un elemento utilizando las propiedades margin y padding.
Ejemplo:
h1 {
margin: 10px;
padding: 5px;
}En este ejemplo, se define un margen de 10 píxeles y un relleno de 5 píxeles para el elemento h1.
La propiedad overflow se utiliza para definir cómo se comporta un elemento cuando su contenido es más grande que su tamaño.
Ejemplo:
h1 {
width: 200px;
height: 100px;
overflow: hidden;
}En este ejemplo, se define que el contenido del elemento h1 se ocultará si es más grande que su tamaño.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando el Box Model, el margen, el relleno y el overflow.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>h1 {
width: 200px;
height: 100px;
margin: 10px;
padding: 5px;
overflow: hidden;
}
p {
width: 300px;
height: 150px;
margin: 20px;
padding: 10px;
overflow: auto;
}Outline, text-align, text-decoration, text-shadow
Outline es una parte importante de la presentación de un sitio web. Se puede utilizar para definir un contorno alrededor de un elemento.
En CSS se puede definir un contorno alrededor de un elemento utilizando la propiedad outline.
Ejemplo:
h1 {
outline: 1px solid black;
}En este ejemplo, se define un contorno de 1 píxel de ancho
Otros estilos de contorno son dotted, dashed, double, groove, ridge, inset, outset.
Ejemplo:
h1 {
outline: 1px dotted black;
}
h2 {
outline: 2px dashed red;
}
h3 {
outline: 3px double blue;
}
h4 {
outline: 4px groove green;
}
h5 {
outline: 5px ridge orange;
}
h6 {
outline: 6px inset purple;
}
p {
outline: 7px outset pink;
}En este ejemplo, se definen diferentes estilos de contorno para los elementos h1, h2, h3, h4, h5, h6 y p.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando el contorno.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<h2>Este es un subtítulo</h2>
<h3>Este es un subtítulo</h3>
<h4>Este es un subtítulo</h4>
<h5>Este es un subtítulo</h5>
<h6>Este es un subtítulo</h6>
<p>Este es un párrafo</p>
</body>
</html>h1 {
outline: 1px dotted black;
}
h2 {
outline: 2px dashed red;
}
h3 {
outline: 3px double blue;
}
h4 {
outline: 4px groove green;
}
h5 {
outline: 5px ridge orange;
}
h6 {
outline: 6px inset purple;
}
p {
outline: 7px outset pink;
}Fuentes custom
Las fuentes personalizadas son una parte importante de la presentación de un sitio web. Se pueden utilizar para definir una fuente personalizada para los textos.
En CSS se puede definir una fuente personalizada para los textos utilizando la propiedad font-family.
Ejemplo:
h1 {
font-family: Arial, sans-serif;
}En este ejemplo, se define la fuente Arial para el elemento h1.
También se pueden utilizar fuentes personalizadas de Google Fonts.
Ejemplo:
h1 {
font-family: 'Roboto', sans-serif;
}En este ejemplo, se define la fuente Roboto de Google Fonts para el elemento h1.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando fuentes personalizadas.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
</body>
</html>h1 {
font-family: Arial, sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
}Links y sus estados
Los Links son una parte importante de la presentación de un sitio web. Se pueden utilizar para definir el estilo de los enlaces.
En CSS se pueden definir los estilos de los enlaces utilizando los selectores a, a:link, a:visited, a:hover y a:active.
Ejemplo:
a {
color: blue;
text-decoration: none;
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
text-decoration: underline;
}En este ejemplo, se definen los estilos de los enlaces, los enlaces visitados, los enlaces al pasar el ratón por encima y los enlaces activos.
Actividad
Crear un archivo styles.css.
Definir los estilos de los enlaces utilizando los selectores a, a:link, a:visited, a:hover y a:active.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<a href="#">Este es un enlace</a>
</body>
</html>a {
color: blue;
text-decoration: none;
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
text-decoration: underline;
}Listas
Las Listas son una parte importante de la presentación de un sitio web. Se pueden utilizar para definir el estilo de las listas.
En CSS se pueden definir los estilos de las listas utilizando los selectores ul, ol y li.
Ejemplo:
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li {
color: blue;
}
li:first-child {
color: red;
}
li:last-child {
color: green;
}
li:nth-child(2) {
color: orange;
}En este ejemplo, se definen los estilos de las listas no ordenadas, las listas ordenadas y los elementos de la lista.
Actividad
Crear un archivo styles.css.
Definir los estilos de las listas utilizando los selectores ul, ol y li.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li {
color: blue;
}
li:first-child {
color: red;
}
li:last-child {
color: green;
}
li:nth-child(2) {
color: orange;
}Tablas
Las Tablas son una parte importante de la presentación de un sitio web. Se pueden utilizar para definir el estilo de las tablas.
En CSS se pueden definir los estilos de las tablas utilizando los selectores table, tr, th y td.
Ejemplo:
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
th {
background-color: lightgray;
}
td {
background-color: lightblue;
}En este ejemplo, se definen los estilos de las tablas, las filas, las celdas de encabezado y las celdas de datos.
Actividad
Crear un archivo styles.css.
Definir los estilos de las tablas utilizando los selectores table, tr, th y td.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>
</body>
</html>table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
th {
background-color: lightgray;
}
td {
background-color: lightblue;
}Display, max-width y position
Display es una parte importante de la presentación de un sitio web. Se puede utilizar para definir el tipo de visualización de un elemento.
En CSS se puede definir el tipo de visualización de un elemento utilizando la propiedad display.
Ejemplo:
h1 {
display: block;
}
p {
display: inline;
}
div {
display: inline-block;
}
span {
display: none;
}
img {
display: none;
}
a {
display: none;
}
ul {
display: none;
}
ol {
display: none;
}
li {
display: none;
}
table {
display: none;
}
tr {
display: none;
}
th {
display: none;
}
td {
display: none;
}
form {
display: none;
}
input {
display: none;
}
button {
display: none;
}En este ejemplo, se definen los tipos de visualización de los elementos h1, p, div, span, img, a, ul, ol, li, table, tr, th, td, form, input y button.
La propiedad max-width se utiliza para definir el ancho máximo de un elemento.
Ejemplo:
h1 {
max-width: 200px;
}
p {
max-width: 300px;
}
div {
max-width: 400px;
}
span {
max-width: 500px;
}
img {
max-width: 600px;
}
a {
max-width: 700px;
}
ul {
max-width: 800px;
}
ol {
max-width: 900px;
}
li {
max-width: 1000px;
}
table {
max-width: 1100px;
}
tr {
max-width: 1200px;
}
th {
max-width: 1300px;
}
td {
max-width: 1400px;
}
form {
max-width: 1500px;
}
input {
max-width: 1600px;
}
button {
max-width: 1700px;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}
center {
text-align: center;
}
center img {
display: inline-block;
}
center p {
display: inline-block;
}
center div {
display: inline-block;
}
center span {
display: inline-block;
}
center a {
display: inline-block;
}
center ul {
display: inline-block;
}
center ol {
display: inline-block;
}
center li {
display: inline-block;
}
center table {
display: inline-block;
}
center tr {
display: inline-block;
}
center th {
display: inline-block;
}La propiedad position se utiliza para definir la posición de un elemento.
Ejemplo:
h1 {
position: static;
}
p {
position: relative;
}
div {
position: absolute;
}
span {
position: fixed;
}
img {
position: sticky;
}
a {
position: static;
}
ul {
position: relative;
}
ol {
position: absolute;
}
li {
position: fixed;
}
table {
position: sticky;
}
tr {
position: static;
}
th {
position: relative;
}
td {
position: absolute;
}
form {
position: fixed;
}
input {
position: sticky;
}
button {
position: static;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}
center {
text-align: center;
}
center img {
display: inline-block;
}
center p {
display: inline-block;
}
center div {
display: inline-block;
}
center span {
display: inline-block;
}
center a {
display: inline-block;
}
center ul {
display: inline-block;
}
center ol {
display: inline-block;
}
center li {
display: inline-block;
}
center table {
display: inline-block;
}
center tr {
display: inline-block;
}
center th {
display: inline-block;
}
center td {
display: inline-block;
}
center form {
display: inline-block;
}
center input {
display: inline-block;
}
center button {
display: inline-block;
}En este ejemplo, se definen las posiciones de los elementos h1, p, div, span, img, a, ul, ol, li, table, tr, th, td, form, input y button.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando la propiedad display, max-width y position.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo</p>
<div>Este es un div</div>
<span>Este es un span</span>
<img src="https://via.placeholder.com/150" alt="Imagen">
<a href="#">Este es un enlace</a>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>
<form>
<input type="text" placeholder="Texto">
<button>Enviar</button>
</form>
</body>
</html>h1 {
display: block;
max-width: 200px;
position: static;
}
p {
display: inline;
max-width: 300px;
position: relative;
}
div {
display: inline-block;
max-width: 400px;
position: absolute;
}
span {
display: none;
max-width: 500px;
position: fixed;
}
img {
display: none;
max-width: 600px;
position: sticky;
}
a {
display: none;
max-width: 700px;
position: static;
}
ul {
display: none;
max-width: 800px;
position: relative;
}
ol {
display: none;
max-width: 900px;
position: absolute;
}
li {
display: none;
max-width: 1000px;
position: fixed;
}
table {
display: none;
max-width: 1100px;
position: sticky;
}
tr {
display: none;
max-width: 1200px;
position: static;
}
th {
display: none;
max-width: 1300px;
position: relative;
}
td {
display: none;
max-width: 1400px;
position: absolute;
}
form {
display: none;
max-width: 1500px;
position: fixed;
}
input {
display: none;
max-width: 1600px;
position: sticky;
}
button {
display: none;
max-width: 1700px;
position: static;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}
center {
text-align: center;
}
center img {
display: inline-block;
}
center p {
display: inline-block;
}
center div {
display: inline-block;
}
center span {
display: inline-block;
}
center a {
display: inline-block;
}
center ul {
display: inline-block;
}
center ol {
display: inline-block;
}
center li {
display: inline-block;
}
center table {
display: inline-block;
}
center tr {
display: inline-block;
}
center th {
display: inline-block;
}
center td {
display: inline-block;
}
center form {
display: inline-block;
}
center input {
display: inline-block;
}
center button {
display: inline-block;
}Float
Float es una parte importante de la presentación de un sitio web. Se puede utilizar para definir la posición de un elemento.
En CSS se puede definir la posición de un elemento utilizando la propiedad float.
Ejemplo:
img {
float: left;
}
p {
float: right;
}
div {
float: none;
}
span {
float: none;
}
a {
float: none;
}
ul {
float: none;
}
ol {
float: none;
}
li {
float: none;
}
table {
float: none;
}
tr {
float: none;
}
th {
float: none;
}
td {
float: none;
}
form {
float: none;
}
input {
float: none;
}
button {
float: none;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}En este ejemplo, se definen las posiciones de los elementos img, p, div, span, a, ul, ol, li, table, tr, th, td, form, input y button.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando la propiedad float.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="https://via.placeholder.com/150" alt="Imagen">
<p>Este es un párrafo</p>
<div>Este es un div</div>
<span>Este es un span</span>
<a href="#">Este es un enlace</a>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>
<form>
<input type="text" placeholder="Texto">
<button>Enviar</button>
</form>
</body>
</html>img {
float: left;
}
p {
float: right;
}
div {
float: none;
}
span {
float: none;
}
a {
float: none;
}
ul {
float: none;
}
ol {
float: none;
}
li {
float: none;
}
table {
float: none;
}
tr {
float: none;
}
th {
float: none;
}
td {
float: none;
}
form {
float: none;
}
input {
float: none;
}
button {
float: none;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}
center {
text-align: center;
}
center img {
display: inline-block;
}
center p {
display: inline-block;
}
center div {
display: inline-block;
}
center span {
display: inline-block;
}
center a {
display: inline-block;
}
center ul {
display: inline-block;
}
center ol {
display: inline-block;
}
center li {
display: inline-block;
}
center table {
display: inline-block;
}
center tr {
display: inline-block;
}
center th {
display: inline-block;
}
center td {
display: inline-block;
}
center form {
display: inline-block;
}
center input {
display: inline-block;
}
center button {
display: inline-block;
}inline-block
Inline-block es una parte importante de la presentación de un sitio web. Se puede utilizar para definir la posición de un elemento.
En CSS se puede definir la posición de un elemento utilizando la propiedad display con el valor inline-block.
Ejemplo:
img {
display: inline-block;
}
p {
display: inline-block;
}
div {
display: inline-block;
}
span {
display: inline-block;
}
a {
display: inline-block;
}
ul {
display: inline-block;
}
ol {
display: inline-block;
}
li {
display: inline-block;
}
table {
display: inline-block;
}
tr {
display: inline-block;
}
th {
display: inline-block;
}
td {
display: inline-block;
}
form {
display: inline-block;
}
input {
display: inline-block;
}
button {
display: inline-block;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}En este ejemplo, se definen las posiciones de los elementos img, p, div, span, a, ul, ol, li, table, tr, th, td, form, input y button.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando la propiedad display con el valor inline-block.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="https://via.placeholder.com/150" alt="Imagen">
<p>Este es un párrafo</p>
<div>Este es un div</div>
<span>Este es un span</span>
<a href="#">Este es un enlace</a>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>
<form>
<input type="text" placeholder="Texto">
<button>Enviar</button>
</form>
</body>
</html>img {
display: inline-block;
}
p {
display: inline-block;
}
div {
display: inline-block;
}
span {
display: inline-block;
}
a {
display: inline-block;
}
ul {
display: inline-block;
}
ol {
display: inline-block;
}
li {
display: inline-block;
}
table {
display: inline-block;
}
tr {
display: inline-block;
}
th {
display: inline-block;
}
td {
display: inline-block;
}
form {
display: inline-block;
}
input {
display: inline-block;
}
button {
display: inline-block;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}
center {
text-align: center;
}
center img {
display: inline-block;
}
center p {
display: inline-block;
}
center div {
display: inline-block;
}
center span {
display: inline-block;
}
center a {
display: inline-block;
}
center ul {
display: inline-block;
}
center ol {
display: inline-block;
}
center li {
display: inline-block;
}
center table {
display: inline-block;
}
center tr {
display: inline-block;
}
center th {
display: inline-block;
}
center td {
display: inline-block;
}
center form {
display: inline-block;
}
center input {
display: inline-block;
}
center button {
display: inline-block;
}Centrar un elemento
Centrar un elemento es una parte importante de la presentación de un sitio web. Se puede utilizar para definir la posición de un elemento.
En CSS se puede definir la posición de un elemento utilizando la propiedad margin con los valores auto y 0.
Ejemplo:
img {
display: block;
margin: 0 auto;
}
p {
display: block;
margin: 0 auto;
}
div {
display: block;
margin: 0 auto;
}
span {
display: block;
margin: 0 auto;
}
a {
display: block;
margin: 0 auto;
}
ul {
display: block;
margin: 0 auto;
}
ol {
display: block;
margin: 0 auto;
}
li {
display: block;
margin: 0 auto;
}
table {
display: block;
margin: 0 auto;
}
tr {
display: block;
margin: 0 auto;
}
th {
display: block;
margin: 0 auto;
}
td {
display: block;
margin: 0 auto;
}
form {
display: block;
margin: 0 auto;
}
input {
display: block;
margin: 0 auto;
}
button {
display: block;
margin: 0 auto;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}
center {
text-align: center;
}
center img {
display: inline-block;
}
center p {
display: inline-block;
}
center div {
display: inline-block;
}
center span {
display: inline-block;
}
center a {
display: inline-block;
}
center ul {
display: inline-block;
}
center ol {
display: inline-block;
}
center li {
display: inline-block;
}
center table {
display: inline-block;
}
center tr {
display: inline-block;
}
center th {
display: inline-block;
}
center td {
display: inline-block;
}
center form {
display: inline-block;
}
center input {
display: inline-block;
}
center button {
display: inline-block;
}
center clear {
clear: both;
}
center clearfix {
overflow: hidden;
}
center clearfix::after {
content: "";
display: table;
clear: both;
}En este ejemplo, se definen las posiciones de los elementos img, p, div, span, a, ul, ol, li, table, tr, th, td, form, input y button.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML utilizando la propiedad margin con los valores auto y 0.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="https://via.placeholder.com/150" alt="Imagen">
<p>Este es un párrafo</p>
<div>Este es un div</div>
<span>Este es un span</span>
<a href="#">Este es un enlace</a>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>
<form>
<input type="text" placeholder="Texto">
<button>Enviar</button>
</form>
</body>
</html>img {
display: block;
margin: 0 auto;
}
p {
display: block;
margin: 0 auto;
}
div {
display: block;
margin: 0 auto;
}
span {
display: block;
margin: 0 auto;
}
a {
display: block;
margin: 0 auto;
}
ul {
display: block;
margin: 0 auto;
}
ol {
display: block;
margin: 0 auto;
}
li {
display: block;
margin: 0 auto;
}
table {
display: block;
margin: 0 auto;
}
tr {
display: block;
margin: 0 auto;
}
th {
display: block;
margin: 0 auto;
}
td {
display: block;
margin: 0 auto;
}
form {
display: block;
margin: 0 auto;
}
input {
display: block;
margin: 0 auto;
}
button {
display: block;
margin: 0 auto;
}
clear {
clear: both;
}
clearfix {
overflow: hidden;
}
clearfix::after {
content: "";
display: table;
clear: both;
}
center {
text-align: center;
}
center img {
display: inline-block;
}
center p {
display: inline-block;
}
center div {
display: inline-block;
}
center span {
display: inline-block;
}
center a {
display: inline-block;
}
center ul {
display: inline-block;
}
center ol {
display: inline-block;
}
center li {
display: inline-block;
}
center table {
display: inline-block;
}
center tr {
display: inline-block;
}
center th {
display: inline-block;
}
center td {
display: inline-block;
}
center form {
display: inline-block;
}
center input {
display: inline-block;
}
center button {
display: inline-block;
}
center clear {
clear: both;
}
center clearfix {
overflow: hidden;
}
center clearfix::after {
content: "";
display: table;
clear: both;
}Proyecto: Danto estilo a un portafolio personal de HTML
En el presente proyecto se aplicarán los conocimientos adquiridos en este capítulo para dar estilo a un portafolio personal de HTML.
El portafolio personal de HTML se compone de las siguientes secciones:
Header: Contiene el nombre del autor y una imagen de perfil.
About: Contiene una breve descripción del autor.
Skills: Contiene una lista de habilidades del autor.
Projects: Contiene una lista de proyectos del autor.
Contact: Contiene un formulario de contacto.
En el archivo index.html se encuentra la estructura del portafolio personal de HTML.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil">
</header>
<section id="about">
<h2>Acerca de mí</h2>
<p>Breve descripción del autor</p>
</section>
<section id="skills">
<h2>Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects">
<h2>Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact">
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea>
<button type="submit">Enviar</button>
</form>
</section>
</body>
</html>En el archivo styles.css se deben definir los estilos de los elementos HTML.
Ejemplo:
header {
text-align: center;
}
header h1 {
color: blue;
}
header img {
border-radius: 50%;
}
section {
margin: 20px;
}
section h2 {
color: red;
}
section p {
color: green;
}
section ul {
list-style-type: disc;
}
section li {
color: orange;
}
form {
margin: 20px;
}
form label {
color: purple;
}
form input, form textarea {
width: 100%;
margin: 10px 0;
}
form button {
background-color: pink;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}En este ejemplo, se definen los estilos de los elementos HTML del portafolio personal de HTML.
Actividad
Crear un archivo styles.css.
Definir los estilos de los elementos HTML del portafolio personal de HTML.
Enlazar el archivo styles.css al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil">
</header>
<section id="about">
<h2>Acerca de mí</h2>
<p>Breve descripción del autor</p>
</section>
<section id="skills">
<h2>Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects">
<h2>Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact">
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea>
<button type="submit">Enviar</button>
</form>
</section>
</body>
</html>header {
text-align: center;
}
header h1 {
color: blue;
}
header img {
border-radius: 50%;
}
section {
margin: 20px;
}
section h2 {
color: red;
}
section p {
color: green;
}
section ul {
list-style-type: disc;
}
section li {
color: orange;
}
form {
margin: 20px;
}
form label {
color: purple;
}
form input, form textarea {
width: 100%;
margin: 10px 0;
}
form button {
background-color: pink;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}Frameworks de CSS
Los Frameworks de CSS son una parte importante de la presentación de un sitio web. Se pueden utilizar para definir los estilos de los elementos HTML de forma rápida y sencilla.
Algunos de los Frameworks de CSS más populares son:
Bootstrap: Es un Framework de CSS que permite crear sitios web responsivos y móviles de forma rápida y sencilla.
Tailwind CSS: Es un Framework de CSS que permite crear sitios web responsivos y móviles de forma rápida y sencilla.
Bulma: Es un Framework de CSS que permite crear sitios web responsivos y móviles de forma rápida y sencilla.
Proyecto: Danto estilo a un portafolio personal de HTML con Bootstrap,
En el presente proyecto se aplicarán los conocimientos adquiridos en este capítulo para dar estilo a un portafolio personal de HTML con Bootstrap.
El portafolio personal de HTML con Bootstrap se compone de las siguientes secciones:
Header: Contiene el nombre del autor y una imagen de perfil.
About: Contiene una breve descripción del autor.
Skills: Contiene una lista de habilidades del autor.
Projects: Contiene una lista de proyectos del autor.
Contact: Contiene un formulario de contacto.
En el archivo index.html se encuentra la estructura del portafolio personal de HTML con Bootstrap.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<header class="text-center">
<h1>Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="rounded-circle">
</header>
<section id="about" class="container">
<h2>Acerca de mí</h2>
<p>Breve descripción del autor</p>
</section>
<section id="skills" class="container">
<h2>Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container">
<h2>Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container">
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="form-control">
<label for="email">Email:</label>
<input type="email" id="email" name="email" class="form-control">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="form-control"></textarea>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</section>
</body>
</html>En este ejemplo, se utiliza Bootstrap para dar estilo al portafolio personal de HTML.
Actividad
Crear un archivo index.html.
Definir la estructura del portafolio personal de HTML con Bootstrap.
Enlazar el archivo index.html al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<header class="text-center">
<h1>Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="rounded-circle">
</header>
<section id="about" class="container">
<h2>Acerca de mí</h2>
<p>Breve descripción del autor</p>
</section>
<section id="skills" class="container">
<h2>Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container">
<h2>Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container">
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="form-control">
<label for="email">Email:</label>
<input type="email" id="email" name="email" class="form-control">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="form-control"></textarea>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</section>
</body>
</html>Proyecto: Danto estilo a un portafolio personal de HTML con Tailwind CSS
En el presente proyecto se aplicarán los conocimientos adquiridos en este capítulo para dar estilo a un portafolio personal de HTML con Tailwind CSS.
El portafolio personal de HTML con Tailwind CSS se compone de las siguientes secciones:
Header: Contiene el nombre del autor y una imagen de perfil.
About: Contiene una breve descripción del autor.
Skills: Contiene una lista de habilidades del autor.
Projects: Contiene una lista de proyectos del autor.
Contact: Contiene un formulario de contacto.
En el archivo index.html se encuentra la estructura del portafolio personal de HTML con Tailwind CSS.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="text-center">
<h1 class="text-2xl font-bold">Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="rounded-full w-24 h-24">
</header>
<section id="about" class="container mx-auto">
<h2 class="text-xl font-bold">Acerca de mí</h2>
<p class="text-lg">Breve descripción del autor</p>
</section>
<section id="skills" class="container mx-auto">
<h2 class="text-xl font-bold">Habilidades</h2>
<ul class="list-disc">
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container mx-auto">
<h2 class="text-xl font-bold">Proyectos</h2>
<ul class="list-disc">
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container mx-auto">
<h2 class="text-xl font-bold">Contacto</h2>
<form>
<label for="nombre" class="block">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="w-full p-2 border border-gray-300 rounded">
<label for="email" class="block">Email:</label>
<input type="email" id="email" name="email" class="w-full p-2 border border-gray-300 rounded">
<label for="mensaje" class="block">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="w-full p-2 border border-gray-300 rounded"></textarea>
<button type="submit" class="w-full p-2 bg-blue-500 text-white rounded">Enviar</button>
</form>
</section>
</body>
</html>En este ejemplo, se utiliza Tailwind CSS para dar estilo al portafolio personal de HTML.
Actividad
Crear un archivo index.html.
Definir la estructura del portafolio personal de HTML con Tailwind CSS.
Enlazar el archivo index.html al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="text-center">
<h1 class="text-2xl font-bold">Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="rounded-full w-24 h-24">
</header>
<section id="about" class="container mx-auto">
<h2 class="text-xl font-bold">Acerca de mí</h2>
<p class="text-lg">Breve descripción del autor</p>
</section>
<section id="skills" class="container mx-auto">
<h2 class="text-xl font-bold">Habilidades</h2>
<ul class="list-disc">
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container mx-auto">
<h2 class="text-xl font-bold">Proyectos</h2>
<ul class="list-disc">
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container mx-auto">
<h2 class="text-xl font-bold">Contacto</h2>
<form>
<label for="nombre" class="block">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="w-full p-2 border border-gray-300 rounded">
<label for="email" class="block">Email:</label>
<input type="email" id="email" name="email" class="w-full p-2 border border-gray-300 rounded">
<label for="mensaje" class="block">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="w-full p-2 border border-gray-300 rounded"></textarea>
<button type="submit" class="w-full p-2 bg-blue-500 text-white rounded">Enviar</button>
</form>
</section>
</body>
</html>Proyecto: Danto estilo a un portafolio personal de HTML con Bulma.
En el presente proyecto se aplicarán los conocimientos adquiridos en este capítulo para dar estilo a un portafolio personal de HTML con Bulma.
El portafolio personal de HTML con Bulma se compone de las siguientes secciones:
Header: Contiene el nombre del autor y una imagen de perfil.
About: Contiene una breve descripción del autor.
Skills: Contiene una lista de habilidades del autor.
Projects: Contiene una lista de proyectos del autor.
Contact: Contiene un formulario de contacto.
En el archivo index.html se encuentra la estructura del portafolio personal de HTML con Bulma.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
>
</head>
<body>
<header class="has-text-centered">
<h1 class="title is-2">Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="is-rounded is-128x128">
</header>
<section id="about" class="container">
<h2 class="title is-4">Acerca de mí</h2>
<p class="subtitle is-5">Breve descripción del autor</p>
</section>
<section id="skills" class="container">
<h2 class="title is-4">Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container">
<h2 class="title is-4">Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container">
<h2 class="title is-4">Contacto</h2>
<form>
<label for="nombre" class="label">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="input">
<label for="email" class="label">Email:</label>
<input type="email" id="email" name="email" class="input">
<label for="mensaje" class="label">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="textarea"></textarea>
<button type="submit" class="button is-primary">Enviar</button>
</form>
</section>
</body>
</html>En este ejemplo, se utiliza Bulma para dar estilo al portafolio personal de HTML.
Actividad
Crear un archivo index.html.
Definir la estructura del portafolio personal de HTML con Bulma.
Enlazar el archivo index.html al documento HTML.
Ver respuesta
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
>
</head>
<body>
<header class="has-text-centered">
<h1 class="title is-2">Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="is-rounded is-128x128">
</header>
<section id="about" class="container">
<h2 class="title is-4">Acerca de mí</h2>
<p class="subtitle is-5">Breve descripción del autor</p>
</section>
<section id="skills" class="container">
<h2 class="title is-4">Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container">
<h2 class="title is-4">Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container">
<h2 class="title is-4">Contacto</h2>
<form>
<label for="nombre" class="label">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="input">
<label for="email" class="label">Email:</label>
<input type="email" id="email" name="email" class="input">
<label for="mensaje" class="label">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="textarea"></textarea>
<button type="submit" class="button is-primary">Enviar</button>
</form>
</section>
</body>
</html>Reto
Crea un portafolio personal de HTML con CSS utilizando los conocimientos adquiridos en este capítulo, puede ser con CSS de forma nativa o con un Framework de CSS como Bootstrap, Tailwind CSS o Bulma.
El portafolio personal de HTML debe contener las siguientes secciones:
Header: Contiene el nombre del autor y una imagen de perfil.
About: Contiene una breve descripción del autor.
Skills: Contiene una lista de habilidades del autor.
Projects: Contiene una lista de proyectos del autor.
Contact: Contiene un formulario de contacto.
Ver respuesta
- CSS Nativo
<!DOCTYPE html>
<html>
<head>
<style>
header {
text-align: center;
}
header h1 {
color: blue;
}
header img {
border-radius: 50%;
}
section {
margin: 20px;
}
section h2 {
color: red;
}
section p {
color: green;
}
section ul {
list-style-type: disc;
}
section li {
color: orange;
}
form {
margin: 20px;
}
form label {
color: purple;
}
form input, form textarea {
width: 100%;
margin: 10px 0;
}
form button {
background-color: pink;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil">
</header>
<section id="about">
<h2>Acerca de mí</h2>
<p>Breve descripción del autor</p>
</section>
<section id="skills">
<h2>Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects">
<h2>Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact">
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea>
<button type="submit">Enviar</button>
</form>
</section>
</body>
</html>- Bootstrap
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<header class="text-center">
<h1>Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="rounded-circle">
</header>
<section id="about" class="container">
<h2>Acerca de mí</h2>
<p>Breve descripción del autor</p>
</section>
<section id="skills" class="container">
<h2>Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container">
<h2>Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container">
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="form-control">
<label for="email">Email:</label>
<input type="email" id="email" name="email" class="form-control">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="form-control"></textarea>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</section>
</body>
</html>- Tailwind CSS
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="text-center">
<h1 class="text-2xl font-bold">Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="rounded-full w-24 h-24">
</header>
<section id="about" class="container mx-auto">
<h2 class="text-xl font-bold">Acerca de mí</h2>
<p class="text-lg">Breve descripción del autor</p>
</section>
<section id="skills" class="container mx-auto">
<h2 class="text-xl font-bold">Habilidades</h2>
<ul class="list-disc">
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container mx-auto">
<h2 class="text-xl font-bold">Proyectos</h2>
<ul class="list-disc">
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container mx-auto">
<h2 class="text-xl font-bold">Contacto</h2>
<form>
<label for="nombre" class="block">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="w-full p-2 border border-gray-300 rounded">
<label for="email" class="block">Email:</label>
<input type="email" id="email" name="email" class="w-full p-2 border border-gray-300 rounded">
<label for="mensaje" class="block">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="w-full p-2 border border-gray-300 rounded"></textarea>
<button type="submit" class="w-full p-2 bg-blue-500 text-white rounded">Enviar</button>
</form>
</section>
</body>
</html>- Bulma
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
>
</head>
<body>
<header class="has-text-centered">
<h1 class="title is-2">Nombre del autor</h1>
<img src="imagen.jpg" alt="Imagen de perfil" class="is-rounded is-128x128">
</header>
<section id="about" class="container">
<h2 class="title is-4">Acerca de mí</h2>
<p class="subtitle is-5">Breve descripción del autor</p>
</section>
<section id="skills" class="container">
<h2 class="title is-4">Habilidades</h2>
<ul>
<li>Habilidad 1</li>
<li>Habilidad 2</li>
<li>Habilidad 3</li>
</ul>
</section>
<section id="projects" class="container">
<h2 class="title is-4">Proyectos</h2>
<ul>
<li>Proyecto 1</li>
<li>Proyecto 2</li>
<li>Proyecto 3</li>
</ul>
</section>
<section id="contact" class="container">
<h2 class="title is-4">Contacto</h2>
<form>
<label for="nombre" class="label">Nombre:</label>
<input type="text" id="nombre" name="nombre" class="input">
<label for="email" class="label">Email:</label>
<input type="email" id="email" name="email" class="input">
<label for="mensaje" class="label">Mensaje:</label>
<textarea id="mensaje" name="mensaje" class="textarea"></textarea>
<button type="submit" class="button is-primary">Enviar</button>
</form>
</section>
</body>
</html>Conclusiones
En este capítulo se aprendió sobre CSS, que es un lenguaje de estilo utilizado para dar estilo a los elementos HTML de un sitio web.
Se aprendió sobre las propiedades de CSS, que se utilizan para definir el estilo de los elementos HTML, como el color de fondo, el tamaño, el margen, el relleno, etc.
Se aprendió sobre el Box Model, que es una parte importante de la presentación de un sitio web, y se puede utilizar para definir el tamaño, el margen, el relleno, etc. de un elemento.
Se aprendió sobre el Outline, que se utiliza para definir un contorno alrededor de un elemento.
Se aprendió sobre las fuentes personalizadas, que se pueden utilizar para definir una fuente personalizada para los textos.
Se aprendió sobre los Links y sus estados, que se pueden utilizar para definir el estilo de los enlaces.
Se aprendió sobre las Listas, que se pueden utilizar para definir el estilo de las listas.
Se aprendió sobre las Tablas, que se pueden utilizar para definir el estilo de las tablas.
Se aprendió sobre el Display, que se puede utilizar para definir el tipo de visualización de un elemento.
Se aprendió sobre el Float, que se puede utilizar para definir la posición de un elemento.
Se aprendió sobre el Inline-block, que se puede utilizar para definir la posición de un elemento.
Se aprendió sobre cómo centrar un elemento, que se puede utilizar para definir la posición de un elemento.
Se aprendió sobre los Frameworks de CSS, que se pueden utilizar para definir los estilos de los elementos HTML de forma rápida y sencilla.
Se aplicaron los conocimientos adquiridos en este capítulo para dar estilo a un portafolio personal de HTML con CSS, Bootstrap, Tailwind CSS y Bulma.