Atom
Increíble editor web, uno de mis favoritos.
Gratis, multiplataforma, de código abierto, ligero y personalizable. No se le puede pedir más.
Bienvenido/a a este mega curso de CSS el cual empieza por la parte básica y constará de unas cuantas más.
Este curso está pensado para quienes no tengan ningún conocimiento en CSS. Solo tienes que saber html, el cuál, si tienes algo oxidado o no lo has aprendido, te recomiendo que hagas antes mi curso de html básico y el avanzado.
Con CSS (Cascading Style Sheet) podemos añadir estilos a nuestras páginas html para que queden totalmente a nuestro gusto (o de nuestros clientes) y que se vean de una forma mucho más atractiva ¡Con CSS, todos los diseños de webs que ves por internet son posibles!
Tenemos tres sitios posibles donde añadir propiedades CSS (estilos).
Una posibilidad es crear una hoja externa, que lleve todos los estilos para todas las páginas de tu sitio web y enlazarla o añadir estilos directamente en el documento html (no muy recomendable) o sobre los propios elementos html (menos recomendable).
Si utilizas una hoja general para añadir ahí todos los estilos, los efectos va a afectar a todas las páginas de tu sitio web que estén enlazadas a dicha hoja, tanto como si son 10 o un millón. Además, si quieres cambiar algunos estilos, los cambias una sola vez en la hoja css y se cambia en todas las páginas a la vez.
Si utilizas el método de ir añadiendo estilos en cada una de las páginas, vas a repetir los mismo estilos en cada página y si quieres cambiar alguno más adelante, lo vas a tener que hacer página por página. De modo, que utiliza esta forma de añadir estilos para algún estilo ocasional que solo necesites en una página determinada, aunque yo soy más de añadirlo todo en la hoja externa y no dejar nada de estilos en las páginas html.
Veamos todo esto con ejemplos prácticos que es la mejor forma de entenderlo. Además, te recomiendo que todos los capítulos los completes viendo el vídeo.
Puedes colocar los estilos CSS directamente sobre el documento html con las etiquetas <style> </style>
. Dentro de ellas escribiremos todas las propiedades CSS que queramos.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ubicación de las propiedades de CSS</title>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p>Este párrafo y cualquier otro están con un estilo de color rojo.</p>
</body>
</html>
El resultado es que todos los elementos <p>
de html se van a transformar en letra de color rojo gracias a la propiedad css color aplicada a todos los párrafos.
El siguiente sitio donde puedes añadir propiedades css es sobre un elemento html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ubicación de las propiedades de CSS</title>
</head>
<body>
<p style="color:red">Este párrafo y cualquier otro están con un estilo de color rojo.</p>
<p>Este no tiene estilo.</p>
</body>
</html>
El resultado es exactamente el mismo, pero solo afecta al párrafo (u otra etiqueta html en su defecto) al que se le aplica y no a todos los párrafos.
Las dos formas que acabas de ver, son las menos recomendables y debes utilizarlas lo menos posible, mejor si no las utilizas casi nunca, solo para estilos puntuales que no forman parte de la estética general del sitio web.
Para crear una hoja de estilos, crea una página en blanco en tu editor web y guárdala con la extensión de archivo .css. Si tienes dudas sobre esto mira el vídeo o déjame un comentario.
El procedimiento es el mismo, añades los estilos que quieras y enlazas esta hoja con cada página html a la que quieras que se le apliquen los estilos.
En esta página html, se enlaza con la etiqueta link hacia la ruta del directorio donde tienes la hoja css, solo con esto, se aplican todos los estilos que contenga.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ubicación de las propiedades de CSS</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Esto es un párrafo con varios estilos.</p>
<p>Este también los tiene, ya que se aplica a todos los párrafos.</p>
</body>
</html>
Piensa que a cada propiedad CSS le tienes que dar un cierre con un punto y coma, no te olvides.
Estas tres propiedades CSS que estás viendo son para el color de fuente (color
), la familia de fuente, font-family
(el tipo de letra) y el text-align
(alineamiento del texto al centro).
No hay prisa, ya veremos poco a poco todas estas propiedades.
p {
color:red;
font-family:Cambria;
text-align:center;
}
La solución la encontrarás aquí: Haz click aquí.
Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.
Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.
No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.