Introdução ao CSS

CSS, sigla para "Cascading Style Sheets" (Folhas de Estilo em Cascata), é uma linguagem fundamental para a web, usada para controlar a apresentação e o design de páginas da internet. Ela atua em conjunto com o HTML, que define a estrutura do conteúdo, permitindo assim que os desenvolvedores configurem o estilo, o layout e a aparência de um site.

O que é CSS?

CSS é uma linguagem de marcação, amplamente utilizada com HTML ou XHTML, e representa diversas possibilidades para a formatação. O CSS ajuda a editar, alinhar, remover e trabalhar no espaço entre elementos de uma página.

O que o CSS pode fazer?

O CSS é uma ferramenta poderosa que oferece controle preciso sobre o design da web, permitindo a criação de layouts responsivos e aprimorando a experiência do usuário. Estes são apenas conceitos e exemplos básicos, e a linguagem é muito mais rica e complexa, permitindo uma personalização extensa de páginas da web.

Seletor

É o elemento HTML ao qual você deseja aplicar estilos. Pode ser uma tag HTML, uma classe ou um ID.

Exemplo de seletores

p {
    /* Estilos para parágrafos */
}
h1 ao h6 {
    /* Estilos para títulos */
}
nav {
    /* Estilos para área de navegação */
}
img {
    /* Estilos para imagens */
}
div {
    /* Estilos para caixas de textos */
}

Propriedades

São atributos que definem os estilos, como cor, fonte, margens, entre outros.

Exemplo de propriedades

p {
    color: blue; /* Define a cor do texto para azul */
    font-size: 16px; /* Define o tamanho da fonte */
}
h1 ao h6 {
    color: red; /* Define a cor do texto como vermelha */
    font-family: arial; /* Define o estilo da fonte */
}
nav {
    background-color: pink; /* Define a cor de fundo da área de navegação como rosa */
    border-radius:50px; /* Deixa as bordas do nav arredondadas*/
}
img {
    width: 100px; /* Define a largura da imagem */
    height:50px; /* Define a altura da imagem*/
}
div {
    width: 100px; /* Define a largura da caixa de texto*/
    height:50px; /* Define a altura da caixa de texto*/
}

Valores

São os valores que você atribui às propriedades. Eles variam dependendo da propriedade, como cores, tamanhos, etc.

Exemplo de Valores

p {
    font-family:'arial' sans-serif /* Define a família de fontes*/
    margin: 16px; /* Define as margens de 16 pixels */
}
h1 ao h6 {
    color: red; /* Define o color como vermelho(red) */
    font-family: arial; /* Define a família de fontes */
}
nav {
    background-color: pink; /* Define a cor do background */
    border-radius:50px; /* Deixa o quanto a borda vai ser arredondada */
}
img {
    width: 100px; /* Define a largura da imagem*/
    height:50px; /* Define a altura da imagem*/
}
div {
    width: 100px; /* Define a largura da caixa de texto */
    height:50px; /* Define a altura da caixa de texto*/
}

Classes e IDs

São usados para direcionar estilos a elementos específicos. Classes são precedidas por um ponto (.) e IDs por um hash (#).(isso nas tags no html)

Exemplo de Classes e IDs

.button {
    /* Estilos para elementos com a classe "button" */
}
#areaLogin {
    /* Estilos para o elemento com o ID "areaLogin" */
}

Pseudo-classes e pseudo-elementos

Permitem estilizar elementos em estados específicos, como links não visitados (:hover) ou o primeiro parágrafo de um elemento (::first-line).

Exemplo de Pseudo-classes e pseudo-elementos

a:hover {
    /* Estilos para links quando o cursor passa por cima */
}
p::first-line {
    /* Estilos para a primeira linha de um parágrafo */
}