CSS ejemplos. Reglas de Diseño Web. Como usar el CSS.

¿Te gusta el diseño web? Entonces seguro que te viene bien aprender a usar hoja de estilo en cascada o CSS. No uses tanto plugin, hazlo con código CSS.

Acceso rápido al contenido

¿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 de diseño web CSS
Guía PDF de CSS


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

Prueba las plantillas Genesis y vas a notar la rapidez de carga que te ofrecen los mejores temas del mercado para WordPress.


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; }

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

EL ANCHO:

width: 150px; }

.button elementor  { width: 210px; }

Y EL ALTO:

height: 45px; }

.button elementor  a { heigth: 60px; }


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

Consigue un 50% de bonifiación o descuento en Amazon Business. La sección para emprendedores autónomos o Pymes.

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

¿Necesitas ayuda para crear tu web? Llévate gratis las dos mini Guías de Blogging y SEO para crecer con tu blog.

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.

Compártelo:

Facebook
Twitter
Pinterest
LinkedIn
Ver más

Artículos relacionados

Contratar SEO en Cádiz
SEO

Contratar SEO en Cádiz

Que debes saber antes de contratar a un consultor SEO. Ricardo Muñoz es consultor SEO y de Blogging WordPress en Cádiz. ¿Puedo ayudar?

Leer más »