Método ‘linkado’ para vincular o CSS ao HTML

28/11/2016 | Destaque, Front-end, HTML, Webdesign

Este vídeo faz parte de uma série de vídeos de CSS básico que gravei para explicar como utilizar a linguagem CSS em conjunto com o HTML. Hoje vamos aprender a vincular um arquivo de estilos CSS ao HTML, para deixar o código mais limpo e claro. O objetivo é criar uma regra em CSS para deixar um frase dentro de um div, que está no HTML, na cor vermelha. O código base para acompanhar o tutorial é o seguinte:
<html>
    <head>
        <title>Curso CSS</title>
        <style type="text/css">
            .classeTexto {color:blue;}
        </style>
        
    </head>
    <body>
        <div style="color:green;">Texto com CSS inline</div>
        <div class="classeTexto">Texto com CSS incorporado</div>
    </body>
</html>
Para darmos início devemos ter na mesma pasta que o arquivo .html um arquivo .css que nesse caso vou chamar de estilos.css, nele definiremos classes nas quais serão as regras de estilo para o html. Primeiramente, escreva o código que vai efetuar o link entre o HTML e o CSS dentro da tag <head> do seu arquivo HTML.
 <link rel="stylesheet" type="text/css" href="estilos.css" />
Em seguida, inclua no HTML a seguinte linha de código, que será o <div> que receberá a classe para a qual iremos criar uma regra no CSS (os desenvolvedores chamam essa regra de 'seletor'):
<div>Texto com CSS linkado.</div>
Com esse link feito e arquivo criado devemos abrir o .css e definir seus atributos, nesse caso criaremos a classe "classeTextoVermelho" :
.classeTextoVermelho {
	color:red;
}
Para finalizar, devemos ir no nosso html e dizer em que local esse atributo será usado. Nesse caso vamos aplicar a classe no <div> que criamos anteriomente.
<div class="classeTextoVermelho">Texto com CSS linkado.</div>
Pronto. Aprendemos a linkar o CSS ao HTML. Qualquer dúvida, pode deixar nos comentários e não se esqueça de inscrever-se no nosso canal. Até a próxima!

Seja o primeiro a comentar.

Adoraria ler seu comentário aqui!

Responderei assim que possível.

Categorias