Un poco de CSS para HTML

CSS es un lenguaje de marcas, como HTML, y si HTML servia para dar forma a un documento, el lenguaje CSS sirve para darle estilo. NO aprenderás mucho CSS en el curso de HTML, puedes aprender CSS en su curso, pero de todas formas verás algunas cosas por encima de CSS en el curso de HTML ya que CSS es simple y muy útil, además va cogido de la mano con HTML.

Bueno, al grano, no voy a explicar la sintaxis de forma teórica, simplemente te diré como se utiliza. Además hay 3 formas de insertar CSS en un documento HTML: en el head, en una hoja externa y la tercera y más simple que es la siguiente:

Ya deberías saber que <p></p> se utiliza para insertar párrafo, pues bien harémos los siguiente:

<p style=»color:red;»>Párrafo</p>
Así se ve:

Párrafo

Y eso no es todo, podremos cambiar «red» por el color que queramos; blue, pink: yellow, etc. Aún así los colores son limitados y no podemos elegir justamente la gama de color que queremos, esto es posible con RGB y otras reglas, fáciles de isnsertar peor que se verá más adelante.

También podremos hacer lo siguiente:

<p style=»border: solid black 1px;>Párrafo</p>

Se vería así:

Párrafo

Y igual que «solid black», podremos poner «solid green» o cualquier otro color.
Al final podremos hacer un montón de cosas solo con el style, que es CSS incrustrado.

Al igual que el atributo «color»; podremos usar el atributo «background-color», que hará que en vez de cambiar el color del texto, cambiaremos el color de fondo de la etiqueta <p></p>.

Si te fijas, la estructura es la siguiente: <tag style=»atributo:valor;»>Contenido</tag>

Si te fijas se usa 2 puntos y luego punto y coma, podremos añadir más atributos con sus valores así de fácil:

<tag style=»atributo:valor;atributo2:valor2;»>Contenido</tag>

Te invito que juegues con el CSS y lo uses para modificar no solo la etiqueta <p></p> sino la etiqueta <hr>, <h1></h1>, etc.

Otras cosas que se puede hacer con el style:

<p style=»font-size:200%;»>Párrafo</p>

Se vería así:

Párrafo

Cómo ves puedes cambiar el tamaño del texto. Otra cosa que puedes hacer es alinear el texto, para que se vea más gráficamente añadiré a la vez un borde:

<p style=»border:solid black 2px; text-align:center;»>Párrafo</p>

Y ser vería así:

Párrafo

Luego pudes cambiar «center» por «right»(derecha) o cualquier otro valor.

Hay que cosas que no voy contando porque nos extenderíamos demasiado, por ello debes jugar con lo aprendido, y probar nuevos valores, ya que como ves son muy intutivos, no son más que palabras en inglés que concuerdan con su función.

Úlitmo ejemplo:

Cambiar la fuente de un texto con CSS:

<p style=»font-family:verdana»>Párrafo</p>

Se vería así:

Párrafo

Cómo ves se puede cambiar la fuente de la letra fácilmente, puedes cambiarla por cualquier otra, no solo verdana, obviamente.

Hasta aquí este capítulo.