Uma forma fácil e rápida de se escrever um código em CSS

por Luiz 24.10.17 15:57

Uma forma fácil e rápida de se escrever CSS

Uma forma fácil e rápida de se escrever um código em CSS AbXEgV5

Google escreveu:Cascading Style Sheets (CSS) é um simples mecanismo para adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web. Em vez de colocar a formatação dentro do documento, o CSS cria um link para uma página que contém os estilos. Mas também pode ser escrito em forma de estilos inline ou dentro das tags de estilo.
Adaptado.

Um código crucial no Fórum dos Fóruns é o CSS. Usamos ele aqui basicamente para todas as questões que envolvem um mínimo de JavaScript ou que estão relacionadas à aparência do fórum. Como já devemos saber, é o CSS que cria e estiliza as nossas páginas HTML.

O Fórum dos Fóruns, sem o CSS, por exemplo, seria muito mais ~~bonito~~ feio, veja:

Spoiler:

Criando nossos estilos usando CSS e as ferramentas do desenvolvedor

Muitos de nós hoje, para criar nossos belíssimos códigos CSS com a melhor perfeição possível usamos as ferramentas do desenvolvedor, que estão sempre presentes nos navegadores mais modernos, como o Chrome ou o Firefox.

Veja a seguir o passo a passo de como criar seus próprios estilos!

Abrindo as ferramentas do desenvolvedor

Vamos criar nosso primeiro estilo em algum site. No exemplo a seguir, estaremos estilizando alguns elementos da página inicial do Fórum dos Fóruns.
Assim que chegarmos à página que queremos editar, devemos clicar em F12.

Selecionando o elemento

Assim que abrir as ferramentas do desenvolvedor — pressionando a tecla F12, como mencionado antes —, clique no botão de seta (veja) e posicione o cursor acima do elemento que quer estilizar (e em seguida clique com o botão direito), conforme mostrado na captura de tela a seguir:

Uma forma fácil e rápida de se escrever um código em CSS 8sOrWMZ

(Clique na imagem para expandir)

Criando os seletores

Assim que selecionar o elemento, como fizemos na imagem acima, crie um novo estilo, clicando no botão de adição ( + ), que pode ser encontrado na coluna dos estilos:

Uma forma fácil e rápida de se escrever um código em CSS QFVAES2

(Clique na imagem para expandir)

Assim, você poderá criar os seus próprios estilos para aquele elemento selecionado. Feliz

Lembre-se que você poderá usar seus próprios seletores também.

Aplicando as propriedades

Para criar os estilos e aplicar as propriedades, é só clicar um pouco depois da chave de abertura do bloco de estilos para inserir uma nova linha de estilo:

Uma forma fácil e rápida de se escrever um código em CSS PwSrSYa

(Clique na imagem para expandir)

Você pode repetir este processo quantas vezes quiser.

Salvando os estilos

Após estilizar todos os elementos que quiser, basta ir à Folha de Estilos que foi criada por você, em sua estilização. Para isso, basta clicar no link inspector stylesheet, que irá aparecer em qualquer estilo criado por você, como mostrado abaixo:

Uma forma fácil e rápida de se escrever um código em CSS NBMK8vl

(Clique na imagem para expandir)

No nosso exemplo, o código gerado foi este:

Código:: em.fa.fa-magic.desc-icon { background-color: #3e9ad2; color: #f35125; border-radius: 0px; box-shadow: inset 2px 2px #000; transform: rotateX(-50deg) scale(2); } em.fa.fa-refresh.desc-icon { transform: rotate(90deg) translateY(-50px); background-color: #444; border-radius: 20px; }

Criando códigos diretamente pela Folha de Estilo das ferramentas de desenvolvimento

Lembrando que se você quiser editar seu código de maneira instantânea, você pode usar a folha de estilo das ferramentas de desenvolvimento. Para isso:

Clique no símbolo de adição, conforme mostrado na imagem abaixo:

(Clique na imagem para expandir)
Clique no link "inspector stylesheet":

(Clique na imagem para expandir)
Edite o CSS de maneira direta à seu gosto:

(Clique na imagem para expandir)

Questões frequentes

Muitos de nós, ainda não decoramos todas as propriedades ou cores hexadecimal ou em outros formatos.
Aqui estão algumas dicas! Piscada

Encontrando uma cor hexadecimal

Se você quiser escolher uma cor de fundo em hexadecimal, mas você não decorou todos os milhares de possibilidades, você pode abrir a ferramenta disponibilizada pelo Google Chrome:

Uma forma fácil e rápida de se escrever um código em CSS UqgLVzT

(Clique na imagem para expandir)

Conhecendo tudo sobre o CSS

Se você quiser saber sobre mais propriedades ou seletores do CSS, não se esqueça de visitar:

Referência da Mozilla: clique aqui.
Almanaque de propriedades do CSS Tricks: clique aqui.

Você também pode conferir o guia completo da linguagem de estilos CSS, na MDN:

Acessar o guia completo de CSS na Mozilla Developer Network.