Habiendo terminado el Curso de HTML5 desde 0, nos iniciamos en el Curso de CSS3 desde 0, para nosotros que somos novatos en el tema. Evidentemente podríamos haber profundizado muchísimo más en HTML5, seguramente lo haremos más adelante, pero tenemos suficiente para desarrollar una página web completa con los conocimientos adquiridos. Ya veréis como a medida que vamos avanzando, os vais enganchando cada vez más a este lenguaje. Con CSS3 vamos a pintar nuestra web, vamos a darle color, forma, y un aspecto profesional. Oficialmente CSS3 no tiene nada que ver con HTML5. CSS3 es una tecnología que HTML usa como apoyo. Es simplemente una tecnología que permite dar formato a nuestras páginas web. ¡COMENZAMOS!
Construcción de una regla de estilos CSS
Los estilos CSS se aplican a través de reglas de estilo. Cada regla esta conformada por dos bloques bien definidos. El bloque del selector, determina que parte de la página se ve afectada. Este selector puede contener desde una simple etiqueta como <p>, <section>, <footer> y también clases e id. Incluso tenemos selectores avanzados, que nos permiten aplicar estilos en función al estado de una determinada etiqueta.
El segundo bloque es la declaración, que comienza con una llave de apertura { y concluye con una llave de cierre }. Cada declaración esta compuesta por una declaración propia. Y a su vez cada declaración esta formada por una propiedad y un valor.
Es recomendable y además una buena practica, que cada declaración se defina en una única linea. Aunque en muchos casos, cuando abráis alguna hoja de estilos de una web que no has hecho tu, te encontraras que las escriben en linea. No es que esté mal, pero las hojas de estilos, cuanto más limpias y claras mejor.
Además podríamos colocar varias etiquetas en el selector, a todas las etiquetas incluidas en el selector se le aplicaran las reglas definidas en la declaración. También podemos definir una clase e incluso podemos hacer referencia a un id. Os pongo un ejemplo, pero no os volváis locos pensando en porqué está definido así. A continuación del ejemplo entramos a ver como vamos a incluir los estilos en en nuestro documento HTML5.
<style>
p, footer, section, .color, #contenedor {
font-size: 10px;
text-align: center;
}
</style>
¿Como incluir CSS3 en HTML5?
Tenemos 3 formas para integrar CSS3 en nuestro documento HTML. La primera forma es definiendo los estilos dentro de la etiqueta o elemento, este modo se denomina "estilos de linea".
Esta forma de estilos se recomienda solo cuando estamos creando una página y vamos a aplicarle unos estilos básicos, Por ejemplo si estuviéramos creando un artículo y quisiéramos cambiar la apariencia de un bloque, el tamaño de un subtitulo o aplicar un estilo a un grupo de texto.
Esta forma se basa en colocar un atributo directamente a una etiqueta HTML5. Dentro de este atributo, se coloca el código CSS3 que queremos implementar. Los estilos definidos afectan únicamente a la etiqueta donde se coloca. Lo vais a entender con este sencillo ejemplo que vemos a continuación.
<ul> <li style="color: red">Vista en el navegador Google Chrome</li> </ul>
- Este es un elemento de lista visto en Google Chrome
La segunda forma es definiendo los estilos en el encabezado de nuestro sitio y se denomina "estilos embebidos". Esta forma se implementó gracias a la etiqueta <style>. La etiqueta <style> se define entre la etiqueta de ciere y la de apertura de la etiqueta <head> de un documento html. Esto es lo recomendable, pero <style> podria estar dentro de la etiqueta <body> o después, dentro de un <div>, etc.
<head>
<style>
li{
color: 0000ff;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>Primer elemento de lista</li>
<li>Segundo elemento de lista</li>
</ul>
</body>
Este método es interesante y podemos usarlo para sitios pequeños que no tengan mas de 4 o 5 páginas.
La tercera forma es definiendo los estilos en un archivo externo, se denomina "enlazando estilos". Podemos crear nuestros estilos y almacenarlos en un archivo CSS externo. Luego llamaríamos o enlazaríamos a este archivo usando la etiqueta <link>. Es recomendable que las etiquetas <link> estén dentro de <head>. Vamos a usar la etiqueta <link>, para indicarle al navegador que queremos cargar una hoja de estilos CSS y queremos que esos estilos se apliquen en nuestro sitio web. Esta es la forma mas recomendable de definir estilos y es la que debemos usar en nuestros proyectos. Los archivos CSS van a influenciar en todas las páginas donde se cargue dicho archivo.
Sublime Text le agrega algunos atributos a la etiqueta <link> cuando estamos definiendola de manera automática. El atributo href="" sirve para llamar o enlazar archivos externos. El atributo rel="", este atributo sirve para aplicar la relación existente entre el documento html y el archivo que deseamos cargar. Como lo que queremos es cargar una hoja de estilos debemos colocar "stylesheet".
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/estilos.css"> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non beatae atque tempora quo assumenda, rerum suscipit aliquid, nostrum ullam ab porro molestias repudiandae dolor repellat. Consequuntur commodi, eaque incidunt assumenda.</p> </head> </body> </html>
Para agregarle un color de fondo al párrafo hemos creado una hoja estilos.css y lo hemos definido de la siguiente forma:
p {
background: red;
}
Finalizando la clase
Como puedes comprobar, no es para nada difícil de entender esta primera toma de contacto con CSS3. Ya hemos aprendido donde y de que manera podemos agregar estilos a nuestra pagina web. Mientras más avancemos más se complica, pero si yo he sido capaz de entender CSS3, seguro que tu lo vas ha entender más rápido y mejor.
Quiero despedirme de la clase de hoy, agradeciendo a todas y cada una de las personas que estais participando de esto, a la gente que está en el grupo de Facebook y le gusta la página de Facebook de HTML5 y CSS3. Comparte esta clase con tus amigos para que puedan beneficiarse de estos conocimientos como lo has hecho tu y anímate a participar dejando tus comentarios y opiniones.
¡HASTA LA SIGUIENTE CLASE!
0 Comentarios