CSS biene de Cascading Style Sheet u Hoja de Estilo en Cascada y nos permite personalizar visualmente nuestra pagina. Los estilos se pueden aplicar dentro de las propias etiquetas de html por ejemplo en un <div>, <div style="background-color:#0000">. Aqui estamos modificando el color de fondo a un color negro en exagecimal, lo cual es similar a RGB, los primeros 2 digitos son para la intensidad de rojo, los siguientes 2 son para definir la intensidad del color verde y los 2 ultimos son para definir la parde azul. Y bueno basicamente podrias definir cualquier propiedad de CSS aqui, pero una mejor forma es hacerlo en la etiqueta <style>, dentro de <head>.
En este ejemplo se definen los estilos dentro de la etiqueta <style>. Se establece un color de fondo negro en formato RGBA para <body>, es decir para toda la pagina, modificanco la propiedad backbround-color. Para el texto del encabezado, <h1>, se establece un color beige, con la propiedad color y para la etiqueta de texto regular, <p>, se definen un color whitesmoke y tipo de letra Arial, modificanco la propiedad font-family.
Esta forma de definir estilos es combeniente cuando se necesita modificar exclusivamente las propiedades de contenedores que se encuentren en esta misma pagina, pero estas definiciones no se pueden usar en otros archivos html dentro del mismo directorio. Asi que para poder definir propiedades que apliquen a todo el sitio web se usan los archivos de extencion .css.
Dentro de un archivo css defines propiedades de la misma forma que acabamos de hacer dentro de la etiqueta <style>, pero sin usar ninguna etiqueta.
Una vez creado el archivo podras usarlo con la etiqueta <link>, de la que hablamos en el capitulo anterior. Puedes guardar el archivo css en el mismo directorio que index.html, pero yo te recomiendo crear un subdirectorio llamado styles, ya que en un sitio web se suelen usar varios archivos.
Entonces al escribir la direccion del archivo css queda de esta forma, indicando en que subdirectorio se encuentra. Lo mismo te recomiendo para las imagenes que uses en tus paginas.
Por ultimo quisiera recomendarte los frameworks de ©W3SCools y ©Bootstrap, claro una vez que hayas entendido las bases y puedas a provecharlos para agilizar tu desarrollo web. Aunque tambien es muy valido siempre usar css hecho 100% por ti mismo ( ^__^)
Para usar el framework W3.CSS lo importas de la misma forma que importas tu archivo css, pero en href escribes href = "https://www.w3schools.com/w3css/4/w3.css" y puedes empezar a usar sus clases, las cuales siempre inician con w3-, seguido de una palabra descriptiva, quedando <div class="w3-row"> por ejemplo.
Muy bien de momento sigamos aprendiendo las bases que necesitamos para poder explotar al maximo nuestra creatividad y no nos veamos limitados por nuestros conocimientos a la hora de plantearnos que construir.
Boston, Massachusetts
sinoplecarballo@gmail.com
Martin Carballo
@shur_d_firsiel