Portal CSS Properties!

A linguagem CSS é escrita em Regras que são conjuntos de propriedades e valores.

Um dos grandes desafios para não falantes da lingua inglesa é saber o que cada propriedade e valor significam em português. Essa página servirá como um guia para te auxiliar a lembrar o significado das palavras e como elas afetam os elementos HTML.

Propriedades de dimensões: Largura e Altura

.caixa--vermelha {
            width:;
            height:;
        }

Propriedades de Fontes/Caracteres

.paragrafo {
            color:;
            font-family:;
            font-size:;
            font-weight:;
            line-height:;
            text-decoration: ;
            font: ;
        }
Altere o código acima e veja como eu sou modificado 😁.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, sint cupiditate reiciendis mollitia harum rerum perferendis odio quibusdam. Eaque possimus sunt, at incidunt eos voluptatibus fugiat amet sit quae expedita.

Propriedades de Bordas

.caixa--azul {
            border-color:;
            border-width:;
            border-style:;
            border:;
            border-top-left-radius: ;
            border-top-right-radius: ;
            border-bottom-left-radius: ;
            border-bottom-right-radius: ;
            border-radius: ;
        }

Propriedades do Box-Model: Margin e Padding

.quadro--esquerdo {
        padding-top:;
        padding-right:;
        padding-bottom:;
        padding-left:;  
        padding:;  
    
        margin-top:;
        margin-right:
        margin-bottom:;
        margin-left:;
        margin:;
    }
                        
.quadro--direito {
        padding-top:;
        padding-right:;
        padding-bottom:;
        padding-left:;
        padding:;  
    
        margin-top:;
        margin-right:
        margin-bottom:;
        margin-left:;
        margin:;
    }

Propriedades do Box-Model: Box-Sizing

Uma propriedade muito importante, define como o tamanho final dos elementos HTML é calculado.

Por padrão, o tamanho final do elemento é calculado somando largura e altura com padding e bordas, esse é comportamento do valor content-box. Essa maneira de calcular o tamanho final dos elementos torna difícil prever qual tamanho o elemento terá nas páginas, de modo que muitos desenvolvedores preferem o comportamento do valor box-sizing, onde padding e bordas não são somados ao tamanho final do elemento.

.card--esquerdo {
        border-width:;
        padding:;  
        box-sizing:;  
        width:;
        height:;
    }
                        
.card--direito {
        border-width:;
        padding:;  
        box-sizing:;  
        width:;
        height:;
    }

Curso JavaScript Completo

Lorem ipsum dolor sit amet consectetur adipisicing elit. In, natus beatae excepturi dicta cupiditate voluptate eveniet repellat facilis! Saepe quia dolore unde reprehenderit sint accusantium nam dignissimos nostrum ullam eaque.

Curso JavaScript Completo

Lorem ipsum dolor sit amet consectetur adipisicing elit. In, natus beatae excepturi dicta cupiditate voluptate eveniet repellat facilis!.