Introducción a CSS

CSS es una tecnología utilizada en entornos web, sus siglas significan Cascading Style Sheet, cuya traducción ofrece dos datos de valor, el primero es el estilo, CSS es la tecnología que se encarga de dar estilos a una web, es decir, colores, ordenar los elementos, tamaños de letra, tipos…etc. El otro término relevante es «cascading», se refiere a que los estilos se interpretan de manera descendente, siempre se impone el más reciente.

CSS es una tecnología sujeta a los estándares de la W3C, actualmente se trabaja con CSS3.

CSS se implementa sobre elementos HTML, y existen varios modos de hacerlo:

Definir estilos en el propio código HTML: se utiliza la palabra «style» dentro de la etiqueta HTML

<div style="color:red">Texto de color rojo</div>

Uso de estilo agrupados en la cabecera de la web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      .coloreado { color: red; font-family: Verdana; }
    </style>
    <title>Document</title>
</head>
<body>
    <div id="coloreado">Texto de color rojo y con tipografía verdana</div>
</body>
</html>

Enlazar el HTML con hojas de estilo (.css)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div id="coloreado">Texto de color rojo</div>
</body>
</html>

Styles.css:

.coloreado { color: red; font-family: Verdana; }