Criou um website, mas alguns pormenores estéticos necessitam de ser resolvidos? Não está a conseguir mudar certas cores? Como personalizar o seu website? Estas são algumas das perguntas que serão esclarecidas neste artigo. Conheça aqui os códigos básicos CSS que poderão ajudar a resolver alguns dos problemas do seu website!

O que é CSS?

Para mim, quando se constrói um website, falar de CSS (Cascading Style Sheets) é o mesmo que organizar e decorar uma casa. Não é inteiramente obrigatório, mas torna o seu espaço único, a seu gosto e organizado conforme deseja.

Falo sim de códigos que são colocados no website. No entanto, não é motivo para desistir já! Verá que é mais simples do que parece.

Para que servem os códigos CSS?

Quando comecei a construir websites não dava muita importância, pois quando se compra um tema para utilizar no WordPress, à partida já vem preparado para ser editado facilmente. No entanto, à medida que fui fazendo websites, os códigos CSS foram tornando-se muito úteis! Hoje em dia são essenciais para transportar os meus trabalhos de web design.

São considerados códigos de estilo, compostos por “camadas” e utilizados para definir a apresentação nas páginas web. Adotam para o seu desenvolvimento linguagens de marcação, tais como: XML, HTML e XHTML.

Resumindo, CSS define como serão exibidos os elementos contidos no código de uma página web. Assim, a sua maior vantagem passa por efetuar a separação entre o formato e o conteúdo de um documento.

Onde estão localizados no WordPress?

Geral

Se o seu website está criado em WordPress, basta ir ao menu de edição > Apresentação > Personalizar > CSS Adicional. Desta forma, os códigos introduzidos serão utilizados em todo o website. Claro que numa fase mais avançada, irá perceber que ao colocar uma “class” numa das “rows”, o seu código passa a ser específico e por isso, pode colocar neste quadro geral.

Mas, não vamos complicar!

Página em específico

Não é uma situação que utilizo com frequência, mas em certos casos, até mesmo para organização das páginas, é bastante útil colocar CSS diretamente nas páginas. Para isso, basta abrir o editor da página que pretende > no canto superior direito encontrará um icon de ferramenta > irá aparecer um quadro para colocar CSS.

Utilizo o WpBackery ou Visual Composer como editores, pois até agora têm sido os mais competentes e completos.

Como encontrar os códigos CSS?

Antes disso, é preciso entender a lógica de como os encontrar. Ao abrir o seu website, clique com o lado direito do rato, e selecione > inspecionar.

Este é o painel onde estarão os códigos do seu website. HTML do lato esquerdo e CSS do lado direito. Cada código HTML tem vários códigos CSS associados. A lógica passa por descobrir onde está o código HTML do objeto que pretende personalizar e com CSS utilizar um código específico para o efeito.

Do lado esquerdo desse painel encontra uma seta, utilizada para facilitar na descoberta do código. Essa seta permite clicar no objeto do seu website e disponibilizar o código correspondente, no painel de inspeção.

Quais são os códigos CSS básicos de personalização?

Na verdade, existem vários códigos que podem ser básicos para alguns utilizadores e complicados para outros. No entanto, vou partilhar consigo 3 códigos básicos de CSS, que considero fáceis de compreensão e importantes para quem está a iniciar.

1- Esconder um objeto

esconder objeto CSS

Como poderá visualizar neste exemplo, ao selecionar o botão “Pedir Orçamento”, o painel automaticamente mostrou-me qual o HTML associado e o CSS associado ao código HTML. Dessa forma, só necessito de copiar o código que está sublinhado e acrescentar o seguinte:

.deeper-button.custom.medium.btn-1114241942 {

display: none;}

2- Mudar a cor de um objeto

Seguindo o mesmo exemplo de identificação anterior, ao copiar o código só terá de encontrar a cor que está associada. Veja o exemplo abaixo:

Mudar Cor CSS

Neste caso, necessita de copiar o código correspondente ao CSS da cor e alterar o código para a cor que deseja.

.deeper-button.custom.medium.btn-1114241942 {

background-color: #000 !important;}

3- Tamanho do objeto

Para que seja fácil seguir a lógica, exemplifico no mesmo botão. Já sabe como esconder e mudar a cor, mas se o botão estiver muito grande ou pequeno? Como personalizar no seu website?

A lógica mantém-se, mas neste caso vamos ter de acrescentar um código!

Tamanho do botão CSS

Existem as “margins” e “paddings” que servem para posicionar os seus objetos. Aqui, o tamanho do botão corresponde ao “padding” e por isso, só terá de acrescentar o seguinte código, embora os pixeis possam ser alterados consoante a sua preferência:

.deeper-button.custom.medium.btn-1114241942 {

padding: 10px 20px;}

Estes códigos CSS podem ser utilizados em qualquer objeto?

Sim! Aqui exemplifico com um botão para ser mais simples compreender, mas na verdade podem ser utilizados para qualquer objeto do seu website.

Se quiser praticar pode mesmo editar diretamente no painel de inspeção e ver os resultados obtidos. Se funcionar, basta depois copiar o código todo e colocar no seu > CSS Adicional.

Agora que já sabe como começar a utilizar os códigos CSS é importante que pratique. Quando são muitos objetos, crio uma página de teste.

Achou este artigo útil para a personalização do seu website? Se ainda assim, pretende construir um website totalmente personalizado ao seu gosto, entre em contacto comigo!