1. Objetivo.
      1. Css (Cascading Style Sheets) é um mecanismo para adicionar estilos a uma página web, aplicado diretamente nas tags HTML ou ficar contido dentro das tags style. Também é possível, adicionar estilos adicionando um link para um arquivo CSS que contém os estilos.
  2. O que é CSS?
      1. Cascading Style Sheets (CSS) é um mecanismo simples para adicionar estilo (por exemplo, fontes, cores, espaçamento) a documentos da web e a tradução para o português : folhas de estilo em cascata.
      2. Com CSS modificamos o comportamento padrão dos tags XHTML, mudando a aparência das páginas.
      3. CSS significa C ascading S tyle S heets.
      4. CSS descreve como os elementos HTML devem ser exibidos na tela, no papel ou em outra mídia.
      5.  CSS economiza muito trabalho . Ele pode controlar o layout de várias páginas da web de uma só vez.
      6. Folhas de estilo externas são armazenadas em arquivos CSS
      7. Documentação oficial do código css...
      8. ..
  3. Sintaxe CSS.
      1. Um conjunto de regras CSS consiste em um seletor e um bloco de declaração:.
        1. Seletor CSS
        2. .
      2. O seletor aponta para o elemento HTML que você deseja estilizar.
      3. O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.
      4. Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.
      5. Várias declarações CSS são separadas por ponto-e-vírgula e os blocos de declaração são cercados por chaves.
      6. item div 2
      7. ..
  4. Atributos globais.
      1. Atributos globais são atributos comuns a todos os elementos HTML; eles podem ser usados ​​em todos os elementos, embora possam não ter efeito em alguns elementos. Veja mais... 
      2. ..
  5. Como adicionar css em um arquivo html.
      1. Este documento foi produzido tomando como referência o documento: CSS how to.  e o documento : Linking Style Sheets to HTML
      2. Uma folha de estilo externa pode ser vinculada a um documento HTML por meio do elemento LINK do HTML : 
        1. <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

    <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">

    <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">

    <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
        2. A tag <LINK> é colocada no documento HEAD . O atributo opcional TYPE é usado para especificar um tipo de mídia - text / css para uma folha de estilo em cascata - permitindo que os navegadores ignorem os tipos de folha de estilo que eles não suportam. Configurar o servidor para enviar texto / css como o tipo de conteúdo para arquivos CSS também é uma boa ideia.
          1. As folhas de estilo externas não devem conter marcas HTML como <HEAD> ou <STYLE> . A folha de estilo deve consistir apenas em regras ou instruções de estilo. Um arquivo que consiste apenas em P { margin: 2em } pode ser usado como uma folha de estilo externa.
        3. A tag <LINK> também possui um atributo opcional MEDIA , que especifica a mídia �  qual a folha de estilo deve ser aplicada. Os valores possíveis são:
          1. screen para apresentação em ecrãs de computador não paginados;
          2. print , para saída para uma impressora;
          3. projection , para apresentações projetadas;
          4. aural,  para sintetizadores de voz;
          5. braille , para apresentação em dispositivos de feedback tátil em braille;
          6. tty , para exibições de células de caracteres (usando uma fonte de tamanho fixo);
          7. tv , para televisores;
          8. all , para todos os dispositivos de saída.
        4. O atributo REL é usado para definir o relacionamento entre o arquivo vinculado e o documento HTML. REL = StyleSheet especifica um estilo persistente ou preferido , enquanto REL = "Alternate StyleSheet" define um estilo alternativo . Um estilo persistente é aquele que sempre é aplicado quando as folhas de estilo estão ativadas. A ausência do atributo TITLE , como na primeira tag <LINK> no exemplo , define um estilo persistente.
        5. Um estilo preferido é aquele que é aplicado automaticamente, como na segunda tag <LINK> no exemplo . A combinação de REL = StyleSheet e um atributo TITLE especifica um estilo preferido. Os autores não podem especificar mais de um estilo preferido.
        6. Um estilo alternativo é indicado por REL = "Alternate StyleSheet" . A terceira tag no exemplo define um estilo alternativo, que o usuário pode escolher para substituir a folha de estilo preferida. Obs: Os navegadores atuais geralmente não têm a capacidade de escolher estilos alternativos.
        7. Um único estilo também pode ser fornecido por meio de várias folhas de estilo:
          1. <LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">

    <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">

    <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
          2. Neste exemplo, três folhas de estilo são combinadas em um estilo "Contemporary" que é aplicado como uma folha de estilo preferencial. Para combinar várias folhas de estilo em um único estilo, deve-se usar o mesmo TITLE com cada folha de estilo.
          3. Uma folha de estilo externa é ideal quando o estilo é aplicado a várias páginas. Com uma folha de estilo externa, um autor pode mudar a aparência de um site inteiro simplesmente mudando um arquivo. Da mesma forma, a maioria dos navegadores armazenará em cache uma folha de estilo externa, evitando atrasos na apresentação da página depois que a folha de estilo for armazenada em cache.

      3. ..
  6. Seletores CSS.
      1. Os seletores CSS são usados ​​para "encontrar" (ou selecionar) os elementos HTML que você deseja estilizar e temos 5 tipos de seletores:
      2. Seletores Simples são divididos em 5 (Seleciona elementos baseado pelo nome, ID e classe).
        1. Seletor de elemento
            1. O seletor de elemento seleciona elementos HTML com base no nome do elemento.
            2. Exemplo:
            3. p {text-align: center; color:red;}.
            4. Toda a tag <p> </p> será alinhada no centro e terá a cor do texto vermelho;
            5. <!DOCTYPE html>
    <html>

    <head>
        <style>
            p {
                text-align: center;
                color: red;
            }
        </style>
    </head>

    <body>

        <p>Every paragraph will be affected by the style.</p>
        <p id="para1">Me too!</p>
        <p>And me!</p>
            6. ..
        2. O seletor de id CSS
            1. O seletor de id usa o atributo id de um elemento HTML para selecionar um elemento específico. O id de um elemento é único dentro de uma página, então o seletor de id é usado para selecionar um elemento único! Para selecionar um elemento com um id específico, escreva um caractere hash (#), seguido pelo id do elemento.
            2. Exemplo 1:
            3. #id1 { text-align: center; color: red;}
            4. Toda tag que tiver o id = "id1" será linhada no centro e a cor do texto será vermelha.
            5. <!DOCTYPE html>
    <html>

    <head>
        <style>
            #id1 {
                text-align: center;
                color: red;
            }
        </style>
    </head>

    <body>

        <p id="id1">Hello World!</p>
        <p>This paragraph is not affected by the style.</p>

    </body>

    </html>
            6. ..
        3. O seletor de classe CSS.
            1. O seletor de classe seleciona elementos HTML com um atributo de classe específico. Para selecionar elementos com uma classe específica, escreva um ponto (.), seguido do nome da classe.
            2. Exemplo 1:
            3.  .center { text-align: center; color: red; }
            4. Toda tag que tiver  o atributo class = "center" será alinhado no centro e a cor do texto será vermelho.
            5. <!DOCTYPE html>
    <html>

    <head>
        <style>
            .center {
                text-align: center;
                color: red;
            }
        </style>
    </head>

    <body>

        <h1 class="center">Red and center-aligned heading</h1>
        <p class="center">Red and center-aligned paragraph.</p>

    </body>

    </html>
            6. Exemplo 2:
            7. Neste exemplo, apenas os elementos <p> com class = "center" serão alinhados ao centro. 
            8. <!DOCTYPE html>
    <html>

    <head>
        <style>
            p.center {
                text-align: center;
                color: red;
            }
        </style>
    </head>

    <body>

        <h1 class="center">This heading will not be affected</h1>
        <p class="center">This paragraph will be red and center-aligned.</p>

    </body>

    </html>
            9. ..
            10. ..
        4. O seletor de agrupamento CSS:
            1. O seletor de agrupamento permite definir propriedades comuns de várias tags separadas por virgula..
              1. Exemplo:
              2. <!DOCTYPE html>
    <html>

    <head>
        <style>
            h1,
            h2,
            p {
                text-align: center;
                color: red;
            }
        </style>
    </head>

    <body>

        <h1>Hello World!</h1>
        <h2>Smaller heading!</h2>
        <p>This is a paragraph.</p>

    </body>

    </html>
              3. ..
          1. O seletor universal CSS.
              1. O seletor universal (*) seleciona todos os elementos HTML na página.
              2. Exemplo:
              3. * { text-align: center; color: blue; }
              4. O * informa que todos os textos do documento serão alinhados no  centro e terá cor azul.
              5. <!DOCTYPE html>
    <html>

    <head>
        <style>
            * {
                text-align: center;
                color: blue;
            }
        </style>
    </head>

    <body>

        <h1>Hello world!</h1>

        <p>Every element on the page will be affected by the style.</p>
        <p id="para1">Me too!</p>
        <p>And me!</p>

    </body>

    </html>
              6. ..
              7. ..
        5. ..
    1. Seletores combinadores.
        1. Um seletor CSS pode conter mais de um seletor simples.
          Entre os seletores simples, podemos incluir um combinador.
          Existem quatro combinadores diferentes em CSS:
        2. Seletor descendente (espaço);
          1. O seletor descendente corresponde a todos os elementos que são descendentes de um elemento especificado.
            O exemplo a seguir seleciona todos os elementos dentro dos elemento <p> e dentro dos elementos <div>
            1. Exemplo:
              1. <!DOCTYPE html	>
    <html	>

    <head	>
        <style	>
            div p {
                background-color: yellow;
            }
        </style	>
    </head	>

    <body	>

        <h2	>Descendant Selector</h2	>
        <p	>The descendant selector matches all elements that are descendants of a specified element.</p	>

        <div	>
            <p	>Paragraph 1 in the div.</p	>
            <p	>Paragraph 2 in the div.</p	>
            <section	>
                <p	>Paragraph 3 in the div.</p	>
            </section	>
        </div	>

        <p	>Paragraph 4. Not in a div.</p	>
        <p	>Paragraph 5. Not in a div.</p	>

    </body	>

    </html	>
        3. Seletor filho (>);
          1. O seletor filho seleciona todos os elementos que são filhos de um elemento especificado.
            O exemplo a seguir seleciona todos os elementos filhos de um elemento:
            1. Exemplo
              1. <!DOCTYPE html>
    <html>

    <head>
        <style>
            div>p {
                background-color: yellow;
            }
        </style>
    </head>

    <body>

        <h2>Child Selector</h2>
        <p>The child selector (>) selects all elements that are the children of a specified element.</p>

        <div>
            <p>Paragraph 1 in the div.</p>
            <p>Paragraph 2 in the div.</p>
            <section>
                <p>Paragraph 3 in the div.</p>
            </section> <!-- not Child but Descendant -->
            <p>Paragraph 4 in the div.</p>
        </div>

        <p>Paragraph 5. Not in a div.</p>
        <p>Paragraph 6. Not in a div.</p>

    </body>

    </html>
        4. Seletor irmão adjacente (+);
          1. O seletor de irmãos adjacentes seleciona todos os elementos que são irmãos adjacentes de um elemento especificado.
            Os elementos irmãos devem ter o mesmo elemento pai e "adjacente" significa "imediatamente a seguir".
            O exemplo a seguir seleciona todos os elementos que são colocados imediatamente após os elementos div:
            1. Exemplo:
              1. <!DOCTYPE html >
    <html >
    <head >
    <style >
    div + p {
    background-color: yellow;
    }
    </style >
    </head >
    <body >

    <h2 >Adjacent Sibling Selector</h2 >
    <p >The adjacent sibling selector (+) selects all elements that are the adjacent siblings of a specified element.</p >

    <div >
    <p >Paragraph 1 in the div.</p >
    <p >Paragraph 2 in the div.</p >
    </div >

    <p >Paragraph 3. Not in a div.</p >
    <p >Paragraph 4. Not in a div.</p >

    </body >
    </html >
        5. Seletor irmão geral (~)
          1. O seletor irmão geral
            1. O sele
                  1. seleciona todos os elementos que são irmãos de um elemento especificado. O exemplo a seguir seleciona todos os elementos <p> que são irmãos dos elementos <div>:
                    1. Exemplo:
                      1. <!DOCTYPE html>
    <html>

    <head>
        <style>
            div~p {
                background-color: yellow;
            }
        </style>
    </head>

    <body>

        <h2>General Sibling Selector</h2>
        <p>The general sibling selector (~) selects all elements that are siblings of a specified element.</p>

        <p>Paragraph 1.</p>

        <div>
            <p>Paragraph 2.</p>
        </div>

        <p>Paragraph 3.</p>
        <code>Some code.</code>
        <p>Paragraph 4.</p>

    </body>

    </html>

          3. ..
      1. Seletor Pseudo classes CSS
          1. O objetivo da pseudo classe é  definir um estado especial de um elemento.  Veja mais...
          2. Sintaxe da pseudo classe:
            1. selector:pseudo-class {
    property: value;
    }
          3. Pseudo-classes âncora.
            1. Os links podem ser exibidos de diferentes maneiras:
              1. Exemplo de como definir o estilo de um elemento quando o usuário passa o mouse sobre ele. 
                1. <!DOCTYPE html>
    <html>

    <head>
        <style>
            /* unvisited link */
            a:link {
                color: red;
            }

            /* visited link */
            a:visited {
                color: green;
            }

            /* mouse over link */
            a:hover {
                color: hotpink;
            }

            /* selected link */
            a:active {
                color: blue;
            }
        </style>
    </head>
    div 10
                    

                  <body>

        <h2>CSS Links</h2>
        <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
        <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
        <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

    </body>

    </html>
                2. .
              2. .
            2. Estilizar links visitados e não visitados de maneira diferente.

            3. Defina o estilo de um elemento quando ele receber o foco..

            4. Pseudo classes e classes CSS
              1. As pseudo classes podem ser combinadas com classes CSS, no exemplo a seguir  quando você passa o mouse sobre o link ele muda de cor:
                1. Exemplo 1:
                  1. <!DOCTYPE html>
    <html>

    <head>
    <style>
        a.highlight:hover {
        color: #ff0000;
        }
    </style>
    </head>

    <body>

    <h2>Pseudo-classes and CSS Classes</h2>
    <p>When you hover over the first link below, it will change color:</p>

    <p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
    <p><a href="default.asp">CSS Tutorial</a></p>

    </body>

    </html>
                  2. .
                2. .
              2. O evento :houver é útil quando precisamos destacar o foco de um quadro de informação usando a tag <div>
                1. Exemplo 01:
                  1. <!DOCTYPE html>
    <html>

    <head>
    <style>
        div {
        background-color: green;
        color: white;
        padding: 25px;
        text-align: center;
        }

        div:hover {
        background-color: blue;
        }
    </style>
    </head>

    <body>

    <p>Mouse over the div element below to change its background color:</p>

    <div>Mouse Over Me</div>

    </body>

    </html>
                  2. .
                2. Exemplo 02 mostra uma ajuda quando o mouse passe em cima do texto.
                  1. <!DOCTYPE html >


    <!DOCTYPE html>
    <html>

    <head>
    <style>
        p {
        display: none;
        background-color: yellow;
        padding: 20px;
        }

        div:hover p {
        display: block;
        }
    </style>
    </head>

    <body>
    div 10
                    

                      <div>Passe o mouse sobre mim para mostrar o elemento p
        <p>Exemplo do evento div:hover </p>
    </div>

    </body>

    </html>
              3. O pseudo evento input:focus é util para destacar o curso do campo que recebe o foco.
                1. Exemplo:.
                  1. <!DOCTYPE html>
    <html>

    <head>
    <style>
        input:focus {
        background-color: yellow;
        }
    </style>
    </head>

    <body>

    <p>Click inside the text fields to see a yellow background:</p>

    <form>
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname">
    </form>

    </body>

    </html>
                    .
            5. ..
        1. Tree view
            1. How TO - Tree View
            2. ..
        2. Formulários
            1. Formulários responsivos
              1. Exemplo 01:  Formulário com duas colunas.
                1. A coluna 01 deste formulário está alinhado a esquerda e ocupa 25% da largura da tela.
                2. A coluna 02 deste formulário está alinhado a esquerda e ocupa 75% da largura da tela.
                3. Este link possui a versão local do exemplo 01 com as minhas adaptações. 
                4. Exemplo 01 separado do site w3schools.com...

              2. Exemplo 02: Como criar um formulário pop-up.
                1. Possui 2 campos sendo o e-mail e a senha do usuário e não permite fechar com o botão close.
                2. Exemplo 02 separado do site w3schools.com...

              3. Como criar um formulário responsivo:
                1. Etapa 1) Adicionar HTML
                  1. Use um elemento <form > para processar a entrada. Você pode aprender mais sobre isso no tutorial de PHP.
                    Adicione entradas (com um rótulo correspondente) para cada campo e envolva um elemento <div > em torno de cada rótulo e entrada para definir uma largura especificada com CSS .
                  2. .
              4. Como criar um formulário de login:
                1. Exemplo 01:
                  1. ..
                  2. .
                2. Exemplo 02 - Como criar um formulário de login modal:
                  1. .
              5. Como criar um formulá com 3 colunas de grupo de dados.
                1. Exemplo01: Formulário de check-out responsivo

              6. Como fazer - formulário com ícones.
                1. Exemplo 01.
              7. Como fazer - formulário embutido.
                1. Exemplo 01.

              8. Como - Limpar campo de entrada.
                1. Exemplo 01.
                  1. .
                2. Exemplo 02.

                3. .
              9. Como - Ocultar setas do número de entrada.
                1. Exemplo 01.

              10. Copiar texto para a área de transferência.
                1. .
              11. Como criar um formulário de pesquisa animado.

              12. Como - Botão de pesquisa.
                1. Exemplo 01.
                2. Exemplo 02.

              13. Como - Campo de entrada em um menu.
                1. Exemplo 01.
                2. Exemplo 02. - Campo de entrada responsivo na Navbar.
              14. Como - Formulário de Login em um Menu.
                1. Exemplo 01.
                2. Exemplo 02.
              15. Como - Caixa de seleção personalizada.
                1. Exemplo 01.
                2. Exemplo 02.
                3. Exemplo 03.

              16. Como - Caixa de seleção personalizada.
                1. Exemplo 01.
                2. Exemplo 02.
              17. Como - Exibir texto quando a caixa de seleção estiver marcada.
                1. Exemplo 01
            2. ..
        Referências na produção deste documento
        1. Geradores de códigos CSS prontos e gratuitos
        2. Especificação CSS
        3. https://www.w3schools.com/css
        4. Web Design Group
        5. CSS Website Layout
        6. Barra de navegação
        7. Formulários
          1. Modal
          2. Lista de imagens
          3. Tabs
          4. Tab vertical
        8. Consultas de mídia CSS
        9. Propriedade de layout de tabela CSS
        10. Cores CSS
        11. Referência css
          1. Seletores
        12. Herança CSS.
        13. How To Create A Loader
        14. CSS align-items Property
        15. Fontes CSS
            1. Como mudar as fontes do Browser
            2. Famílias de fonte.
            3. Fontes CSS.
            4. ..
            5. ..
            6. ..
        16. Variáveis CSS
            1. Função var()
            2. Variáveis de substituição CSS
            3. .
            4. .
            5. ..
        17. Tabela CSS
            1. Table Borders
            2. Tamanho da tabela CSS.
            3. Alinhamento da Tabela CSS.
            4. Estilo de Tabela CSS.
            5. Tabela Responsiva CSS