CSS: Folha de Estilos Em Cascata

Olá, hoje vamos entender o uso de arquivos css, se você cria uma site html, e nele tem texto e divs que se repetem, acaba sendo árduo o trabalho de ir pagina por pagina, item por item para deixar tudo com o mesmo padrão, com o estilo css tudo se torna mais fácil, pois com uma simples classe se cria uma regra geral para o que for padrão. Veja mais no vídeo, qualquer dúvida deixar nos comentários, inscreva-se no nosso canal e até uma próxima.

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!

HTML – colspan e rowspan

Olá, nesse pequeno tutorial vamos entender o uso de tabelas HTML, mais os atributos colspan e rowspan. Para iniciarmos precisamos de uma base html como essa aqui embaixo:

<!DOCTYPE html>
    <html>
        <head>
            <title> Edutoria </title>
        </head>
    <body>
    </body>
 
   </html>

Em seguida devemos trabalhar a tag table dentro do BODY, declarando assim a criação de uma tabela, devemos entender que tabelas são feitas de linhas e colunas e que para declarar cada uma devemos usar as tags TD para linhas e TR para colunas como exemplo abaixo:

 
<tr>
     <td> Linha 1 Céclula 1</td>
     <td> Linha 1 Céclula 2</td>
     <td> Linha 1 Céclula 3</td>
 </tr>
 <tr>
     <td> Linha 2 Céclula 1</td>
     <td> Linha 2 Céclula 2</td>
     <td> Linha 2 Céclula 3</td>
 </tr>

Continuando no html o devemos encontrar a seguinte código:

<!DOCTYPE>
    <html>
         <head>
             <title> Edutoria</title>
          </head>
 
 <body>
 
     <table>
          <tr>
               <td> Linha 1 Céclula 1</td>
               <td> Linha 1 Céclula 2</td>
               <td> Linha 1 Céclula 3</td>
          </tr>
          <tr>
               <td> Linha 2 Céclula 1</td>
               <td> Linha 2 Céclula 2</td>
               <td> Linha 2 Céclula 3</td> 
         </tr>
         <tr>
               <td> Linha 3 Céclula 1</td>
               <td> Linha 3 Céclula 2</td>
               <td> Linha 3 Céclula 3</td>
         </tr>
      </table>
 
 </body>
 
</html>

Caso você tenha a necessidade de uma borda visível em sua tabela é só acrescentar o atributo border na linha que declara a tabela:

<table border="1">

... Até agora alcançamos uma tabla simples, 3x3 porém necessidades pedem que algumas linhas ou colunas sejam mescladas para chegar em um resultado especifico. com por exemplo criar uma tabela apresentado no vídeo, onde a coluna 1 e 2 na linha 1 se tornam uma só, e na coluna 3 as linhas 1 e 2 mesclam para chegar ao resultado esperado:

capturar

Para mesclarmos duas colunas em uma linha devemos usar a tag Colspan, colocamos ela na linha e coluna inicial e declaramos o número de colunas que ela irá expandir .Para mesclarmos duas linhas em uma coluna devemos usar a tag Rowspan, colocamos ela na linha da coluna que deseja expandir e declaramos o número de linhas que ela irá ocupar como no exemplo abaixo:

 <tr>
       <td colspan="2"> Linha 1 Céclula 1</td>
       <!--<td> Linha 1 Céclula 2</td> -->
       <td rowspan="2"> Linha 1 Céclula 3</td>
 </tr>
 <tr>
       <td> Linha 2 Céclula 1</td>
       <td> Linha 2 Céclula 2</td>
       <!-- <td> Linha 2 Céclula 3</td> -->
 </tr>

O código resultante para a tabela anterior deverá ficar assim:

<!DOCTYPE>
<html>
      <head>
         <title> Edutoria - Tabela HTML </title>
      </head>
 
 <body>
 
     <table border="1">
     <tr>
         <td colspan="2"> Linha 1 Céclula 1</td>
         <!--<td> Linha 1 Céclula 2</td> -->
         <td rowspan="2"> Linha 1 Céclula 3</td>
     </tr>
     <tr>
         <td> Linha 2 Céclula 1</td>
         <td> Linha 2 Céclula 2</td>
         <!-- <td> Linha 2 Céclula 3</td> -->
     </tr>
     <tr>
         <td> Linha 3 Céclula 1</td>
         <td> Linha 3 Céclula 2</td>
         <td> Linha 3 Céclula 3</td>
     </tr>
    </table>
 
 </body>
 
</html>

Simples não? qualquer dúvida deixe nos comentários, não se esqueça de se inscrever no canal Edutoria do YouTube e até uma próxima.