Escrito por nuestro mentor Java, Raül Martínez.
En el primer artículo de la serie Technobabble, hablaremos de lo importante que es HTML en nuestro día a día debido a la gran cantidad de páginas web que se crean con este lenguaje.
¿Qué es CSS? ¿Y por qué siempre está relacionado con HTML? La respuesta es sencilla. HTML es poderoso, robusto… y feo. Sí, feo. Nadie puede decir que ha visto una página web que simplemente utilice HTML. Como hemos dicho anteriormente, HTML representa la estructura de una casa y ¿quién compraría una casa que solo consistiera en un simple marco? Nadie. ¡Aquí es donde viene CSS al rescate! También conocido como:
En su definición más básica, CSS se encarga de estilizar los elementos HTML. Si volvemos al ejemplo de la casa, una ventana sería el elemento HTML y las cortinas, marcos y colores serían su CSS.
Echemos un vistazo a un ejemplo. Si en nuestro HTML tenemos un elemento como este:
Este sería el resultado:
Un poco menos horrible. Pero empezamos a jugar con CSS.
En CSS debes tener dos partes muy diferentes.
– El selector: se encargará de saber a qué elemento se le aplicarán las reglas de estilo.
– La declaración: son todas las propiedades que queremos aplicar a ese elemento.
¿Se entiende? Todo queda más claro con una imagen:
Ahora que esto está claro, vamos al material. Para dar estilo a nuestro ejemplo debemos utilizar el selector [artículo] y asignarle una propiedad. Hay miles de propiedades en CSS pero no te preocupes, no tienes que aprendértelas todas. Vamos a intentar cambiar el color del texto y del fondo, a la vez que le damos un borde redondeado a nuestro elemento. Sería algo como esto:
Pero espera un momento. ¿Dónde se supone que tengo que insertar este código? ¿Hay varias opciones?
– Inline: el código CSS puede insertarse en la misma etiqueta HTML. NO RECOMENDABLE.
– En una etiqueta de estilo en el archivo HTML mismo. NO RECOMENDABLE.
– En un archivo separado con la extensión .css. RECOMENDABLE.
La tercera opción es la más utilizada a nivel profesional porque es imprescindible ir actualizando de forma constante el estilo de nuestra página web. De esta manera, simplemente tendremos que modificar ese archivo y no tocar el HTML, asegurándonos de que todo se vea bien. Pero para que esto funcione tienes que decirle a HTML donde se encuentra este archivo. Le pediremos ayuda al elemento de enlace de HTML.
Dentro de la etiqueta “head” de nuestro HTML pondremos lo siguiente:
<head>
<link rel="stylesheet" href="filename.css">
</head>
El atributo “rel” se refiere al tipo de archivo y el atributo “href” indica donde está alojado. Si lo hacemos bien, guardamos los cambios y actualizamos la vista previa de nuestra página web, el resultado debería verse a algo como esto:
¡Fantástico! ¡Lo estamos consiguiendo!
¡Nos vemos en el siguiente capítulo de Technobabble!
¿Te interesa saber más sobre HTML, CSS y otros lenguajes de programación como Java? Echa un vistazo a nuestro bootcamp de Desarrollo Web con Java.