Ubicación de estilos CSS e introducción - Curso de CSS3 básico - Capítulo 1

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.

¿Qué podemos hacer con CSS?

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!

¿Dónde se ubican las propiedades CSS?

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.

Página HTML 

<!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>

Resultado en el navegador

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.

Aplicando estilos CSS a un párrafo html

El siguiente sitio donde puedes añadir propiedades css es sobre un elemento html.

Página 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>

Resultado en el navegador

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.

Aplicando estilos CSS a un párrafo html

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.

Cómo crear y enlazar una hoja de estilos CSS

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.

Página HTML 

<!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>

Hoja de estilos CSS

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.

CSS 

p {
    color:red;
    font-family:Cambria;
    text-align:center;
}

Estilos de CSS en hoja externa

Ejercicios de CSS

  1. Crea un estilo de párrafo con color azul directamente en el head de una página html con 3 párrafos. Este estilo se aplicará a los 3.
  2. Aplica el mismo estilo de color azul directamente sobre un solo párrafo, los otros dos deben quedar sin estilo.
  3. Aplica el mismo estilo a los tres párrafos pero desde una hoja css externa.

La solución la encontrarás aquí: Haz click aquí.

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    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.