CSS o Cascading Style Sheets es un lenguaje de hojas de estilo que se utiliza para definir la apariencia visual y el formato de los documentos HTML. Los temas de WordPress utilizan CSS y HTML para dar salida a los datos generados por WordPress. Cada tema de WordPress contiene un style.css
que tiene reglas de estilo para definir el formato de las páginas generadas por WordPress
El CSS es muy sencillo de utilizar y fácil de aprender. Hay muchos sitios web que publican tutoriales de CSS para principiantes que pueden ayudar a un nuevo usuario de WordPress a empezar. Sin embargo, como es muy sencillo de usar, muchos usuarios de WordPress pueden entender los fundamentos simplemente mirando el tema de su WordPress style.css
de su tema de WordPress
Ejemplo
body { font-size:14px; color: #444; background-color:#FFFFFF; } h1 { font-size:18px; text-transform:uppercase; } .post-title { font-size: 16px; color: #4C0000; font-weight:normal; }
Los elementos HTML pueden ser estilizados directamente en CSS. Los diseñadores también utilizan identificadores y clases para definir diferentes secciones a las que se les puede aplicar estilos en CSS. Esto les ayuda a utilizar diferentes estilos para los mismos elementos HTML en una página web pero en diferentes secciones. Por ejemplo, un h1
para el título del blog en la sección de la cabecera de una página puede tener un estilo diferente al de otro h1
en el área de la entrada de la misma página.
Ejemplo:
<div id="header"> <h1 class="blog-title"> <a href="<?php%20bloginfo('url');%20?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> </h1> </div>
El HTML mostrado arriba contiene un identificador llamado 'cabecera' y una clase llamada 'blog-title'. Estas secciones pueden ser estilizadas en CSS
Ejemplo
#header { background-color:#4C0000; height:120px; width:100%; padding:20px; } h1.blog-title a { font-color:#FFFFFF; font-size:16px; font-family: Georgia, "Times New Roman", serif; text-decoration:none; }
Lectura adicional
- Cómo estilizar el formulario de comentarios de WordPress (Guía definitiva)
- Cómo cambiar el color de fondo en WordPress (Guía para principiantes)
- Tema
¡Más Contenido!