Que es CSS ? Mi Hoja de Estilos

que es css mi hoja de estilos

Semtido Digital

12 marzo, 2021


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;}¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†fragmento css semtidodigital agencia dise√Īo web sevilla

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:

css para parrafo verde semtidodigital

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:

texto original semtido digital css

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:

google con css

Ahora lo vemos sin CSS:google sin css

navegador google 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;

}

Visibility:hidden;

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.


 

Quiz√°s tambi√©n te interese leer…

DISE√ĎO DE P√ĀGINAS WEB PARA TU NEGOCIO

DISE√ĎO DE P√ĀGINAS WEB PARA TU NEGOCIO

  DISE√ĎO WEB¬† En nuestra agencia de dise√Īo web, formada por un equipo de j√≥venes expertos en servicio de marketing digital, te creamos tu web y programamos a medida tu sitio en internet, para que te represente. Estamos enfocados en transmitir la mejor imagen de...

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Suscríbete

¬°Disfruta de nuestra newsletter!

Acepto la

13 + 9 =