Cómo crear mi propio CSS

Seguro que ya has desarrollado tu web en WordPress pero ahora quieres personalizarla, y necesitas saber más para crear tu propio CSS u hoja de estilos en cascada para WordPress. Algo a tener en cuenta es si queremos aplicar el CSS a todas las páginas de la web o solamente a algunas páginas en concreto. Veamos pues cómo crear mi propio CSS desde cero.

Existen varias formas de modificar el CSS: a través un Child Theme y a través de un plugin o creando nuestro propio plugin.

Primer paso para cómo crear mi propio CSS

Antes de nada tenemos que preparar el HTML, con los estilos que queremos darle. Con eso ya podemos personalizar el tamaño de las fuentes, el color, los bordes, el fondo… También podemos darle órdenes como: quiero que el título principal siempre aparezca en el centro de la página, que sea de una fuente determinada y que sea así de ancho, etc,…

Ejemplo de HTML y CSS para dar formato a un título

CSS:

HTML:

Resultado:

Ejemplo de HTML y CSS para dar formato a un  subtítulo

CSS:

HTML:

Resultado:

Ejemplo de HTML y CSS para dar formato a un  párrafo

CSS:

HTML:

Resultado:

Te recomiendo un buen asistente que te ayudará con tu CSS como es Stylebo

Partes de una regla CSS

Vamos a analizar detalladamente el siguiente CSS:

p {

color: red;

}

La estructura completa es lo que se dice regla predeterminada o «regla», abreviando. Percibe también los nombres de todas las partes de la regla:

Selector

El elemento HTML en el que comienza la regla es la: p y para dar estilo a otros elementos como a un H1, H2 etc,  solamente es cambiar el selector.

Declaración

La regla color: red; especifica a qué propiedad hemos dado el estilo. Puede ser color, tamaño, alineación…

Propiedades

Es la forma de dar estilo a un elemento HTML. Así pues, color es una propiedad del elemento p.

Valor de la propiedad

 El valor de la propiedad está a la derecha, después de los dos puntos. Así pues aquí podemos escoger entre una infinidad de valores: verde, azul…

Partes de la sintaxis:

• • Cada una de las reglas, a parte del selector, están encapsuladas entre corchetes ({}).

• • Después de la propiedad hay que poner los dos puntos (:) para separarla de su valor.

• • Dentro de cada regla se usa el punto y coma (;) para separar una declaración de la siguiente. Por ejemplo si le queremos añadir la fuente del texto, el tamaño, el centrado…

Por tanto para modificar varios valores de propiedad a la vez, los escribiremos separados por punto y coma (;), de esta manera:

p {
  color: red;
  width: 200px;
  border: 1px solid black;
}

Seleccionar varios elementos

También se puede seleccionar varios elementos y aplicar una sola regla a todos ellos. Habrá que ir añadiendo varios selectores y los separamos por comas (,). Ejemplo:

p,h1,h2,li {
  color: red;
}

Clases  de selectores

Además de los selectores de elementos, que hemos visto, los que seleccionan todos los elementos de un tipo dado en los documentos HTML, también tenemos la posibilidad de hacer selecciones más particulares. Echa un vistazo a los distintos tipos de selectores que más se utilizan:

• Selectores simples o básicos.
• Selectores de atributos.
• Pseudo-clases y pseudo-elementos.
• Combinaciones y selectores múltiples.

Selector universal

Se aplica a todos los elementos en el documento.
Ejemplo: *{ }
En el ejemplo estamos diciendo que aplicaremos una regla a todos los elementos de la página.

Selector de tipo

Selecciona por nombre del elemento Ejemplo: h1, h2, h3 { }
En el ejemplo estamos diciendo que aplicaremos una regla a los elementos h1, h2, h3 de la página.

Selector de clase

Selecciona un elemento cuyo atributo de clase tiene el valor que coincide con alguna clase específica.
Ejemplo: .hot { }
En el ejemplo anterior estamos seleccionando cualquier elemento que tenga la clase .hot en su valor de atributo.
Ejemplo: p.hot { }
En el ejemplo anterior solo selecciona los elementos < p > que tengan la clase .hot y les aplica una regla de estilo.

Selector por id

Selecciona un elemento cuyo atributo id tenga un valor que coincida con un valor especifico después del signo #.
Ejemplo: #introduction
En el ejemplo anterior va a seleccionar el elemento que contenga el id llamado introduction y le aplicara una regla de estilo.

Selectores hijos

Selecciona un elemento que es es hijo directo de otro elemento.
Ejemplo: li > a { }
En el ejemplo anterior estamos seleccionando cualquier elemento < a > que sea hijo del elemento < li >.

Selector descendente

Selecciona un elemento que es descendiente de otro elemento especificado ( no solo un hijo director de ese elemento).
Ejemplo: p a { }
En el ejemplo anterior selecciona cualquier elemento < a > que se encuentre dentro del elemento < p > incluso si hay otros elementos anidados dentro de ellos.

Selector adyacente

Selecciona un elemento que es el hermano siguiente del otro.
Ejemplo: h1 + p { }
En el ejemplo anterior selecciona el elemento < p > después de cualquier elemento < h1 >.

Selector general de hermanos

Selecciona un elemento que es un hermano de otro, aunque no tiene que ser el elemento que precede directamente.
Ejemplo: h1 ~ p { }
Si tienes dos elementos < p > que son hermanos de un elemento < h1>, esta regla aplicará para los dos elementos.

Segundo paso para crear mi propio CSS

El camino es muy largo hasta llegar a crear un CSS bien definido, pero si has practicado lo suficiente y ya tienes más claro cómo crear tus HTML, es el momento de empezar con tu propio CSS.

En este caso lo vamos a crear a través de un plugin: Site Origin CSS

• Crea tu archivo style.css con el código CSS que desees.
• Vete al escritorio de WordPress y añades el plugin Site Origin CSS
• Lo activas.
• Click en  Apariencia y click en CSS personalizado, donde se abrira el plugin.
• En él insertas tu nuevo código.
• O también lo puedes editar directamente desde el plugin pues te da esa opción. Que, viene muy bien, si aún no eres todo un experto en CSS.

Ahora que ya eres un experto en cómo crear mi propio CSS, te resultará fácil crear tu propio CSS y personalizar tu sitio web.