Códigos 

CSS más usados

A continuación te voy a mostrar los códigos CSS más usados en webs
y que tú mismo puedes aplicar en la tuya para que consigas
personalizarla al máximo. Los he clasificado según sirvan para
modificar elementos de texto, elementos gráficos (cajas, fondos,
botones, etc) y otro tipo de elementos.
Para textos

Las propiedades y sus atributos más comunes para modificar la

apariencia de tus textos web son las siguientes:

 font-family: Establece una familia o fuente tipográfica.

 font-style: Estilo normal, cursiva u oblicua. Atributos [ normal |
italic | oblique ]
 font-variant: Convierte las minúsculas en mayúsculas pero en
tamaño menor. Atributos [ normal | small-caps ]
 font-weight: Grosor de la tipografía especificado en medidas de
100 a 900.
 font-size: tamaño o cuerpo de letra especificado en píxeles (px).
 text-indent: cantidad de desplazamiento lateral de la primera
línea del texto, expresado en px.
 text-align: alineación del texto. Atributos [ left | right | center |
justify ]
 text-decoration: aplica efectos de subrayado, tachado,
parpadeo. Atributos [ none | [ underline || overline || line-through
|| blink ] ]
 letter-spacing: espaciado entre caracteres especificado en px.
 text-transform: para transformar los textos a mayúsculas o
minúsculas [ capitalize | uppercase | lowercase | none ].
 line-height: interlineado entre renglones de texto expresado en
px.
 vertical-align: alineación vertical del texto. Atributos [ baseline
| sub | super | top | text-top | middle | bottom | text-bottom |
<porcentaje> | <longitud> ]
Para elementos gráficos de la web

 width: ancho de un elemento o imagen. Puede definirse en

píxeles (px), unidades em (em) y porcentajes (%).
Ej.: #content {width:960px;}
 height: altura de un elemento o imagen. Igual que la anterior.
Ej.: #header {height: 250px;}
 background-color: color de fondo de un elemento. Se expresa
en valor hexadecimal con # y seis caracteres. Ej.: #boton
{background-color: #1CBACC;}
 background-image: imagen de fondo para un elemento.
Ej.: #content {background-image:
url(«https://www.aulacm.com/fondo.jpg);}
 background-repeat: repetición o no de la imagen dentro del
fondo (ideal para crear patterns o fondos con texturas). Se puede
repetir en x (en horizontal) o en y (en vertical).
Ej.: #content {background-repeat: repeat-x;}
 background-position: posición de la imagen dentro del fondo.
Se puede definir al centro, izquierda o derecha. También con
píxeles y porcentajes.
Ej.: #content {background-position: center;}
 border: borde de un elemento o imagen. Tiene 3 parámetros:
tipo de borde (liso, punteado, rayas, etc), grosor (expresado en
píxeles) y color (expresado en valor hexadecimal). También
puede definirse sin borde (none).
Ej.: #boton {border: solid 1px #000000}
 display: modo en que se muestra un elemento o imagen o no
mostrarlo nunca. Tiene diversos valores, los más comunes son:
mostrar elementos en bloque (block),
 z-index: posición de un elemento o imagen en el eje z (para
poner elementos tapando a otros elementos)
Para añadir espacios o márgenes

 margin: margen a partir de un elemento hacia afuera expresado

en px. Suele empujar a otros elementos cercanos
 padding: relleno o espacio interior desde el borde de un
elemento hacia dentro. Ampliar padding suele arrastrar hacia
fuera los bordes y por consiguiente aumenta el tamaño del
elemento
En sendos casos, puedes expresar el valor en píxeles pero también en
porcentajes. Los porcentajes son ideales para definir espacios
proporcionales, de modo que no haya una distancia fija entre
elementos, sino que en función del tamaño de la pantalla o dispositivo,
los elementos se coloquen proporcionalmente.

Esta es la clave para definir tamaños de elementos que sean

responsive (que se adapten automáticamente a todos los dipositivos).
De este modo, una caja con un ancho (width) al 100% siempre
ocupará el 100% de la pantalla, ya sea una pantalla grande o un
smartphone.

Además, tanto el margin como el padding pueden definirse para una

dirección concreta arriba, derecha, abajo o izquierda:

 margin-top: margen hacia arriba

 margin-right: margen hacia la derecha
 margin-bottom: margen hacia abajo
 margin-left: margen hacia la izquierda
 padding-top: relleno desde arriba hacia adentro
 padding-right: relleno desde la derecha hacia adentro
 padding-bottom: relleno desde abajo hacia adentro
 padding-left: relleno desde la izquierda hacia adentro

Nota: Puedes especificar márgenes y rellenos en las cuatro direcciones

sin necesidad de declararlos por separado. Basta con que dentro de la
propiedad general escribas las cuatro direcciones todas seguidas y en
el sentido de las agujas del reloj. Por ejemplo, si quieres poner a un
elemento #boton un margen de 20 píxeles por arriba, 0 por la derecha,
20 por abajo y 5 por la izquierda, puedes escribir lo siguiente:
#boton {

margin: 20px 0 20px 5px;

Códigos CSS para mejorar tu web

De todos los códigos anteriores, voy a destacar los que te pueden
resultar de más utilidad y te voy a mostrar ejemplos concretos de
cómo implementarlos en tu sitio:
 
Cómo hacer desaparecer un elemento de tu web

 display. Con la propiedad display puedes ocultar cualquier

elemento de tu web. Para implementarlo, lo primero es que
obtengas el nombre del selector del elemento en cuestión. Por
ejemplo, si lo que quieres es quitar la fecha de los artículos del
blog, lo primero es ir a cualquiera de tus artículos, ponerte
encima de la fecha, clickar botón derecho e Inspeccionar.

En la zona inferior se despliega el Inspector de Elementos y aparece

marcada la parte de código que sirve para mostrar la fecha. Dentro de
esa línea, hay un class=»date». Eso quiere decir que «date» es la clase
que se aplica a la fecha para darle los estilos de letra, tamaño, color,
etc.

Pero en este caso concreto no queremos modificar estos estilos, sino

directamente eliminar la visualización de la fecha. Para ello, ve a la
zona de CSS Personalizado de la plantilla (o al plugin Simple Custom
CSS) y escribe lo siguiente:
.date {
display: none;

La clase «date» lleva un punto al inicio porque este es el modo de

escribir los nombres de las clases en las hojas CSS. La orden «display:
none;» significa «dejar de mostrar un elemento». Por tanto, en este
caso concreto, estamos ordenando lo siguiente: todos los elementos
que tengan asignada la clase «date» dejarán de mostrarse en la web.

 
Cómo cambiar el tamaño y color de una tipografía concreta de tu web

 font-size, color. ¿Y si en lugar de ocultar la fecha lo que

queremos es simplemente modificar su tamaño de letra y color?

En ese caso, ve al CSS personalizado de la plantilla (o al plugin

Simple Custom CSS) y escribe lo siguiente:
.date {

font-size: 36px !important;

color: #F00 !important;

}
Ahora la fecha se muestra en un cuerpo de letra mayor y en color rojo.

Recuerda, ¿por qué ponemos !important?

Para que las nuevas propiedades definidas «pisen» a las propiedades

que trae la plantilla por defecto, ya que estamos tocando propiedades
que ya vienen predefinidas en la plantilla con unos estilos concretos.

¿Qué es eso de #F00 que hemos puesto en la propiedad color?

Es un color (en este caso rojo) que hemos definido mediante valor
hexadecimal. Este es uno de los modos más habituales de introducir
un color exacto en entorno web. Con la aplicación Paletton puedes
hacer pruebas y obtener valores de color hexadecimal para poner en tu
web.

Aquí tienes un ejemplo de paleta hexadecimal de colores:

Cómo añadir código HTML a tu web
 
En una entrada o página

Puedes añadir códigos HTML dentro de tus entradas y páginas para

conseguir un resultado mucho más personalizado. Normalmente, se
editan las entradas dentro de la pestaña Visual, pero si quieres
editarlas con HTML haz click en la pestaña Texto o HTML.

Si te fijas, en esta captura de pantalla de este mismo post he cargado la

pestaña HTML y se ve el texto en código HTML puro. La palabra
WordPress del primer renglón está entre las etiquetas <strong> y
</strong>, lo que quiere decir que esta palabra toma un estilo negrita
en la parte visual.
 
En un widget de texto

Puedes añadir código puro HTML en tus widgets en Apariencia >

Widgets y arrastrando un widget de tipo Texto. Dentro de este widget
puedes escribir cualquier código HTML y WordPress lo va a
interpretar correctamente para que muestre lo que quieras.

Por ejemplo, si quieres añadir una imagen banner enlazada a una URL
concreta de tu sitio web o externa, y que se vea en una zona de
widgets de tu sitio, dentro de la caja texto que arrastras al área de
widgets correspondiente escribes lo siguiente:
<a href="URL DEL ENLACE" target="_blank">

<img src="URL DE LA IMAGEN">

</a>
Códigos HTML para mejorar tu web
A continuación, te pongo las etiquetas HTML más comunes en una
web y que puedes insertar donde quieras o modificar las ya existentes
mediante código CSS:

 <p></p> Párrafos
 <a href=»»></a> Enlaces
 <b></b> Negritas
 <i></i> Cursivas
 <strong></strong> Negritas más gruesas
 <h1></h1> Encabezado o título 1
 <h2></h2> Encabezado o título 2
 <h3></h3> Encabezado o título 3
 <h4></h4> Encabezado o título 4
 <h5></h5> Encabezado o título 5
 <h6></h6> Encabezado o título 6
 <li></li> Elemento de lista
 <span></span> Selección de texto con un estilo determinado
 <u></u> Texto subrayado
 <em></em> Texto enfatizado
 <small></small> Texto pequeño
 <br /> Salto de línea (etiqueta única, no tiene cierre)
 <img src=»»> Para insertar una imagen. Con el código <img
src=»URL de la imagen»> puedes poner en cualquier zona de
widgets un banner o imagen que quieras. Te aconsejo que antes
 de obtener la URL de la imagen la subas a tu propia Biblioteca
de Medios y de ahí obtengas la URL que después pegas en el
código.
 <form></form> Formulario.
 <table></table> Tabla
 <iframe></iframe> Incrustar elementos de otras webs

Cómo generar código HTML fácilmente

¿Y si no sabes absolutamente nada de HTML pero quieres insertar
códigos a tu web y hacerlo de manera sencilla? Con la
herramienta Quackit puedes crear estilos de texto y estructuras de
maquetación con tablas y generar automáticamente el código para
insertarlo en tu web.

Cómo modificar los estilos CSS

directamente sobre la web
¿Y si te digo que todos los cambios de CSS puedes hacerlos
directamente sobre la web de manera visual y después llevarte ese
código a tu hoja de estilos? Esto puedes hacerlo muy fácilmente con
una extensión para Chrome llamada StyleBot. Esta estupenda
herramienta te permite previsualizar las modificaciones que hagas a
los estilos de la web y copiar todo el código resultante para ponerlo en
tu hoja de estilos.
Para ello, haz click aquí y añádela a tu navegador Chrome. A
continuación, la extensión se coloca en la zona superior derecha de tu
navegador (en un botón donde dice CSS). Ahora, ve a tu web y haz
click en el icono CSS y abre StyleBot. Aquí puedes modificar
cualquier aspecto de la web: colores, tipografías y tamaños, bordes,
etc.

Haz una modificación (en el ejemplo he cambiado a rojo el color de

fondo o background-color de nuestra web) y a continuación pincha
en Edit CSS para obtener el código. Este código lo pegas en tu hoja
de estilos y ¡listo! Ya tienes hecha la modificación, así de fácil.

Recuerda que puedes pegar el código en tu hoja de estilos en un

archivo que suele llamarse styles.css o stylesheet.css, o usar el plugin
Simple Custom CSS si prefieres hacerlo de manera más sencilla y sin
arriesgarte a tocar directamente los archivos de la web.

Importante: Aunque hagas modificaciones mediante StyleBot y veas

tu web con los estilos ya cambiados, hasta que no los pegues en tu
hoja de estilos no se realizarán las modificaciones realmente para que
las puedan ver el resto de usuarios.

Cómo hacer tu web totalmente Responsive

Gracias a un código especial de CSS llamado Media Queries puedes
controlar absolutamente cómo se muestra tu web en cada dispositivo.

Mediante media queries puedes indicar estilos CSS concretos para tu

web en función del ancho de pantalla. Las media queries se ponen
directamente en tu hoja de estilos CSS y se declaran del siguiente
modo:

/* Smartphones (horizontal) ----------- */

@media only screen and (min-width : 321px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}
/* Smartphones (vertical) ----------- */
@media only screen and (max-width : 320px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPads (horizontal) ----------- */

@media only screen and (min-width : 768px) and
(max-width : 1024px) and (orientation : landscape)
{
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPads (vertical) ----------- */

@media only screen and (min-width : 768px) and
(max-width : 1024px) and (orientation : portrait) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}
/**********
iPad 3
**********/
@media only screen and (min-width : 768px) and
(max-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width : 768px) and

(max-width : 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}
/* Ordenadores de escritorio y portátiles
----------- */
@media only screen and (min-width : 1224px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Pantallas grandes ----------- */

@media only screen and (min-width : 1824px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 4 ----------- */
@media only screen and (min-width : 320px) and
(max-width : 480px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width : 320px) and

(max-width : 480px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-
height: 568px) and (orientation : landscape) and (-
webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-

height: 568px) and (orientation : portrait) and (-
webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-
height: 667px) and (orientation : landscape) and (-
webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 375px) and (max-

height: 667px) and (orientation : portrait) and (-
webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-
height: 736px) and (orientation : landscape) and (-
webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 414px) and (max-

height: 736px) and (orientation : portrait) and (-
webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S3 ----------- */

@media only screen and (min-width: 320px) and (max-
height: 640px) and (orientation : landscape) and (-
webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-

height: 640px) and (orientation : portrait) and (-
webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S4 ----------- */

@media only screen and (min-width: 320px) and (max-
height: 640px) and (orientation : landscape) and (-
webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-

height: 640px) and (orientation : portrait) and (-
webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S5 ----------- */

@media only screen and (min-width: 360px) and (max-
height: 640px) and (orientation : landscape) and (-
webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 360px) and (max-

height: 640px) and (orientation : portrait) and (-
webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}