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

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!

Criar site HTML/CSS a partir de layout do Photoshop

Olá pessoal que acompanha o blog ou o canal do Youtube. Neste tutorial eu mostro como montar uma página de um site - no caso a home - a partir do layout criado no Photoshop. Para que você possa treinar vou disponibilizar no link a seguir o arquivo do Photoshop com o layout. Note que o layout não é exatamente o mesmo do vídeo porque na época que gravei o tutorial acabei perdendo o arquivo. No entanto, fiz um novo layout com os mesmos elementos do layout do vídeo. Clique aqui para fazer download (link do GOogle Drive) Como o tutorial tem duas partes, seguem os links e os dois vídeos: Parte 1: https://www.youtube.com/watch?v=LVIICbdHBw8

Parte 2: https://www.youtube.com/watch?v=Z6krjd_G688

Tutorial Photoshop: Interface básica [vídeo]

Neste tutorial explico o básico da interface do Photoshop para você que está iniciando os estudos nessa ferramenta de edição e manipulação de imagens. Dê atenção especial à janela camadas, pois é a principal janela do Photoshop. Você precisará dela a todo momento. Chega de delongas. Segue o vídeo.

Link do vídeo no Youtube: https://www.youtube.com/watch?v=NCWBLNM-Meo