Tutorial CSS básico

julio 26, 2017

En la anterior entrada del curso sobre diseño web hablamos sobre los conceptos básicos de HTML. Así que en este nuevo apartado del curso, empezamos a hablar sobre CSS, otro de los lenguajes de programación claves para hacer una página web.

Como siempre, al tratarse de un tutorial básico, comencemos por las nociones y explicaciones básicas de este lenguaje.

Tutorial css basico

¿Qué es y para que sirve CSS?


CSS (Cascading Style Sheets), es un lenguaje que se complementa con HTML, ya que sin este primero, el CSS no tendría sentido ninguno.

Este lenguaje lo que hace es aportar estilo y una buena presentación a nuestra maquetación realizada en HTML.

Vamos, que básicamente lo que hace es poner nuestra página web bonita para atraer a nuestros visitantes y hacer que se sienten cómodos en ella.

¿Puede funcionar una página web sin CSS?

Aprender CSS

Funcionará a la perfección, eso sí, la página será horrorosa y a la vista del usuario quedará muy mal, tanto que saldrá de ella nada más entrar.

Es por esto, por lo que a pesar de poder funcionar, este lenguaje es totalmente necesario a la hora de crear nuestra página, ya que sin una página bonita no llegaremos a ninguna parte.

Como programar en CSS


Este lenguaje es muy sencillo de aprender, ya que la estructura solo tiene un par de apartados a tener en cuenta.

Veamos un ejemplo de código y expliquemos por partes que es cada cosa.

h1 {
font-size: 20px;
}

Vemos claramente dos partes, lo que se encuentra fuera de los corchetes, en este caso "h1" y lo que se encuentra dentro, "font-size: 20px;".

Fuera de los corchetes, indicaremos el elemento del HTML al que queremos modificar el estilo.

En este ejemplo, estamos modificando un h1, que podría ser el título de una entrada.

Aquí se podrá poner todo tipo atributos HTML, e incluso se podrá crear una jerarquía para ver la influencia del estilo, ya se encuentre el atributo dentro de una parte u otra.

Imagínate que tan solo queremos modificar los h1 que se encuentren dentro de los Post, pero no queremos modificar los h1 que se encuentren dentro de la página principal. Esto lo podremos conseguir haciendo una jerarquía, indicando el orden en el que influirá el CSS, pero esto, te lo explicaré más adelante en el curso, cuando ya hayas avanzado un poco.

Ahora expliquemos que nos encontramos dentro de los corchetes.

Aquí dentro podrás encontrar los cambios realizados al atributo o atributos externos, en este caso estamos indicando un valor de "20px" para la característica "font-size", lo cual indica que cambiaremos el tamaño de la fuente a 20px.

Aquí podremos cambiar todas las características que queramos.

Tras acabar de indicar cada característica con su respectivo valor, deberemos cerrar con un punto y coma como podemos ver en el ejemplo.

Otro ejemplo aquí para que te vaya quedando algo más claro todo.

p {
font-size: 10px;
color: black;
margin-top: 5px;
margin-bottom: 5px;
}

En este ejemplo estamos modificando el atributo p del HTML, que en este caso si no lo sabes son los párrafos de una página web.

Y le estamos diciendo que el tamaño de letra sea 10px (font-size: 10px), que el color sea negro (color: black), que el margen superior sea de 5px (margin-top: 5px) y que el margen inferior sea de 5px también (margin-bottom: 5px).

Como ves, puedes añadir todas las características que quieras dentro de un mismo atributo, siempre que cada una de ellas las cierres con punto y coma como comentamos antes.

Todos estos valores son prácticamente imposible de aprender de memoria, por lo que siempre tendremos que andar echando un vistazo a documentaciones por Internet, y aquí te dejo yo la de W3Schools para que puedas ir echando un vistazo antes de seguir avanzando con el curso.

Más adelante ya te explicaré conceptos algo más avanzados para usar CSS y que puedas ya empezar a tocar de verdad tu página web.

Espero que te haya resultado fácil de entender este tutorial básico de CSS y que te esté gustando este curso de iniciación sobre diseño web.

Quizás también te guste...

0 comentarios