O que é CSS?

CSS é uma linguagem de estilo, que serve para deixar as linguagens de marcação mais bonitas e apresentáveis. É recomendado que você veja a página sobre HTML antes de seguir com a leitura. Normalmente é usada junto com HTML, mas pode ser usada com outras linguagens, como XML, SVG ou MathML. Assim como HTML, não é considerada uma linguagem de programação.

Ela estiliza a página, adicionando e mudando cores, fontes, posições e tamanhos. Ele pega elementos de HTML (chamados de seletores) e os altera, usando propriedades com valores. Em sua sintaxe, após os seletores abre e fecha chaves, com dentro delas indo as propriedades e os valores. Os valores são separados das propriedades por dois pontos e o par é separado por ponto e vírgula. Um exemplo de código CSS:


            p {
    color: blue;
}

Esse código muda a cor de todos os parágrafos para azul. Os seletores, entre outras opções, podem ser selecionados usando tags de HTML, classes ou IDs. Para adicionar uma classe ou id a um elemento de HTML, você precisa adicionar algum parâmetro ao código da linguagem de marcação, como <p class="paragrafo"> ou <p id="paragrafo1">. Para representar que é uma classe, deve usar ponto e para um ID, deve usar uma hashtag. Essas classes e IDs podem estilizar apenas ele em específico, como:


            .paragrafo {
    color: green;
}

#paragrafo1 {
    color: red;
}

Os códigos CSS podem ir em alguns lugares no HTML, podendo ser em linha, externo ou interno

Em linha


            <!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <p style="color: red;">Parágrafo</p>
    </body>
</html>

Interno


            <!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                color: red;
            }
        </style>
    </head>

    <body>
        <p>Parágrafo</p>
    </body>
</html>

Externo

Obs: para isso, você deve criar um outro arquivo, com a extensão .css e colocar o código CSS dentro dele. Já no HTML fica assim:


            <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <p>Parágrafo</p>
    </body>
</html>

Essa página não tem a intenção de lhe ensinar a usar CSS, mas lhe mostrar como ele funciona e para que ele serve. Caso tenha se interessado e queira saber mais sobre, existem diversos cursos como o da MDN, da W3School e do Curso em Vídeo