Curso gratuito de CSS3

Si quieres aprender a crear páginas web con un diseño profesional es necesario aprende CSS3. El objetivo de este curso es poder aprender CSS3 en forma sencilla viendo un concepto teórico, luego algunos ejercicios resueltos y por último y lo más importante efectuar una serie de ejercicios.


INTRODUCCIÓN

CSS por sus siglas en ingles Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las CSS son un conjunto de normas que nos permiten controlar la apariencia de una página web dándole estilo a las etiquetas HTML. En un principio, los sitios web se concentraban más en su contenido que en su presentación y eso ha cambiado totalmente en la actualidad, si una página web no es atractiva visualmente y fácil de utilizar nadie visitará esa página web.

HTML se centra en la estructura y forma en que se verán los elementos en pantalla y deja de lado la apariencia del documento. CSS se encarga de los aspectos visuales (color, tamaño, alineación, animaciones, trasnsiciones, eventos) de los elementos o etiquetas que son presentados al usuario. CSS complementa el HTML, para que puedas cumplir con el objetivo de aprender, puedes seguir el curso de HTML5 que también es gratuito y es complementario a este curso.

Como se comentó anteriormente con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros, así como el lugar donde se mostrarán textos, videos, audios e imágenes en la página.

Las Hojas de Estilo está definidas en las especificaciones CSS1, CSS2 y CSS3 del World Wide Web Consortium (W3C).

Una de las utilidades más evidentes de CSS es que podemos aplicar un estilo a múltiples páginas html, sin repetir los mismos estilos cada vez que creamos un html nuevo. En este caso podríamos utilizar un solo archivo CSS externo que afectaría múltiples páginas html (Así es como se trabaja normalmente en el desarrollo de sitios web, un archivo css aplica estilos a múltiples páginas web). También sería posible incluir el código CSS dentro del mismo archivo html, o bien añadir código CSS señalando sólo una parte del texto dentro del mismo html o incluso utilizar estas tres posibilidades conjuntamente.

Definición de hojas de estilo CSS en un archivo externo

La definición de una hoja de estilo css en un archivo separado que deberá tener la extensión css, es una de las opciones más comunes en los desarrolladores, ya que nos permite utilizar el mismo archivo CSS en otras páginas html para asignar los mismos estilos. De esta manera, cualquier cambio realizado en el diseño afectaría a todas las páginas html que utilicen dicho archivo CSS.

En este caso, tendríamos un archivo HTML y un archivo CSS y para ligarlos o conectarlos debemos añadir el siguiente código en el archivo HTML dentro del <head></head>.

<link rel="stylesheet" href="estilo.css" type="text/css"/>

En el ejemplo el archivo se llama estilo.css y esta ubicado en la misma carpeta que el archivo htlm, pero lo correcto es que tengamos una carpeta donde almacenemos los archivos css, como se muestra a continuación.

<link rel="stylesheet" href="css/estilo.css" type="text/css"/>

Dentro del archivo estilo.css definiremos el color del fondo de nuestra página html y lo haremos de la siguiente manera.

body{
  background-color:#FF214F;
  color:white;
}

La estructura CSS siempre es la misma:

  • Primero se indica el selector, este es el elemento o etiqueta que se le dará el estilo (para saber a quién afecta el código) y la línea se finaliza la línea abriendo llaves "{".
  • Posteriormente se indica el atributo a modificar (en este caso 'background-color' para el color de fondo y 'color' para el color del texto).
  • Seguido al atributo se indica el nuevo valor (separados ambos por dos puntos ":").
  • Para finalizar los atributos para este selector, se cierra con un "}".

El HTML con el archivo css quedaría de la siguiente manera:
 

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href=" css/estilo.css" type="text/css">
</head>
<body>
Página HTML – Curso gratuito de CSS
</body>
</html>

 

Artículos relacionados
0 Comentarios
Enviame un comentario