Tabla de contenidos
Primeros Pasos con CSS – Diseña tu web sin límites
En nuestro post de esta semana, como agencia de diseño web en Sevilla, vamos a hablaros del CSS o lo que es lo mismo, las hojas de estilo en cascada. Es el código fuente que usamos para dar estilo a tu página web.
Digamos que hoy en día con los gestores de contenido como WordPress, hacer una web resulta muy intuitivo, no digamos ya con maquetadores como Elementor o Divi, que te dicen muy gráficamente, como cambiar el color del texto, mostrar los elementos en un lugar específico de la pantalla, poner un fondo con imagen y colores, etc.
Las siglas CSS en inglés significan Cascading Style Sheets, en español hojas de estilo en cascada, no es realmente un lenguaje de programación, es un lenguaje de hojas de estilo, es decir, permite aplicar estilos de manera independiente a cada elemento de un documento HTML.
HTML por ejemplo si es un lenguaje de programación y nos sirve para crear páginas web, con el CSS vestimos y personalizamos cada página de HTML.
Por ejemplo, para seleccionar todas las palabras de un párrafo en una página HTML y volver el texto dentro de ellos de color verde, tienes que escribir este fragmento de CSS:
p { color:green;} 
Esta línea de CSS significa: la “p” indica párrafo, todo el párrafo siguiente, su contenido, por eso va entre corchetes tiene el texto en verde. Se lo estás diciendo de manera manual.
Para probarlo, sólo tienes que abrir tu archivo index.html por ejemplo, y pegar la línea de CSS en algún lugar dentro de la etiqueta <head> </head> o <body> </body>
El resultado sería el siguiente:
Todo lo que tenga la etiqueta de párrafo, en la parte del <head> o el <body> lo pondrá en verde. El texto original es el siguiente:
Aunque parezca un poco lioso al principio, no hace falta ni si quiera que aprendas a programar, como he comentado al principio instalando wordpress y un tema diseñado, tendrás suficiente para ir personalizando tu web a golpe de clic y sin ningún código.
Todo este código de programación ya lo han desarrollado los programadores de HTML, CSS, PHP y Javascript, tú sólo tienes que esforzarte en añadir contenido a la web y darle tu toque diferencial.
Y si ya han desarrollado este código los programadores, te estarás preguntando que porqué tienes que saber de CSS, pues porque también es cierto, que cualquiera que tenga una web en wordpress, en algún momento del proyecto, se verá necesitado o obligado, de alterar algún código.
Entonces este post no es para que aprendas a desarrollar una web en HTML o programar en Javascript, sino que conociendo unos códigos básicos de CSS o HTML, que son los fundamentales de toda web, tendrás un conocimiento y control más completo de tu web.
Por lo tanto, en el post de hoy nos centraremos en códigos básicos de CSS, para que no tengas limitaciones a la hora de realizar ajustes de personalización de tu web en wordpress.
Sencillos pasos para empezar con CSS
Como ya hemos aprendido, CSS es el lenguaje que podemos usar para dar estilo a una página web. Controlar los colores de los párrafos, títulos, estilo de fuentes, fondos, visibilidad, alineación, adaptabilidad y demás estilos de una web.
Siguiendo con el ejemplo anterior: p { color:green;}
La estructura de la sitaxis es la siguiente:
- Elemento HTML con el que comienza la regla que va a aplicar el estilo, en este caso sería la “p” que equivale a párrafo, si quieres cambiar el título tendrías que poner “H1” por ejemplo.
- Entre corchetes van las variables que afectan al elemento HTML, en el ejemplo sería “color” que es una propiedad del elemento “p”.
- A la derecha de la propiedad, después de los 2 puntos, se pone el valor de la propiedad.
Cada una de la reglas, deben estar encapsuladas entre las llaves {}. Dentro de cada declaración, debes usar los dos punto (:) para separar la propiedad de su valor. Dentro de cada regla, se debe usar el punto y la coma (;) para separar una declaración de la siguiente.
De esto modo, para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma.
También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por una coma (,).
Si le quitamos el CSS a una web queda como un simple párrafo de texto, poco atractivo, yo diría que con estilo arcaico. Como si de un antiguo directorio se tratara:
Vemos el buscador de Google con la hoja de estilos:
Ahora lo vemos sin CSS:
No tiene nada que ver, verdad? Creo que con este ejemplo ha quedado claro la función del CSS.
Conociendo ya la importancia del CSS para nuestras webs, para personalizar su aspecto, vamos a empezar por los principales elementos de su sintaxis, para que puedas aplicarlo a tu web sin ninguna preocupación.
Selectores, Clases y IDs
Selectores
En la hoja de estilos el elemento principal es el selector, es una abreviatura que indica al código que se aplicará el estilo, en nuestro ejemplo sería la «p» de párrafo, indica que el color verde aplicará a todo el párrafo, recordemos p {color:green;}.
Cualquier código que se aplique al selector se pone entre corchetes {}. Otros casos, en los que los selectores apuntan a etiquetas HTML, como son título principal (H1) , subtítulos (H2), etc.
Selector de Clases
Las clases son selectores específicos que defines en tu web. Por ejemplo, si quieres aplicar sólo el estilo al título principal o encabezado H1 de las entradas (post), tendrías algo parecido a: .post-title {}.
El selector de clase CSS, se identifica por un punto delante suyo u otro indicador delante del selector. Se utiliza para que se apliquen a elementos de toda la web, pero no a elementos ya predefinidos como el H1. El selector normal no tendrá ningún punto ni elemento delante, lo que significa que se aplica al HTML base.
Selector de Identificación – IDs
Son elementos muy parecidos a las clases en su funcionalidad. Salvo en 2 pequeñas diferencias:
Vienen precedidos por un símbolo # delante del selector, y que su nombre viene dado por una instancia muy específica, única o muy limitada, de un elemento que necesita algún estilo especial. Ejemplos: #formulario-blog {} o #tabla-suscripcion-entradas {}.
Los IDs aplican a elementos individuales concretos, en vez de a un tipo de elemento en general.
Ejemplos de uso:
- p { color: blue; // Color azul en todos los párrafos} «Aplica a elementos generales de la base del código de HTML»
- .class { color: green; // color verde en el tipo de elemento class} «Aplica a tipos de Elementos específicos»
- #id { color: yellow; // color amarillo en el elemento concreto id} «Elemento concreto»
Estos son los selectores básicos para empezar a crear tus hojas de estilo, en los siguientes post de CSS, iremos ampliando la información y explicaremos selectores más complejos.
Dos puntos y punto y coma
Como he comentado al principio todo el código de CSS va entre corchetes. Pero también tenéis que saber que dentro de esos corchetes en cada línea de código debe acabar con un punto y coma (;). Esto le indica al navegador que ese estilo está completo.
Además tendrás que poner los dos puntos (:), entre el estilo CSS y el valor, y algo que no tiene valor aquí son los espacios, puedes poner todos los que quieras, pero respetando las reglas del (;) y los (:).
Ejemplo de uso:
.post-content .H1 {
font-family: Barlow, Poppins;
}
.post-header {
margin-top: 20px;
}
Comentarios CSS
Algo muy recomendable para no perderte es ir dejando comentarios a lo largo de tu hoja de estilos. Los comentarios CSS se abren y cierran con los símbolos /* y */.
Ejemplo: /* Esto es un comentario en CSS */
Además ayudarás a que quien lea la hoja de estilos también la pueda entender o revisar.
¡Important
A pesar de que su palabra ya nos lo dice, esta etiqueta es muy importante, es uno de los elementos más utilizados dentro de la hoja de estilos. Al añadirlo a una línea o elemento, le estás diciendo al navegador que omita cualquier otro estilo para ese selector al que apunta, da igual donde esté en la hoja de estilos.
De esta forma, si necesitas que un elemento en particular siempre tenga un color en concreto, por ejemplo, deberías usar ¡important para conseguirlo. Su posición debe ser entre el valor y el punto y como, no antes.
Ejemplo de uso:
#category-title {
color: green;
}
/* En la siguiente línea omitimos el color verde por defecto del título de categoría
y forzamos con !important que sea amarillo */
#category-title {
color: yellow!important;
}
Display: none;
Este elemento CSS es de los más utilizados también y muy importante que todo principiante debería aprender.
La función que realiza es hacer desaparecer cualquier elemento al que se aplique. Como ejemplo, si necesitas que una página no tenga menú de cabecera, simplemente añadimos este código:
.header-nav {
display: none;
}
Este código hace una función parecida a la anterior, que no se vea el elemento en el navegador, pero explico la diferencia:
El código anterior display:none; eliminará por completo el elemento de la página, como sino existiera. Mientras que visibility:hidden; el código sigue cargándose, pero no se muestra, es decir la funcionalidad del código sigue pero el elemento no se muestra.
Esto es muy importante por ejemplo para los pixeles de medición, son elementos que tienen que estar funcionando, pero no hace falta que el usuario los vea.
Margen (margin) y Relleno (padding)
Son elementos que al empezar con CSS son fácil de confundir, pero cuando los conoces te das cuenta que funcionan de manera diferente, los márgenes (margin) y los rellenos (padding):
margin
El margen es el espacio o la caja que hay alrededor de un elemento. Es invisible, transparente y su valor puede ser hasta negativo.
padding
«el relleno de la caja» o padding sirve para acotar el tamaño del elemento. Para hacerlo más grueso o menos gordo. No tiene valor negativo como el margen.
Al usar estos elementos puedes usar como unidades de valor los píxeles, ejemplo: margin:15px o viewport, ejemplo: padding:1vw, este útlimo quiere decir que traza un espacio uniforme alrededor del selector.
Hasta aquí nuestro primer post resumen de todo lo que hace falta para empezar a iniciarse con las hojas de estilo CSS y poder dar un salto más de estilo y diseño para tus páginas web. Un último apunte y que se me olvidaba, para acceder a las hojas de estilo de las web, sólo tienes que pulsar el botón derecho sobre una de ellas y pulsar en inspeccionar. Ahí entrarás en el código fuente de la página y todo los estilo que esta contiene.
El botón inspeccionar da para un post completo y lo añadiremos próximamente, cualquier duda, nos puedes dejar un comentario o escribirnos a info@semtidodigital.es. Muchas gracias.
Autor: Pablo López Barroso de Semtido Digital.
0 comentarios