¬°HOLA! ¬ŅQuieres un tutorial b√°sico de HTML y CSS para modificar algunos elementos de tu p√°gina web? Entonces has llegado al sitio correcto, en este post resumo lo necesario para que te sientas todo un programador web y modifiques parte del c√≥digo CSS y HTML de tu web.

En este art√≠culo no voy a ense√Īarte a ser un experto en c√≥digo web, sino que voy explicarte lo m√°s b√°sico para modificar aspectos de tu web:

  • Hacer desaparecer cualquier elemento de la p√°gina web
  • Cambiar colores, tipograf√≠a y tama√Īos al texto de la web
  • Cambiar m√°rgenes o espacios entre elementos
  • Cambiar tama√Īo de botones o su color y posici√≥n
  • Como funcionan los scripts de Banners publicitarios y como insertarlos

Desde la aparici√≥n de los CMS (Content Management System) como por ejemplo WordPress han permitido que m√°s personas sin conocimientos de inform√°tica y programaci√≥n pueda crear una p√°gina web. Estos gestores de contenido nos ofrecen muchas posibilidades, pero en algunas ocasiones queremos realizar algo muy concreto en nuestro tema o plantilla. En muchas plantillas gratuitas es pr√°cticamente necesario poder modificar los elementos y en plantillas de pago, aunque incorporen plugins como ‚ÄúVisual Composer‚ÄĚ, ‚ÄúDivi Builder‚ÄĚ, o ‚ÄúElementor‚ÄĚ que permiten cambiar visualmente y ordenar los elementos de tu web, estos plugin no permiten modificar la totalidad de la p√°gina, por eso necesitaras algunas nociones de HTML y CSS.

¬ŅQu√© es CSS y para qu√© sirve?

CSS es un lenguaje que funciona junto a HTML y que permite modificar el estilo de una web (colores, tama√Īos, tipograf√≠as, m√°rgenes, etc…)

Aprende lo b√°sico sobre CSS y HTML: Aprende a modificar tu web

Esta regla CSS le indica a la web que las etiquetas H2,H3,h4,H5 y H6 deben tener un color en concreto, 10 pixeles de padding y que se alinee al centro.

¬ŅQu√© es HTML y para qu√© sirve?

Es el lenguaje de programación que crea la estructura básica de una web (Header, contenido, footer, sidebar, etc…)

A mi siempre me gusta comparar HTML y CSS como si fueran un cuerpo humano: El HTML son los órganos y huesos y el CSS es la piel, color de ojos o pelo, altura, etc…

Conceptos b√°sicos CSS

Tienes que tener muy claro un concepto básico de este lenguaje, debes saber lo que es un selector y los dos tipos que podemos encontrar. Un selector es el nombre que tiene un determinado elemento en el código de la web.

  • Identificador: Nombre de un elemento que solo aparece una vez y no se repite en toda la web. En la hoja de CSS se define con almohadilla (#) y en HTML se escribe de esta manera (id= ‚ÄúNombre identificador‚ÄĚ)
  • Clase: Al contrario que el identificador, la clase si se repite a lo largo de toda la web. En la hoja de CSS se define con un punto (.) y en HTML se escribe de esta manera (id= ‚Äúnombre clase‚ÄĚ)

¬ŅCu√°les son las propiedades m√°s usadas?

Primero, una propiedad es la modificación que realizas en la hoja de estilo CSS a un elemento.

  • Background-color: color de fondo
  • Border: borde del elemento
  • Color: color del texto
  • Width: anchura del elemento
  • Padding: Margen interior del elemento

Estos son alguno de los más usados, pero hay muchísimos más. Esta es la web que yo normalmente consulto cuando necesito recordar W3schools pero hay más páginas por ahí que podéis consultar.

Conceptos b√°sicos de HTML

Al igual que con el CSS al HTML tambi√©n podemos aplicarles propiedades con etiquetas HTML. Estas se definen entre ‚Äú<¬†etiqueta >‚ÄĚ, estas etiquetas representan parte de la estructura y contenido del sitio.

En una web podemos tener la etiqueta <head> o etiqueta <body> (es donde se encuentra el contenido visual de una p√°gina web). Siempre tienes que tener en cuenta que las etiquetas deben tener una apertura y un cierra, por ejemplo, la etiqueta div se abre como <div> y se cierra como </div>.

¬ŅC√≥mo aplicar las propiedades al HTML?

En la hoja de estilos podr√°s aplicar las propiedades a elementos concretos. Por ejemplo, si quieres que todos los p√°rrafos de tu web est√©n escritos con un tama√Īo o tipograf√≠a concretos deber√°s ponerlo en la hoja de estilo de esta manera:

P { Font-family: ‚ÄėLato‚Äô; Font-size: 16px; }

¬ŅD√≥nde a√Īadir el c√≥digo CSS para modificar tu web?

Mediante la hoja de estilos

Todas las webs tienen una hoja de estilos, por ejemplo, en WordPress el archivo es ‚Äústyle.css‚ÄĚ, mientras que en Prestashop se llama ‚Äúglobal.css‚ÄĚ.

Este archivo hay varias maneras de modificarlo seg√ļn el CMS que uses, en este caso te explicare 2 maneras para modificar el CSS de tu web:

  • Mediante el archivo que se encuentra en el FTP

Para ello deber√°s tener acceso al administrador de archivos donde se encuentra el archivo a modificar.

[En wordpress normalmente se encuentra en la ruta

‚Äúwp-content/themes/nombretema/css/style.css‚ÄĚ]

Para tocar estos archivos te aconsejo que descargues alg√ļn editor de texto especializado. Yo por ejemplo uso visual estudio

  • Mediante el Editor de WordPress

La otra manera que te aconsejo es mediante el panel de wordpress. Si vas a la barra lateral de tu dashboard podr√°s encontrar ‚ÄúApariencia‚ÄĚ y dentro encontraras ‚ÄúEditor‚ÄĚ, si clickamos veremos las diferentes carpetas. Buscamos la hoja de estilos y modificamos en ese archivo

Aprende lo b√°sico sobre CSS y HTML: Aprende a modificar tu web

 

TIP: Yo normalmente para no ser desordenado escribo las modificaciones al final de la hoja y comento para saber que modificación es:

Aprende lo b√°sico sobre CSS y HTML: Aprende a modificar tu web

Para ello lo comentamos de esta manera /* Mi css*/ y lo que haya dentro no se incluir√° ni afectara al archivo, es una manera de ordenar tus modificaciones.

Y eso es todo por hoy, espero que os haya servido para conocer un poco m√°s sobre el CSS y HTML, al principio parece un mundo, pero cuando le coges el truco es bastante sencillo. Si quieres saber m√°s sobre otros aspectos de Marketing digital puedes visitar las entradas de mi blog o ponerte en contacto conmigo.

Aprende lo b√°sico sobre CSS y HTML: Aprende a modificar tu web
Soy un consultor de posicionamiento web especializado en el SEO On Page y UX (Experiencia de usuario). Ferviente defensor de que las páginas web no solo tienen que ser SEOptimizadas, sino también claras, atractivas e intuitivas.