Personalizado web. Casi eres experto en CSS

Dónde y cómo utilizar CSS. Aprender CSS desde cero

Durante los artículos orientados a aprender CSS anteriores hemos descubierto qué es CSS, para qué sirve y cómo se usa. Si te los has perdido aquí te dejo los enlaces para que puedes empezar a aprender CSS desde cero a tu ritmo.

  1. Primer tutorial donde comenzamos a aprender CSS por lo más básico.
  2. Segundo tutorial donde aprendimos dónde y cómo se usa CSS.
  3. Tercer tutorial donde estudiamos los selectores CSS.

En esa cuarta parte del manual terminaremos de aprender CSS desde cero, con la finalidad de poder personalizar una página web, y acabaremos el curso haciendo algunas animaciones sencillas.

¿Qué nos falta para terminar de aprender CSS?

En artículos anteriores hemos comenzado a aprender CSS desde cero, hemos creado reglas y usado selectores. Hemos aprendido a incrustar CSS en línea, a enlazarlo desde un archivo externo y realizado algunas prácticas, pero ¿no notas que te falta algo? La respuesta es si.

Te falta conocer la lista de propiedades CSS que permiten manipular elementos HTML. Es posible que no lo hayas pensado porque te he ido guiando por los ejemplos, pero existen muchas más propiedades CSS que podemos usar durante el diseño de una página web.

Aprender CSS desde cero con la lista de propiedades CSS

Aunque te recomiendo que dejes su lectura de momento, puedes descargar el archivo con la lista de propiedades CSS desde aquí en formato PDF.

Propiedades CSS para HTML

Ahora que ya sabemos cómo aplicar estilo de diferentes formas, es importante aprender qué propiedades CSS básicas pueden modificar a un elemento HTML.

Desde dentro y hacia afuera las propiedades CSS más comunes son las siguientes:

  • Padding: Es el espacio de relleno que separa al elemento HTML de su borde.
  • Border: Que enmarca al elemento.
  • Margin: Indica el margen entre este elemento y el siguiente (hacia cualquiera de sus lados).

Propiedades CSS básicas. Modelo de caja

El elemento HTML puede ser un texto, una imagen, un enlace…

Podemos afectar a los elementos con las propiedades de forma general (para los 4 lados), o de forma individual para cada uno de los lados asignando medidas diferentes. Incluso disponemos de un atajo.

  • padding:15px; Afectará a los 4 lados del elemento.
  • padding-left:15px; Solo afectara a la izquierda del elemento.
  • padding:15px 3px 15px 5px; Separando las medidas con un espacio en blanco indica una medida para cada lado. El orden sigue el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda.
  • padding:15px 10px; Atajo que indica que se asignen 15px arriba y abajo y 10px para derecha e izquierda.

Del mismo modo que tratamos el padding podemos implementar el margin y el border.

Como hacemos siempre vamos a aprender CSS desde cero practicando lo que acabamos de ver. Te hace falta utilizar los mismos archivos HTML y CSS de anteriores tutoriales. Si has estado trabajando con ellos y quieres descargarlos de nuevo en su estado original puedes descargar desde aquí el archivo HTML y desde aquí el archivo CSS.

Ejercicio: párrafo con el mismo padding en todos los lados

Puesto que el padding no se visualiza necesitamos poner color de fondo a nuestro elemento, que por tradición va a ser un párrafo.

En nuestro archivo CSS externo creamos una regla para aplicar color de fondo y padding al párrafo:

p{
background: #2E9AFE;
padding: 15px;}

Y en el archivo HTML escribimos un párrafo y como ya sabemos también añadimos color al texto en línea.

<p style="color:white;">Párrafo con color de fondo y padding</p>

El resultado será el siguiente:

Párrafo con color de fondo y padding

Recuerda que si no le asignas padding al párrafo te quedará así:

Párrafo con color de fondo sin padding

Te estarás preguntando por qué el fondo azul ocupa todo el ancho y no se ajusta al texto. Muchos elementos HTML llamados de bloque  se muestran ocupando líneas completas . Para que un elemento h1, h2, h3, h4, h5, h6 o párrafo se ajuste al texto deberás aplicarle la propiedad display:inline-block.

Párrafo con color de fondo, padding y display: inline-block

Ejercicio: párrafo con padding diferente a cada lado

Para seguir practicando, al mismo párrafo asígnale a cada lado diferentes valores de padding.

p{
background: #2E9AFE;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 30px;
display: inline-block;
}

O lo que es lo mismo:

p{
background: #2E9AFE;
padding: 25px 15px 20px 30px;
display: inline-block;
}

Párrafo con color de fondo y diferentes medidas de padding

Ejercicio: párrafo con borde

Los bordes por defecto son transparentes y delimitan el relleno (padding) de un elemento. Se les puede asignar grosor, color y tipo. Veamos cómo:

p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 2px solid #FE9A2E;
}

Párrafo con fondo, padding y borde

Ejercicio: párrafo con estilo de borde personalizado

Además de el color y el borde podemos decidir el tipo que queremos. En el ejemplo anterior hemos aplicado al borde un estilo solid, y ahora vamos a aplicar otros estilos.

p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 5px dashed #FE9A2E;
}

Párrafo con fondo, padding y borde

Sigue practicando y dale otros estilos al borde. Puedes descubrirlos tú mismo asignando los valores double, insetoutset y dotted.

Por ejemplo:

p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 5px outset #FE9A2E;
}

Párrafo con fondo, padding y borde outset

Ejercicio: párrafo con borde a solo uno de los lados

Como en el caso del margin y el padding, podemos asignar borde solo a uno de los lados por ejemplo para destacar un texto.

p{
background: #fcfcfc;
padding:15px;
display: inline-block;
border-left: 5px solid #FE9A2E;
font-weight: bold;
}

Párrafo con borde a uno de los lados

Practica con el resto de los lados. Cambia el color del background, del borde y del texto. No olvides que hay que practicar mucho para aprender CSS.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Comentado de una regla CSS

Si en algún momento del desarrollo web queremos desconectar temporalmente una regla o parte de ella, en vez de borrarla usaremos los comentarios que vienen definidos con /* */.

Vamos a comentar la regla del ejercicio anterior haciendo que el elemento <p> no se vea afectado por ninguna regla.

/*
p{
background: #fcfcfc;
padding:15px;
display: inline-block;
border-left: 5px solid #FE9A2E;
font-weight: bold;
}
*/

También puedes ocultar una o varias de las sentencias. Te hubiera venido muy bien en el ejercicio anterior para ir conectando y desconectando los diferentes tipos de bordes:

p{
background: #fcfcfc;
padding:15px;
display: inline-block;
/* border-left: 5px solid #FE9A2E; */
/* border-left: 5px double #FE9A2E; */
/* border-left: 5px inset #FE9A2E; */
/* border-left: 5px outset #FE9A2E; */
border-left: 5px dotted #FE9A2E;
font-weight: bold;
}

Haz la prueba de comentar reglas y sentencias tú mismo en el archivo CSS externo.

La sentencia !important

Nos encontraremos situaciones en que por diversas causas una regla no surta efecto. Bien porque hayamos asignado estilo con un selector que priorice sobre la actual, o porque estemos manipulando código en que hayan usado la sentencia !important para evitar un cambio sobre una propiedad CSS. En estos casos usaremos !important.

Cuidado no abuses, porque la sentencia !important solo se anula con otra sentencia !important.

Cómo usar !important al aprender CSS como un experto

Ejercicio: ¿cuándo y cómo usar !important?

Si estamos modificando código ya programado, por ejemplo en una web realizada con plantilla, los programadores quizá hayan decidido que algún elemento se muestre de una forma especial mediante su selección con selectores anidados.

En el ejemplo, el autor a decidido que todos los elementos <span> contenidos en un <p> que estén dentro de un <div> de clase general se muestren de color rojo:

.general p span{
color: red;
}

Para este código HTML:

<div class="general">
<p>Cum sociis natoque penatibus et magnis <span>dis parturient montes</span>, nascetur ridiculus mus.</p>
<p>Nulla consequat massa quis enim. <span>Donec pede justo</span>, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<div>

Por mucho que nosotros añadamos una nueva regla posteriormente, los <span> no se verán afectados y seguirán siendo de color rojo.

.general p span{
color: red;
}
span{
color: green;
}

Compruébalo ejecutando tu archivo en el navegador.

Para que la regla inicial en la que se ha utilizado un selector con elementos anidados sea sobrescrita, deberemos utilizar !important.

.general p span{
color: red;
}
span{
color: green !important;
}

Aplica esta sentencia y vuelve a ejecutar tu archivo HTML.

Aquí la solución sería tan sencilla como eliminar la primera regla, pero puede ocurrir que las reglas estén en diferentes archivos y que no sepas desde cuál se está enviando la orden. En vez de estar navegando por los archivos CSS de tu web en busca de la dichosa regla, esta sería la solución.

Ejercicio: sobrescribir una sentencia !important

En este caso vamos a imaginar que en el archivo CSS externo hemos decidido que los párrafos de nuestro sitio web se muestren siempre en color negro, haciendo un uso inadecuado de la sentencia !important, pero para una página en particular queremos que sean gris.

Pega en tu archivo externo esta regla:

p{
color: black!important;
}

Esto hará que por mucho que asignemos otros colores a los párrafos siempre se muestren negros. Para anular al primero, tendremos que añadir un segundo !important a la regla posterior.

Haz una copia de tu archivo HTML y cámbiale el nombre para tener dos archivos. Los dos documentos estarán enlazados con el archivo CSS externo que tienen la sentencia !important que has pegado hace un momento.

Pega en el HEAD de los dos la siguiente regla:

p{
color: silver;
}

Ahora añade la sentencia !important a uno de los archivos HTML. Al que quieras que sea de color gris.

p{
color: silver!important;
}

Los párrafos serán de color gris solo en esa página y no en la otra.

Imagen banner diseño web valencia

¿Hacemos juntos tu

Página web?

Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.

Solicitar un Presupuesto!

Selector HOVER

No podemos aprender CSS sin conocer los efectos que genera el selector hover ¿Te has fijado que al ir a clicar sobre un botón suele cambiar de color? Recurriendo al efecto hover podrás crear sencillas animaciones que cambian temporalmente una regla CSS por otra.

Cómo usar hover. Aprender a programar CSS

Un enlace que por defecto se muestra en azul, en el ejemplo vamos a hacer que se muestre verde.

a{
color: green;
}
<a href="http://undominio.com/url-a-la-que-apunta-el-enlace">Texto del enlace</a>

la regla para que cambie de color al situar el cursos encima será:

a:hover{
color: red;
}

Texto en color verde que será rojo si te pones encima

En el archivo CSS tendrás que añadir las dos reglas, una para su comportamiento normal y otra para su comportamiento con hover, que siempre irá en segundo lugar.

a{
color: green;
}
a:hover{
color: red;
}

El selector hover puede afectar a cualquier elemento HTML cambiando su estilo de forma temporal, siendo capaz de crear animaciones más complejas con la propiedad transition.

Como el objetivo para estudiar y aprender CSS es practicar lo aprendido y aplicarlo a nuestra web, esta es la sección del tutorial que más te va a gustar. Es la parte donde aplicando lo aprendido vas a ver los resultados de tanto esfuerzo.

Ejercicio: crea tu primer botón usando propiedades CSS

Vamos a crear nuestro primer botón aplicando técnicas que hemos aprendido durante el manual.

Como sabes nos hacen falta dos reglas, una para el enlace estándar y otra para el enlace con selector hover. El resultado que queremos es este.

BOTÓN QUE CAMBIA DE COLOR

Las reglas que debes aplicar desde el HEAD o tu documento CSS externo son:

#ejemploHover1{
padding: 15px 20px;
display: inline-block;
background: #91b4c0;
color: white;
border-radius: 6px;
}
#ejemploHover1:hover{
background: #66cdaa;
}

El código HTML para el botón será un enlace:

<a id="ejemploHover1" href="http://undominio.com">BOTÓN QUE CAMBIA DE COLOR</a>

Ahora por tu cuenta haz que cambie también el color del texto, añadiendo una nueva sentencia al selector. Después crea otros botones con diferente id y prueba con otros estilos.

Ejercicio: crea tu primer botón animado

Es el momento de ir un poco más allá y hacer una animación suave en el botón. Pega este código en tu archivo.

#ejemploHover2{
padding: 15px 20px;
display: inline-block;
background: #ff0081;
color: white;
-webkit-transition: background 1s;/* PARA VERSIONES 3.1 A 6.0 DE SAFARI */
transition: background 1s;
}
#ejemploHover2:hover{
background: #524d9c;
}

El HTML del botón:

<a id="ejemploHover2" href="http://undominio.com">BOTÓN QUE CAMBIA DE COLOR</a>

BOTÓN QUE CAMBIA DE COLOR

En el caso de que quieras que la transición afecte también al texto…

#ejemploHover3{
padding: 15px 20px;
display: inline-block;
background: #464646;
color: white;
-webkit-transition: background 0.8s, color 0.8s;
transition: background 0.8s, color 0.8s;
}
#ejemploHover3:hover{
background: silver;
color: #464646;
}
<a id="ejemploHover3" href="http://undominio.com">BOTÓN QUE CAMBIA DE COLOR</a>

BOTÓN QUE CAMBIA DE COLOR

Ejemplos de elementos con estilo CSS

Ahora es cuando debes echar un vistazo al archivo de ayuda con las propiedades CSS que has descargado al principio. Vas a descubrir muchas propiedades CSS que podrás utilizar para la personalización de una página web.

Como orientación vamos a ver algunos ejemplos con código incluido que te serán de ayuda y seguro incluirás en tu web.

¿Cómo darle sombra al texto de un botón?

a{
padding: 15px 20px;
display: inline-block;
background: #91b4c0;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px #464646;
}

BOTÓN CON SOMBRA EN TEXTO

¿Cómo hacer un texto con sombra?

p{
color: #e54444;
font-size: 30px;
font-weight: bold;
text-shadow: 2px 2px 1px #464646;
}

Este texto tiene sombra

¿Cómo hacer un contenedor con sombra externa?

p{
background: #3cb0fd;
-webkit-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.40);
-moz-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.40);
box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.40);
}

Este párrafo tiene una sombra en su conedor

Observa que algunas veces hay que aplicar estilos adaptados a los diferentes navegadores. No todos entenderán este tipo de sentencias CSS genéricas.

¿Cómo añadir una línea a un texto?

p{
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}

Este párrafo está remarcado con una línea

De la misma forma que la añadimos podemos quitar la línea que viene por defecto en los enlaces con text-decoration:none;.

¿Cómo hacer una caja con esquinas redondeadas diferentes?

p{
background: #e0c72d;
color:white;
-webkit-border-radius: 60px 4px 40px 10px;
border-radius: 60px 4px 40px 10px;
}

Este párrafo tiene diferentes esquinas

¿Cómo cambiar el tamaño de un elemento al poner encima el cursor?

div{
width: 150px;
height: 93px;
background: #3cb0fd;
-webkit-transition: width 1s;
transition: width 1s;}
div: hover{
width: 100%;
}
.

¿Cómo hacer que un elemento gire al poner el cursor encima?

div{
width: 93px;
height: 93px;
background: #b0fd3c;
transition: transform 2s;
}
div:hover{
transform: rotate(1080deg);
}
.

Estudia para aprender más CSS

Durante estos cuatro tutoriales te he dado herramientas suficientes como para que puedas investigar por tu cuenta. Hemos aprendido qué es CSS, dónde se usa CSS y cómo se utiliza CSS, además de haber realizado bastantes prácticas orientadas a aprender CSS desde cero. Hemos estudiado las clases, los id, selectores, propiedades…, ya tienes la base para seguir.

Te queda mucho camino por delante para aprender CSS de verdad, pero ahora ya sabes cómo buscar lo que necesitas. Practica las propiedades CSS con tu web añadiendo estilos a su elementos y dale la personalización que hará que tu página sea diferente.

En el caso de que tu web sea un WordPress este otro tutorial donde aprender HTML puede ayudarte, ya que aporta más información sobre este código en esa plataforma.

Si con toda esta información aún necesitas algún otro consejo sobre programación CSS, puedes recurrir al formulario de comentarios.

Ir al anterior tutorial de CSS

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

¿Quieres ver mi biografía?

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Lo hacemos?

Siguiente
Anterior

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.