¿Qué es y cómo se usa el lenguaje CSS?
Ya hace tiempo que vengo aprendiendo CSS y tengo que confesarlo, me chifla toquetear y hacer cambios en el diseño. Es para mi algo adictivo. ¿Y tú? ¿eres cómo yo un apasionado de WordPres y el Diseño web? ¿Te gustaría aprender maquetar tú blog con hoja de estilo en cascada o CSS?
Bienvenido a este artículo, donde he recopilado algunas de las reglas más fundamentales, para editar a medida el diseño de tu página web. Aplicando algunas reglas CSS, bien en el editor personalizado, o directo en el código de tu web, puedes conseguir un resultado único.
Por si aun no lo sabes, en el lenguaje del diseño web, la programación CSS es un conjunto de reglas que aplicadas al código Java Script de un sitio web, devuelve los cambios hechos en el aspecto del diseño gracias al motor del randerizado.
Para entenderlo mejor, con CSS haces cambios en el código y el software del buscador (pj. Google), lo procesa para que se vean los colores, los márgenes o las tipografías que has modificado.
Gracias al CSS es posible cambiar y adaptar un diseño y darle las medidas, los colores, márgenes, tipo de letra o tamaño de títulos deseado entre otras muchas más opciones.
Let´s start, (vamos al turrón 🙂 )
Inspector de elemento de Google
El inspector de elemento de Google, es la herramienta que puedes usar para poder editar con CSS y ahorrarte mucho tiempo.
Tan solo tienes que pulsar botón derecho del ratón encima del elemento, en el buscador de Google, y seleccionar Inspeccionar elemento.
Se abrirá un menú donde se encuentra el conjunto de reglas que están dando forma y estilo a ese elemento. Si pulsas en el símbolo +, te va a mostrar la regla que necesitas modificar. Luego solo hay que editarla en el editor personalizado de WordPress.
Te dejo este pequeño vídeo de muestra para que veas como se hace.
Cómo aplicar cambios con CSS en tu WordPress
Puesto que el Gestor de Contenidos o CMS que utilizo a diario es WordPress, puedo ser de ayuda en este caso para que veas de que forma puedes modificar el diseño de un blog y cambiar cualquier detalle con solo unas líneas de código.
Con CSS es posible diseñar a medida todo lo que quieras, y si te apasiona como a mi, puedes llegar pasar varias horas frente a tu ordenador haciendo cambios sin apenas darte cuenta.
Aquí es dónde puedes añadir los cambios en tu WordPress:
10 REGLAS CSS BÁSICAS DE DISEÑO WEB
1. Regla CSS para ajustar los márgenes: PROPIEDAD PADDING
Con padding: auto; el contenido se ajusta a los márgenes del botón, dándole el espacio predeterminado que se ajuste a la pantalla.
.button { padding: auto; }
Usando la clase para todas sus dimensiones a 20 px, de ancho, y alto, y la misma distancia a su izquierda y derecha, puedes centrar el contenido del botón.
.button { padding: 20px 20px 4px 4px; }
Por otro lado puedes usar cada una de estas reglas para darle la distancia deseada al contenido desde cualquier punto.
{ padding-top: -14px; padding-bottom: -5px; padding-right: 3px; padding-left: 3px;
2. Regla CSS para ajustar los márgenes: PROPIEDAD MARGIN
Con margin: auto; el contenido se ajusta al margen de la pantalla por defecto.
.button { margin: auto; }
Usando la clase para todos sus dimensiones a 20 px, de ancho, alto, a su izquierda y derecha, puedes centrar el botón.
.button { margin: 20px 20px 20px 20px; }
Por otro lado puedes usar cada una de estas reglas para darle la distancia deseada desde cualquier punto.
{ margin-top: -14px; margin-bottom: -10px; margin-right: 11px; margin-left: 11px; }
Las mejores 10 Plantillas Genesis Elegant Themes de 2019
3. Regla CSS para eliminar un elemento: PROPIEDAD DISPLAY
Con la propiedad display: block; los elementos se encuentran agrupados en bloques.
.button elementor { display: block; }
Con la propiedad display: inline; los elementos se agrupan ocupando el menor espacio posible en un div.
.button elementor { display: inline; }
Texto en display: inline; texto en display: inline; texto en display: inline;
Si quieres añadir una caja mezclando las propiedades inline y block. Usa esta propiedad:
.button elementor { display: inline-block; background: #222; }
Texto en display: inline-block; texto en : inline-block; texto en display: inline-b;
Display: list-item; es una regla que ordena los elementos seleccionados en una lista como ves a continuación:
.entry.content-text { display: list-item; }
- Elemento de lista nº1
- Elemento de lista nº2
- Elemento de lista nº3
Y por último, otra regla que puedes usar y que es muy recurrente a veces, es el display: none; de este modo puedes ocultar cualquier elemento dentro de tu web y no se mostrará:
.entry.content-text { display: none; }
4. Código CSS para cambiar el tamaño:
PROPIEDADES WIDTH Y HEIGHT
5. Clase CSS para dar más grosor a los elementos: PROPIEDAD WEIGHT
Así cambias el resaltado del texto en cualquier elemento. En este caso le he puesto un nivel 200 por lo que se ve una letra muy fina.
.button elementor a { font-weight: 200; }
Y es este otro botón he puesto una tipografía más gruesa con la clase bold para que se aprecie bien la diferencia al aplicar la regla.
.button elementor a { font-weight: bold; }
ESCALA DE PROFUNDIDAD EN EL GROSOR DE LA TIPOGRAFÍA
100, 200, 300, 400, 500, 600, 700, 800, 900, Bold, Bolder.
Promociones para emprendedores
6. Cambiar color de Fondo o elementos: PROPIEDAD COLOR y BACKGROUND
Regla de primero de CSS y de las más básicas para cambiar el color de los elementos. Tanto color del fondo cómo del contenido.
.button elementor { background: #1265f5; color: #ff0; }
7. Regla para cambiar el fondo o el comportamiento de un elemento al pasar el cursor con el ratón: PROPIEDAD HOVER
Así cambias el color del fondo y del texto al pasar el ratón por encima. En este caso fondo negro y letras blancas.
.button elementor a:hover { background-color: #222; color: #white; }
En este otro he cambiado el resaltado de la tipografía y el tamaño al pasar el puntero del ratón por encima. Lo he puesto más grande y en negrita.
.button elementor entry.content a:hover { font-weight: bold; font-size: 20px; }
8. Clase CSS para ajustar la posición de los elementos: PROPIEDAD POSITION
La propiedad CSS position, puede cambiar el modo en que permanece el elemento. Por ejemplo, el menú de cabecera de este blog, que acompaña al navegar y hacer Scroll, tiene la clase Sticky.
Esta clase hace que el elemento quede fijo en pantalla al navegar, aunque depende de otros ajustes que quede perfecto. Para diseñar un menú de cabecera entero con CSS, hay que aplicar el Sticky a todos y cada uno de los elementos del menú para que quede bien. Esta es una tarea que a mi me costó un poco pillarle el rollo,
En esta clase, las distancias se establecen en base al contenedor dónde se encuentre el elemento, y no del ancho, alto o laterales de la pantalla.
{ position: absolute; } { position: fixed; }
En esta posición, si establecemos márgenes serán a partir del ancho de la página y no del contenedor hacia cualquier extremo.
{ position: relative; }
Posición pegajosa en la pantalla en la que el elemento acompaña al hacer scroll en la pantalla.
{ position: sticky; }
Clase en la que elemento no varía su posición y permanece estática.
{ position: static; }
Blogging y SEO | 2xGUÍAS
9. Ajuste CSS para darle forma al borde de un contenedor:
PROPIEDAD BORDER RADIUS
Con este ajuste CSS cambiamos las dimensiones de los bordes de un contenedor, por ejemplo, un botón. En la siguiente imagen vas a ver cómo queda un botón tras aplicarle estas medidas.
botón normal sin css
.button { border-radius: 5px 30px 35px 50px; }
10. CSS para centrar texto, contenido o items: PROPIEDAD ALIGN
La propiedad align, se encarga de alinear el texto en la zona deseada a lo ancho del margen de pantalla. Mira este ejemplo donde centro un título h2 que se encuentra dentro de una entrada:
.h2 { text-align: left; }
.h2 { text-align: center; }
.h2 { text-align: right; }
Encabezado h2
Encabezado h2
Encabezado h2
Aprender CSS en Diseño Web - Fin del Post
Y eso es todo de momento. Espero que te haya sido útil. Muchos de estos truquitos los aprendí en parte de grandes diseñadores web cómo Bego Romero, que es una máquina haciendo CSS. Aquí puedes ver uno de sus grandes artículos sobre el diseño con Hoja de estilo en cascada o CSS.
Deja tus comentarios si quieres aportar alguna regla más que pueda interesar. Artículo escrito por Ricardo Muñoz – SEO y Blogger desde 2016.
Ricardo Muñoz. Residente en la provincia de Cádiz. Consultor SEO y Diseñador de Sitios Web. Blogger desde el año 2016. Puedo ayudarte a diseñar tu sitio web y a posicionarlo en Internet para conseguir tus objetivos.
