La guía CSS para personalizar una página web. CSS desde cero

La guía básica CSS para personalizar los elementos de tu web

Ernesto BarrachinaDesarrollo web, Diseño webDeja tu comentario

La guía CSS para personalizar una página web. CSS desde cero
4.8 (96.92%) 13 votos

La guía básica CSS es un tutorial en 4 partes que te ayudará a comprender las posibilidades de CSS y a sacarle todo el rendimiento, modificando elementos HTML de cualquier página web a tu antojo.

¿Tienes una web o blog, quieres personalizar el aspecto de tus artículos y no sabes cómo?

😉 ¡Has llegado al sitio correcto!

Con la guía CSS aprenderás a personalizar tu web de forma que podrás decidir el tamaño de los textos, su color, sus márgenes o modificar el aspecto y comportamiento de contenedores o botones.

➡ En definitiva vas a poder crear tu diseño web personalizado 😎

Introducción a la guía básica CSS

Sin necesidad de profundizar ampliamente, este tutorial CSS para todos los públicos facilitará tu incursión en el código y te proporcionará las herramientas con las que personalizar tu web o blog.

Digamos que tu plataforma elegida es WordPress.

Si solo te quedas en su editor visual dependerás de los estilos asignados por el tema principal y no podrás dar tu toque personal. 😳

El recorrido que haremos por esta guía básica CSS te ayudará a aplicar tu propio estilo a titulares, párrafos, botones, etc.

Cómo personalizar una web gracias a la guía básica CSS

¿Qué necesito para seguir la guía CSS?

Como CSS modifica las características de los elementos HTML, para seguir esta guía lo primero que necesitas es un archivo HTML creado por ti, o disponer de una web en WordPress u otro CMS donde subir el archivo CSS.

Si no dispones de ningún archivo HTML para hacer las prácticas de este apartado de la guía CSS, puedes descargar este documento HTML y ejecutarlo como una web.

Simplemente hay que clicar encima de su icono para abrirlo en el navegador.

Para seguir la guía CSS debes trabajar con un archivo HTML abierto en el navegador y ver qué se ha modificado

Para la creación y edición de documentos CSS y HTML yo utilio el editor de código gratuito Notepad++ del que tienes un completo manual de instalación.

Además para siguientes capítulos, solo en el caso de hacer los ejercicios con WordPress u otro CMS deberás seguir este tutorial para descargar e instalar un programa cliente FTP.

Este programa, proporciona acceso rápido al hosting para la manipulación o descarga de archivos. Pero no hace falta en este capítulo.

El acceso por FTP te permitirá acceder a las carpetas durante los ejercicios de la guía básica CSS

Por otro lado, es imprescindible que tengas ciertas nociones de lenguaje HTML. Aunque sea pocas.

Si usas un gestor de contenidos, en este capítulo puedes manipular CSS directamente desde el editor de WordPress, PrestaShop o el que estés utilizando.

¿Qué es CSS y para qué sirve?

El nombre viene del inglés Cascading Style Sheets, significa Hojas de Estilo en Cascada.

La función del código CSS es cambiar el aspecto que tienen por defecto los elementos HTML que forman parte de una web.

😥 Que la verdad es de lo más horroroso porque no tienen nada de estilo.

Los estilos CSS definen la apariencia de los elementos HTML a la hora de mostrarse en el navegador.

Un único cambio en la hoja de estilos puede modificar multitud de elementos de una página web.

Básicamente CSS le dice a HTML con qué aspecto debe mostrarse.

Para que te hagas una idea de lo que serían las páginas web sin CSS he hecho una captura de pantalla de esta web con el CSS desconectado.

Si desconectamos el estilo CSS del artículo guía CSS tendrá un aspecto muy poco agradable y poca usabilidad web

No me negarás que así la cosa es muy poco atractiva. Por no hablar de la usabilidad de la web.

:mrgreen: Pero una vez apliquemos el estilo, CSS colocará todo en su sitio y le dará el aspecto deseado.

Bien, ahora que ya te he aclarado (o eso espero) qué es CSS y para qué sirve, comentarte que tras la lectura de esta guía básica CSS serás capaz de “pintar los elementos HTML de una web por ti mismo”, como si de una obra de arte se tratara.

Eso no quita que para ciertas tareas tengas que ponerte en manos de un especialista en desarrollo web, por lo menos hasta que le pilles bien el hilo. Sobre todo si es un proyecto web profesional.

La guía básica CSS está basada en las prácticas

Siento decírtelo pero la forma más sencilla de familiarizarse con el código CSS es practicando. Así que antes de seguir leyendo el tutorial te recomiendo que realicemos juntos algunos ejercicios.

Tan solo necesitas el archivo HTML, que presupongo has descargado al inicio del post, y Notepad++ para editar el código. No quieras utilizar Word u otro programa similar porque la cosa no te funcionará.

También puedes practicar simplemente editando un post de WordPress desde el editor de código, o en aquel gestor de contenidos (CMS) que prefieras.

Sin más demora arrancamos con el tutorial 😉

Añadir CSS en línea

Aunque hay otras formas, la manera de insertar el código en los ejemplos va a ser con CSS en línea dentro de las propias etiquetas HTML, que en todos los casos va a ser un párrafo representado con la etiqueta <p> </p>.

Para añadir la regla dentro de la etiqueta usaremos el atributo style=””.

Ejemplo de atributo style con propiedad y valor en manual CSS

Abre tu archivo y escribe el código que hay a continuación, o puedes copiarlo y pegarlo en el archivo.

<p>Párrafo de ejemplo para los ejercicios</p>

El archivo HTML con el nuevo párrafo al que aplicaremos estilos CSS te quedará así:

Párrafo para aprender con la guía básica CSS

Para asignar el estilo CSS dentro del párrafo solo tendremos que añadir una propiedad y un valor. En los ejemplos tienes las propiedades y valores, seguidos del código y el resultado.

Ejercicio 1: Cambiar el color de un texto con CSS

Los colores en CSS pueden asignarse con varios formatos:

  • Nombre HTML del color: black, white, red, orange…
  • Hexadecimal: #FFFFFF;
  • RGB: rgb(1,223,58).
  • RGBA: rgba(1,223,58,0.6), donde la última cifra corresponde al grado de transparencia del color y que acepta cifras entre 0 para transparente y 1 para opaco.

Vamos a intentar acostumbrarnos al hexadecimal. En la página www.color-hex.com tienes algunos ejemplos de colores.

  • Propiedad a modificar: color
  • Valor de la propiedad: #7466ff;
<p style="color:#7466ff;">Párrafo de ejemplo coloreado para los ejercicios</p>

Insertar CSS en línea con el tutorial de la guía CSS

Para ejecutar el código en el navegador y verlo como una página web, en la parte superior del editor Notepad++ verás un menú con la opción Ejecutar. Pulsa y selecciona tu navegador favorito.

Ejecutar HTML para ver los resultados del código CSS

El resultado que tendrá haber aplicado el estilo será el siguiente.

Párrafo de ejemplo coloreado para los ejercicios

Antes de seguir con la guía CSS practica con el resto de métodos para implementar los colores en distintos párrafos.

Ejercicio 2: Alinear un texto al centro

Para el segundo ejercicio no hace falta que añada imágenes de apoyo puesto que ya has visto donde debes escribir el código y cómo ejecutarlo.

  • Propiedad a modificar: text-align
  • Valor de la propiedad: center
<p style="text-align:center">Este párrafo de ejemplo está centrado</p>

Este párrafo de ejemplo está centrado

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.

Ejercicio 3: Background o color de fondo en un texto

  • Propiedades a modificar: background | color
  • Valores de las propiedades: #000000; | #FFFFFF;
<p style="background:#000000; color:#ffffff;">Este párrafo es blanco y tiene el fondo negro</p>

Este párrafo es blanco y tiene el fondo negro

Ejercicio 4: Añadir padding (relleno) a un texto con color de fondo

Como verás el ejemplo de arriba queda un poco feo. La solución es añadir un poco de relleno entre las letras y el límite coloreado que es su padding.

  • Propiedades a modificar: background | color | padding
  • Valores de las propiedades: #99CCCC; | #FFFFFF; | 15px
<p style="background:#99CCCC; color:#FFFFFF; padding:15px;">Este párrafo tiene fondo, color y relleno de 15px</p>

Este párrafo tiene fondo, color y relleno de 15px

Ejercicio 5: Dar estilo de botón a un párrafo

Es el momento de atreverte a darle al párrafo el aspecto de un botón.

  • Propiedades a modificar: background | color | padding | display | border-radius
  • Valores de las propiedades: #3bcdfe; | #FFFFFF; | 15px | inline-block | 6px
<p style="background:#3bcdfe; color:#FFFFFF; padding:15px; display:inline-block; border-radius:6px;">TEXTO DEL BOTÓN</p>

TEXTO DEL BOTÓN

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!

Introducción a las propiedades CSS

En los ejemplos anteriores de la guía CSS hemos modificado el elemento párrafo. De igual forma que hemos hecho con este podemos aplicar estilo a otro tipo de elementos HTML con las propiedades CSS.

A continuación en el modelo puedes ver las cajas que genera CSS alrededor del elemento. Desde dentro hacia afuera:

  1. Elemento HTML con ancho y alto (width, height)
  2. Relleno (padding o espacio alrededor del elemento)
  3. Borde (border línea que delimita al elemento)
  4. Margen (margin o espacio que lo separa del siguiente elemento)

Modelo de caja. Propiedades a modificar con la guía básica CSS

Existen muchas propiedades CSS que pueden modificar a los elementos HTML, pero por el momento no nos hace falta conocerlas todas. En los próximos ejercicios las iremos descubriendo, y en el último capítulo de la guía básica CSS dispondrás de un archivo de descarga muy completo donde las tendrás clasificadas.

Continúa aprendiendo con la Guía básica CSS

Ya has visto lo fácil que es añadir estilo en línea. Si quieres ampliar tus conocimientos, leyendo los próximos artículos de la guía básica CSS aprenderás diferentes formas de implementar CSS en tus archivos.

Deseo haber despertado tu interés por CSS y que continúes personalizando tu web con la ayuda de este tutorial CSS desde cero. Espero verte en la siguiente parte del manual.

Ver el 2º tutorial de la guía CSS

Ya sabes que si tienes alguna duda puedes recurrir al formulario de comentarios un poco más abajo.

Mucha suerte en la personalización de tu web 😉

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.