Hola, hola, hola o como diría un paisano de los grandes, «bueno, buno, vano» (nunca he sabido si es con b o con v).
Como ya hemos visto la parte básica de html, va siendo hora de poner también un apartado básico de Css, para más que nada empezar a maquetar de manera sencilla nuestro blog o página web sin necesidad de un CMS en principio.
CSS no es mas que un codigo que sirve para modificar el estilo de tu html, si para que tenga mas flow, y aqui vamos a enseñarte como hacerle esos pequeños cambios que harán de tu página, una página la mar de «kuki».
😎 Comenzamos a meter estilo a la página 😎
Tenemos que crear dentro del editor un archivo que se llame style.css, (la verdad que se puede llamar como quieras pero por convenio lo llamamos así)
De esta manera ya sabe nuestro programa que vamos a comenzar con la parte visual de nuestra pagina.
Creo que es conveniente hablar de las partes de una regla de CSS, asi que comenzamos con…
😷 Anatomía de una regla de CSS.
Selector:
Es el elemento del codigo HTML en el que comienza la regla, esta, nos dice que elemento vamos a darle nuestro estilo.
Declaracion:
Es una regla unica que dice cual es la propiedad del elemento a la que vamos a dar el estilo
Propiedades:
Es, de que manera vas a dar estilo a una propiedad de HTML, ya sea cambiando el color, el tamaño…
Valor de la propiedad:
Aquí dices como quieres modificar la propiedad, poniendo el color rojo, o dando un tamaño mayor o menor, (esto da igual por que el tamaño no importa).
Sobre la sintaxis hay que tener en cuenta varias reglas muy importantes que tienes que seguir siempre a rajatabla:
- Cada una de las reglas deben estar entre corchetes
- Dentro de la declaracion debes usar los dos puntos (:) para separar la propiedad del su valor
- Dentro de cada rebla debes usar el punto y coma (;) para separar las declaraciones.
Si eres muy chulo, puedes seleccionar varios elementos en vez de ir uno por uno, aunque tienes que tener en cuenta que los cambios serán en este aspecto para los tres iguales.
Hay diferentes tipos de selectores, y creo que lo mejor es hacer un listado de cada uno de las maneras mas genéricas, asi que haya vamos…
Diferentes tipos de selectores:
| Nombre del selector | ¿Qué seleccionan? | Ejemplo |
| Selector de elemento | Todos los elementos HTML del tipo que especifiquen | p selecciona a <p> |
| Selector de identificación | Elemento en la pagina con el ID especificado | #my-id selecciona <p id=»my-id»> y <a id=»my-id»> |
| Selector de clase | Los elementos de la pagina con la clase especificada | .my-class –> <p class=»my-class»> y <a cass=»my-class»> |
| Selector de atributo | Los elementos en una pagina con el atributo especificado | img[src] –> <img scr=»myimage.png»> pero no cambia img |
| Selector de pseudo-clase | Los elementos especificados, pero solo cuando esté en el estado especificado, por ejemplo si ponemos el ratón sobre el | a:hover Selecciona <a>, pero solo cuando el ratón está sobre él |
En la parte de CSS entraremos mas a fondo en más tipos de selectores que hay y así marcar nuestro estilo más a fondo.
Fuentes y textos.
Lo que más se toca son las fuentes y los textos en nuestros escritos, al igual que word tiene sus estilos, nosotros podemos usar los nuestros de manera un poco más rudimentaria, pero no deja de ser lo mismo que hace Word y/o WordPress.
Podemos coger fuentes diferentes también de Google y probaremos también con alguno de ellos, aparte de usar los que vienen por defecto de nuestro programa.
Empaquetado y preparado para enviar
Aqui tenemos que tener en cuenta el simil, esto es como preparar cajas, en las que le metemos algo y lo podemos ahi modificar, pero solo dentro de esa «caja».
Ahora si queremos cambiar lo que es la pagina y no el texto lo hacemos de la siguiente manera…
Relleno
(padding) es el espacio que tenemos alrededor del texto o del contenido de la página.
Marco
(border), la linea de «margen que hay entre el border y el padding
Margen
(margin), el espacio que queda detrás o fuera del boder.
Aquí también podemos usar los siguientes términos pero están mas definido al contenido, así que creo que a esta sección la podemos llamar…
Código para cambio de contenido 🙄
width
width damos la medida del ancho del elemento
background-color
Color de fondo del contenido y del relleno
color
Normalmente lo usaremos para el texto y es el que da color al contenido
text-shadow
Pone una sobra en el texto, asi difunada, si muy chuli
display
selecciona el modo de visualización para el elemento.
Bueno ahora creo que es el momento de probar en nuestra super pagina.
Aquí os dejo el codigo que he utilizado y ahora paso a enseñaros los cambios que hemos tenido, esto no deja de ser un simple ejemplo que espero que vaya gustando pero siempre podéis ir tocando para que esos cambios los veais mejor.
