fbpx

SINGLE POST

Qué es CSS y para qué sirve en WordPress

Qué es CSS y para qué sirve en WordPress

En este artículo le explicaremos que es CSS y para que sirve. Además podrá encontrar la información relacionada con que es un selector, un código CSS, una clase y una propiedad en WordPress para qué pueda modificar su sitio web de una forma fácil y rápida.

CSS es un código que funciona junto a HTML y sirve para modificar todo lo relacionado con el estilo, es decir, colores, tipografías, tamaños, etc.

Por ejemplo, por medio del código CSS puedo redefinir el estilo de todas las etiquetas de los títulos del sitio Web, para que tenga el tamaño de 32 píxeles, color negro y tipografía Open Sans.

Con el código CSS también puede hacer desaparecer los elementos de su plantilla que quiera quitar introduciendo una simple línea de código.

Qué es un selector y tipos en código CSS

Selector:

Es el nombre que tiene un determinado elemento dentro del código de su web. Conociendo el nombre del selector puede modificar ese determinado elemento a su conveniencia.  Hay dos tipos de selectores: identificadores y clases.

Identificador:

Se refiere al nombre de un elemento concreto que no se repite más que una vez en el sitio web. Es un nombre único, y aplicándole una modificación puede modificar únicamente ese elemento. Los identificadores se definen en la hoja de estilos CSS con #, y dentro del HTML aparecen escritos así: id=” nombre del identificador”.

Clase:

Hace referencia al nombre de una regla que se repite en varios sitios de su web. Por ejemplo, puedes tener una clase llamada verde, que puede ser aplicado tanto a textos como a botones para que tengan ese color, es decir que define un estilo genérico que puede ser aplicado a cualquier elemento cuantas veces sea necesario. Las clases se definen en CSS con un punto y dentro del código HTML se aplican así: class=” nombre de la clase”.

El nombre de los selectores viene determinado por el desarrollador de la plantilla, son nombres arbitrarios elegidos por el creador del tema, aunque a menudo tienen cierta lógica. Por ejemplo, las clases para botones suelen llamarse. button, el identificados de la cabecera de la web suele llamarse #header, que estos ayudan a mantener el orden y una secuencia lógica de lo que se puede ir modificando.

¿Qué es una propiedad?

Una propiedad se refiere a las modificaciones concretas que se pueden aplicar a las hojas de estilos CSS, a un elemento de su sitio web mediante un selector. Por ejemplo, al selector llamado #boton se le puede aplicar las propiedades como color, ancho, relleno y borde de la siguiente forma:

background-color: #ccc; (color gris especificado en código hexadecimal)

color: #fff; (color del texto dentro de la caja en blanco)

width: 300px; (ancho de 300 píxeles)

padding: 30px; (relleno o margen interior de 30 píxeles por cada lado)

border: 1px solid #000; (borde de color negro continuo de 1 píxel de grosor)

border-radius: 5px; (redondeado de un ángulo de 5 píxeles en todas las esquinas de la caja)

Herramientas Copywriting Cómo aplicar propiedades a una clase o identificador

Siguiendo el ejemplo anterior, el código quedaría expresado así en la hoja de estilos CSS:

#boton {

background-color: #ccc;

color: #fff;

width: 100px;

padding: 20px;

border: 1px solid #000;

border-radius: 5px;}

Con esto se está asignando una serie de propiedades de color, ancho, relleno, borde a todos los botones del sitio que tengan asignado el id #boton.

El selector o nombre va precedido de punto (.) o almohadilla (#) según sea una clase o identificador y a continuación entre {} se colocan las propiedades y sus valores.

Esto es para que se pueda tener un mayor control de la apariencia y así cumplir las expectativas deseadas del sitio web.

 

Para más información visita Infase.net o nuestra fan page en Facebook.

Leave a comment

A %d blogueros les gusta esto: