Cuando se quiere acomodar información de una página web, es muy importante saber decorar columnas en CSS, debido a que esto nos sirve para determinar una información separada de la otra, como por ejemplo una sección de información diferente a la otra. Es muy similar al caso del cuando se quiere crear un menú en una página web, este menú debe de estar separado en una serie de columnas y en este caso se le pueden aplicar estilos diferentes a cada una de ellas para decorar columnas en CSS.
También en este caso explicaremos cómo podemos usar iconos de una página web externa sin necesidad de descargarlos localmente en nuestra computadora o en el mismo archivo de nuestra página web, que son importante al decorar columnas en CSS. Esto no sirve para poder utilizar cualquier tipo de iconos de esta página sin necesidad de almacenarlos.
Proceso para decorar columnas en CSS
👊 ¿QUIERES INCREMENTAR TUS CONOCIMIENTOS EN HTML y CSS? 👊
Entonces te recomiendo tomar este curso de HTML y CSS donde aprenderás estos lenguajes desde cero hasta convertirte en un experto, realizando varios ejercicios prácticos para que puedas aprender de una mejor manera.
👇
CURSO COMPLETO
Información de HTML
Antes de decorar columnas en CSS, se presenta un ejemplo de lo que se va a colocar en un archivo HTML, dentro del Body en este caso para referirse a las columnas se van a colocar tres espacios con texto al azar, simplemente para demostración, además cada uno de ellos se le colocan los iconos que son obtenidos de otra página.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link rel="stylesheet" href="style4.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section id="skills" class="one-third">
<div class="icon-wrap">
<i class="fa fa-desktop"></i>
</div>
<h3>First part</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="skills" class="one-third">
<div class="icon-wrap">
<i class="fa fa-pencil-square-o"></i>
</div>
<h3>Second part</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="skills" class="one-third">
<div class="icon-wrap">
<i class="fa fa-file-code-o"></i>
</div>
<h3>Third part</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</body>
</html>
Para poder obtener los iconos de una página web, se tiene que colocar la siguiente línea de código en el head de nuestro archivo HTML, esto nos hace referirnos a ese enlace que cuenta con todos los iconos, para que cada vez que seleccionemos un icono lo inserte desde esa URL.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Para colocar el icono dentro de nuestra página, simplemente tenemos que crear una etiqueta <i> y le debemos colocar la clase del icono que queremos insertar, para saber qué clase debemos interesar simplemente debemos de ir a la página de donde se obtienen los iconos.
<i class="fa fa-desktop"></i>
Si quieres aprender más sobre crear archivos HTML con nuevas etiquetas, te recomiendo visitar mi página principal donde encontrarás más ejemplos.
👊 ¿NECESITAS UN HOSTING PARA TU PAGINA WEB O TIENDA ONLINE? 👊
Entonces te recomiendo usar Hostinger, que cuenta con una gran cantidad de ventajas y herramientas para crear tu Web de manera sencilla y profesional.
Estas son una de las características al contratar Hostinger:
💽 Hospedaje Profesional
💻 Sitio Web seguro con SSL
🔋 Velocidad de procesamiento
🖲 Interfaz fácil de usar
💰 Dominio Gratis
Entre muchas otras cosas mas…
Información de CSS
Dentro de nuestro archivo CSS simplemente vamos a definir los estilos para decorar columnas en CSS.
Primero vamos a comenzar con los estilos de los párrafos, a la cual le vamos a colocar una tamaño del 130%, después un espaciado entre lineas del 155%, además un padding del 3% para que sea proporcional, lo vamos a justificar y le vamos a colocar una identación del 2%.
p{
font-size: 130%;
line-height: 155%;
padding: 3%;
text-align: justify;
text-indent: 2%;
}
A los títulos de cada columna también se van a aplicar los siguientes estilos, que es cambiarle el tamaño de fuente, colocarle también un espaciado mayor entre líneas, después le vamos a asignar un ancho de la letra de 500 para que se vea como negrita y un padding de cero para que no tenga ningún espaciado interno.
h3{
font-size: 175%;
line-height: 155%;
font-weight: 500;
text-align: center;
padding: 0;
}
A continuación vamos a aplicar los estilos de la sección más importante para decorar columnas en CSS, el cual va a ser que le vamos a asignar un ancho de un 31% de la pantalla, esto debido a que sólo vamos a dividir la pantalla en tres partes y muy importante debemos de colocar un «float: left», para que se coloque una columna después de la otra de izquierda derecha, también se le va a colocar un padding de 10 pixeles para que tenga un espaciado entre cada columna y vamos a centrar todo el contenido para que se vea mejor.
.one-third{
width: 31.5%;
float: left;
padding: 10px;
text-align: center;
}
Para terminar de decorar columnas en CSS, se le van a aplicar unos estilos extra a los iconos que vamos a utilizar, como lo son, cambiarle el color del fondo, cambiarle el tamaño, alinearnos centralmente, también cambiar el color del icono y algunos mas que se presentan a continuación.
.icon-wrap{
margin: 0 auto;
width: 120px;
height: 120px;
background-color: #6991a0;
border-radius: 125px;
text-align: center;
margin-top: 4%;
}
.icon-wrap i{
text-align: center;
color: #ffff;
font-size: 450%;
padding: 20%;
}
Como resultado final de decorar columnas en CSS, vamos a tener una página como la que se presenta continuación, claro que tú puedes modificar cada uno de estos estilos y colocar tu propia información para que se vea diferente.
