1 – CSS, Estilos para web

CSS se compone de selectores, propiedades y valores.

Se escribe en ese orden, un texto para el selector, que sirve para definir sobre que elemento vamos a cambiar el aspecto, una apertura de llave { y un cerrar llave } para definir donde empieza y donde termina lo que va a afectar a ese selector y luego las propiedades que vienen configuradas con el nombre de la propiedad, dos puntos y el valor que va a tener esa propiedad, seguido de punto y coma para poder añadir una tras otra distintas propiedades.

El código CSS lo añadimos en algún sitio, tenemos tres opciones para poder añadirlo

1) Código dentro de la etiqueta, La menos elegante

En la siguiente etiqueta <body> añadimos el atributo style, sirve para añadir el estilo a la siguiente etiqueta, en este caso no tenemos que añadir un selector, ya que lo estamos añadiendo directamente sobre la etiqueta, en esta indicamos el color del texto con la propiedad color que se puede definir de varias maneras, una de ella es en exadecimal con #ff00000 indicamos el color rojo.

<body style="color:#ff00000; font-size:32px;"> Hola mundo </body>

Podemos añadir más atributos colocando entre ellos un punto y coma

2) Dentro de la etiqueta HTML

<head> 

<style> 
        body{
color:#ff00000;
}
</style>

</head/

Aconsejado para usos concretos como un envío de email con estilos css, pero no para añadirlo a una página web

3) Capa de diseño, se añade en un archivo aparte llamado también hoja de estilo y el más aconsejable para web.

Hay que indicarle al archivo HTML que tiene que ir a buscar ese archivo/hoja de estilos CSS para aplicarlo a ese documento, eso se hace mediante la etiqueta link dentro de la etiqueta head del documento HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title> mi primera web</title>

    <link href="estilos.css" rel="stylesheet" />
</head

<body>

</body>

</html>

Link tiene un atributo href el cual permite seleccionar la ruta para cargar el archivo css, con rel indicamos que tipo de relación tiene ese archivo con el documento HTML, este es stylesheet una hoja de estilos css.

Deja un comentario