CSS o hojas de estilo en cascada es un lenguaje de hoja 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 generar los datos generados por WordPress. Cada tema de WordPress contiene un style.css archivo que tiene reglas de estilo para definir el formato de las páginas generadas por WordPress.
CSS es muy simple de usar 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 comenzar. Sin embargo, como es muy simple de usar, muchos usuarios de WordPress pueden comprender los conceptos básicos con solo mirar su tema de WordPress. style.css Archivo.
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 se pueden estilizar directamente en CSS. Los diseñadores también utilizan identificadores Y clases para definir diferentes secciones que se pueden estilizar en CSS. Esto les ayuda a usar diferentes estilos para los mismos elementos HTML en una página web pero en diferentes secciones. Por ejemplo, un h1 el elemento del título del blog en la sección de encabezado de una página puede tener un estilo diferente al de otra h1 elemento en el área de publicación 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 que se muestra arriba contiene un identificador con nombre ‘título’ y una clase llamada ‘Titulo de Blog’. Estas secciones se pueden estilizar 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 cambiar el color de fondo en WordPress (guía para principiantes)
- Cómo diseñar su formulario de comentarios de WordPress (guía definitiva)
- Tema
