Aplicar un CSS a un objeto o etiqueta concreta por Id

css

Como webmaster o lo que sea que soy de vez en cuando apetece escribir algo sobre esto del diseño Web y los CSS, así que aquí voy con un artículo.

Por otro lado podrás observar este blog a sufrido un cambio muy grande, tanto es que si no o conocías de antes te dejo una imagen de como era en diseño este espacio hace tan solo 3 días…

antes

Todo este cambio ha sido posible en gran medida a una serie de plugins que he comprado con los ingresos de la eTienda pero como quería llevar a cabo un cambio también en el diseño me vi obligado a aprender CSS, al menos lo justo y necesario para poder personalizar formularios, imágenes etc.

Si has trabajado con esto sabrás que el CSS tiene algo muy interesante y esto es la herencia, una forma en la que podemos fijar estilos que se apliquen a todo el sitio Web y así, poder hacer uniforme todo el diseño, pero ¿Que pasa cuando un elemento o elementos en particular requieren otro diseño?

En mi caso el problema fue que uno de los plugins que muestra formularios (concrétamente el de logins) estaba heredando los márgenes y espacios del formulario de contactos y hacía que un campo se solapara con otro así que he tenido que investigar la forma de solucionar esto y por suerte, dí con esta página y la solución!

http://codexexempla.org/curso/curso_3_3.php#sel-basicos

La solución al final ha sido realmente sencilla, simplemente he destinado un estilo a un objeto e identificador concreto, de forma que ese estilo, solo afectaría a un tipo de objeto con un identificador concreto (Id).

Ejemplos de código

<button name="wp-submit" class="clase_1 clase_2" id="boton_maldito">

En este caso la forma de aplicar este estilo ha sido la siguiente:


#boton_maldito, .clase-1 .clase_2 {
propiedades de esta clase
}

Y bueno, como vemos mucho más sencillo de lo que parecía, eso si, me ha llevado unas cuantas horas dar con la solución…

Espero que te guste y que te animes a compartirlo!!!

Deja una respuesta