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

¿Tienes una web o blog, quieres personalizar el aspecto de tus artículos y no sabes cómo? 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 a tu antojo los elementos HTML de tu web o blog.

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 a modificar el aspecto y comportamiento de contenedores o botones. En definitiva vas a poder hacer tu propio diseño web.

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 con 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 usarlo y 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 el documento HTML y ejecutarlo como una web simplemente clicando encima para abrirlo en el navegador.

Para la creación y edición de los documentos HTML y CSS se utiliza un editor de código gratuito como Notepad++ del que tienes un 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 descargar e instalar un cliente FTP, del que también tienes un tutorial. Este programa cliente, nos permitirá un acceso rápido para la manipulación o descarga de los archivos del hosting. Pero no hace falta en este capítulo. Por otro lado va a ser necesario que tengas ciertas nociones de lenguaje HTML.

Si usas un CMS en este capítulo puedes manipular CSS directamente desde su editor.

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

¿Qué es CSS?

El nombre viene del inglés Cascading Style Sheets, significa Hojas de Estilo en Cascada y su función es cambiar el aspecto por defecto de los elementos HTML que forman una web.

Los estilos CSS definen la apariencia de los elementos HTML a la hora de mostrarse en el navegador. Un solo cambio en la hoja de estilos puede modificar multitud de elementos de una web. Básicamente CSS le dice a HTML con qué aspecto debe mostrar la página.

Sin utilizar CSS los elementos de una web se disponen unos debajo de otros (la imagen de abajo corresponde a este mismo artículo con el CSS anulado). De tal forma sería muy poco atractivo e incluso incómodo navegar por ella, pero una vez apliquemos el estilo CSS colocará todo en su sitio y le dará el aspecto deseado.

Si desconectamos el estilo CSS del artículo guía CSS tendrá este aspecto

Tras  la lectura de esta guía básica CSS serás capaz de “pintar” los elementos HTML de una web por ti mismo, aunque siempre es recomendable ponerse en manos de un especialista en desarrollo web por lo menos al principio del proyecto.

Añadir CSS: CSS en línea

La forma más sencilla de familiarizarse con el código CSS es practicando. Antes de seguir con el tutorial te recomiendo que hagas unos ejercicios, en los que solo necesitas el archivo HTML que has descargado al inicio del post y el editor de código Notepad++ para editarlo. También puedes editar una entrada de WordPress o en el CMS que más te guste desde su editor de código.

La forma 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 caso 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.