CSS Externo

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 8 de 76.

CSS Externo é um método de adicionar estilos CSS a um documento HTML, colocando-os em um arquivo CSS separado e vinculando esse arquivo ao documento HTML usando a tag <link>. Esta abordagem permite aplicar os mesmos estilos a várias páginas HTML, tornando mais fácil manter e atualizar o design do seu site. O CSS Externo é ideal para grandes projetos onde a consistência e a eficiência são cruciais.

Veja como usar CSS externo:

Crie um arquivo CSS (por exemplo, styles.css) com suas regras CSS:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. Vincule o arquivo CSS ao seu documento HTML adicionando uma tag <link> na seção <head>:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Neste exemplo, a tag <link> conecta o arquivo styles.css ao documento HTML. O atributo rel especifica a relação entre o documento HTML e o arquivo vinculado (folha de estilo), e o atributo href especifica o caminho para o arquivo CSS.

Desafio

Fácil

Você recebeu arquivos HTML e CSS (index.html e styles.css), adicione uma tag link no arquivo HTML para conectar os arquivos e adicionar os estilos ao arquivo HTML!

Folha de consulta

O CSS externo permite que você coloque estilos CSS em um arquivo separado e o vincule a documentos HTML usando a tag <link>.

Crie um arquivo CSS com seus estilos:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

Vincule o arquivo CSS na seção <head> do HTML:

<link rel="stylesheet" href="styles.css">

O atributo rel especifica a relação (stylesheet) e o href especifica o caminho para o arquivo CSS.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>