INICIO

INTRODUCCIÓN AL CSS PARA NOVATOS

En nuestro curso online de desarrollo web ya hemos aprendido qué es una web, qué es HTML y hemos visto un ejemplo avanzado de HTML.

Con todo esto, hemos estado haciendo pruebas en nuestro editor de código y hemos visto los resultados en el navegador web.

Y eso está muy bien.

Pero solo hemos conseguido construir una página web muy básica, que tiene solo colores blanco y negro.

Tiene tamaños de texto que no nos gustan, ni tampoco la fuente, ni tampoco la forma en que está todo estructurado.

Esto es una pantalla, podemos jugar más.

Así llevamos lo que hemos hecho hasta ahora:

ejemplo-html

Ahora vamos a entrar poco a poco en la estética.

¿Qué es CSS? | Maquetación Web

Para conseguir nuestro objetivo, vamos a recurrir a un nuevo lenguaje.

Recordamos:

Vale.

Nota: Las siglas CSS vienen del inglés Cascading Style Sheets - "Hojas de estilo en cascada".

Bien, pero…

¿Cómo integrar CSS con un documento HTML?

Es muy sencillo.

Sí… pero, ¿cómo?

Pues empezamos por crear un nuevo archivo en nuestro editor de código.

Barra de herramientas: Clic en Archivo > Clic en Nuevo

Se abrirá un archivo vacío.

Vamos a colocar esto:

body{
background-color:tomato;
}

Ahora guardamos el archivo en la misma carpeta en la que hemos guardado el documento HTML.

¿De verdad tiene que guardarse en la misma carpeta que el archivo HTML?

Sí. En la misma carpeta.

¿Y qué extensión/formato/tipo?

Pues como es lenguaje CSS, usamos la extensión .css

¿Y qué nombre?

El que quieras. Por ejemplo: ropa-del-cocodrilo.css

como-hacer-web-5

Perfecto.

Ahora tenemos creado el archivo CSS.

Falta incluirlo dentro del documento HTML.

Incluir el documento CSS en el HTML

Lo que estamos haciendo es decirle al navegador web que cuando renderice la página HTML, abra también el archivo CSS para ver qué estilos usar.

Esto, como es información para el navegador, y no para el usuario, lo pondremos en el bloque <head> de nuestro documento.

Del documento que ya teníamos abierto anteriormente del capítulo anterior.

<html>
<head>
<title>Cocodrilolandia</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./ropa-del-cocodrilo.css">
</head>
<body>
    <div>
        <h1>Mi primera web</h1>
[...]

Y ya está listo.

Ya hemos creado el fichero CSS y ya lo hemos integrado en nuestro documento HTML.

Si has hecho todo bien, al actualizar la web en tu navegador, deberías estar viendo esto:

curso-web-css

Como ves, el navegador ha leído lo que hemos dicho en la hoja de estilos.

body{
background-color:tomato;
}

Hemos dicho que al bloque <body> se le asigne un background-color (color de fondo en inglés), que sea el tomato (color tomate).

¿Qué otras cosas se pueden hacer con CSS?

Todo lo que ya estás viendo en otras webs.

Qué bien. Todo eso lo aprenderemos paso a paso.

¿Qué estructura tiene un documento CSS?

Su nombre hoja de estilo en cascada lo dice todo.

Son instrucciones en cascada, una debajo de otra.

CSS usa selectores y propiedades.

Así:

selector{
propiedad:valor;
}

A tener en cuenta:

Perfecto.

¿Cuántos selectores y propiedades puedo cambiar al mismo tiempo?

Todos los que quieras, en forma de cascada -uno debajo del otro-.

Por ejemplo, vamos a editar el documento CSS que tenemos abierto, y vamos a convertirlo en esto:

body{
background-color:tomato;
}

div{
background-color:white;
border:2px solid black;
}

strong{
color:green;
}

a{
color:white;
background-color:tomato;
}

Y esto es lo que observaremos en pantalla al recargar la página.

aprender-css

Naturalmente, es muy feo.

Pero ya sabemos cómo funciona CSS y para qué sirve.

A partir de ahora nuestra tarea es aprender a usar los selectores y las cientos de propiedades que existen, para jugar con ellas y hacer una web fantásticamente interesante.

Has aprendido la parte más importante del desarrollo web.

Ahora solo tienes que practicar para conocer a fondo el uso de HTML y cómo modificar sus estilos con CSS.

Siguiente capítulo: Muy pronto.