O que é CSS?
Rumo ao primeiro emprego!
O CSS é o que define um estilo, as cores e
as fontes do nosso site, no geral, o
CSS será responsável por toda parte da estética da nossa página web. Aprender
CSS se torna fundamental para desenvolvermos um site bonito com design chamativo e criarmos
sites
maravilhosos.
A sigla CSS (Cascading Style Sheets) que em português significa (Folha de estilo em
cascata).
O CSS foi desenvolvido no ano de 1996, pelo W3C (World Wide Web
Consortium) com um único propósito. O HTML não foi criado para ter tags que ajudassem a
formatar a página, ou seja, deixá-la visualmente bonita.
Podemos dizer que o CSS é na verdade um complemento para o HTML, embora
na prática, seja considerada uma outra linguagem de marcação.
O CSS, assim como o HTML, ele funciona através de arquivos, no caso,
.CSS.
Por exemplo, imagine que tenhamos criado um arquivo .HTML e, nesse arquivo criamos uma tag
de parágrafo, ou seja, a tag <p>Conteúdo</p>, no arquivo
.CSS vamos nos referir ao parágrafo que queremos editar, que no caso seria o
p, bastar irmos no nosso código .CSS e adicionarmos a seguinte tag:
p{color:red}. Mais para frente do curso vamos ver este exemplo na pratica, por hora, vamos utilizar a
imagens a seguir para auxiliar no entendimento.
É importante conhecermos bem as propriedades do CSS e como cada uma funciona, para termos a
capacidade de estilizar o nosso código HTML da maneira como desejarmos.
Vamos aprender a primeira maneira de colocarmos CSS nos nossos documentos, que é o
CSS em linha, que é quando a gente coloca o CSS dentro do próprio
elemento HTML que estamos trabalhando. Quando a gente trabalha com CSS em linha, sempre
faremos a seguinte forma, vamos selecionar a tag que queremos trabalhar, que no caso será a tag
body que é responsável por todo o corpo do nosso site, vamos colocar o seguinte atributo:
<body style=""> e dentro das aspas dupla iremos vamos passar as propriedades
css e o tipo de
comportamento que ela tenha. Quando colocarmos o style dentro de uma tag html,
estamos determinando que
esse estilo css só irá funcionar para aquela tag, que no caso é a body.
Essa propriedade style dentro da nossa tag <body> serve
para, por exemplo, se quiséssemos alterar a
cor do fundo do nosso site, colocarmos dentro das aspas duplas a propriedade background: e escrevermos a
cor que queremos, por exemplo:
(Obs.: Caso você adicione alguma imagem com o fundo branco e queira mudar a cor do seu site, e possível remover
o
fundo da imagem, acesse o removebg e faça o upload
para remover o fundo da imagem que desejar e, poder alterar o fundo do seu site para a cor que desejar.)
Outro exemplo seria com a tag de titulo do HTML, que seria a <h1></h1>, nos
poderíamos adicionar uma propriedade CSS diretamente aqui nessa minha tag, ficaria da
seguinte forma:
Caso quiséssemos alterar a fonte do nosso titulo sera necessária outra propriedade CSS, esse
atributo seria:
Basicamente é assim que funciona o CSS em linha, isso quer dizer que vamos adicionar os
atributos CSS diretamente nos componentes que queremos que sejam alterados. Porem, nem
sempre ele se torna o modo mais fácil de realizarmos a estilização da nossa página pelo fato de que o atributo
que colocamos iram funcionar somente na tag que selecionamos, ou seja, teríamos que adicionar atributos
CSS em varias e varias tags separadamente.
Conclusão
O CSS é uma ferramenta essencial para qualquer desenvolvedor web, pois permite transformar um site simples em uma
página visualmente atraente e profissional. Ele trabalha em conjunto com o HTML para definir estilos, cores, fontes
e layouts, proporcionando uma experiência mais agradável para os usuários.
Ao longo deste aprendizado, vimos que o CSS pode ser aplicado de diferentes formas, como em linha, diretamente
dentro das tags HTML. No entanto, essa abordagem pode ser limitada e pouco eficiente em projetos maiores. Por isso,
é importante conhecer outras maneiras de utilizar o CSS, como em arquivos externos, para garantir um código mais
organizado e fácil de manter.
Com a prática e o domínio das propriedades do CSS, será possível criar designs incríveis e personalizados, tornando
os sites mais dinâmicos e visualmente impactantes.
CSS incorporado
O CSS incorporado interno é quando damos instruções de CSS dentro da nossa
página HTML a qual queremos que as instruções sejam seguidas, vamos aprender como isso funciona
na pratica. Para começarmos a utilizar o CSS incorporado vamos ter que subir la em cima no nosso
código e, antes da tag de fechado do HEAD vamos adicionar a tag HTML chamada
style, da seguinte forma:
Dentro dessa tag, tudo que passarmos dentro dessa tag, tudo que passarmos serão propriedades CSS
que serão aplicadas nesse documento, ou seja, na pagina index.html. Por exemplo, ao invés de utilizarmos o
CSS em linha, que foi o que utilizamos para estilizar o fundo e o titulo do nosso site, não foi
totalmente eficaz pelo fato de não atribuir os componentes no subtitulo da nossa pagina, veja a imagem a seguir:
Nesta imagens, existem 2 tags HTMl com atribuições css, que seriam a tag body e a tag h1, porem
a nossa tag h2 não recebeu nenhum tipo de atribuições pelo fato de termos que adicionar em cada tag manualmente.
Para corrigir isto, excluiremos os atributos css das nossas tags, e ao invés de colocarmos direto na tag podemos
passar na tag style qual é o selection que significa seletor, ou seja, qual o elemento da página que queremos que
receba essas propriedades css. Aprendemos um pouco sobre selection no curso de HTML, e está na minha outra página...
Curso HTML.
Para selecionarmos a tag que desejamos modificar, bastar colocar o nome da tag dentro da tag style, e sempre
lembrarmos de abri e fecharmos {} para conseguir colocar dentro das chaves os valores das propriedades que queremos
que sejam aplicadas.
Para começarmos a modificar nosso site, vamos selecionar a tag body e abrir chaves {}, e dentro delas vamos
especificar como gostaríamos que essas tags se comportassem. Isso funcionaria para todas as tags, sejam elas h1, h2
e etc. Quando adicionarmos a tag h1 dentro da nossa tag html style
independente de quantos h1 tiver em nosso código, todos iram receber a mesma modificação
automaticamente. Existem uma hierarquia de prioridades no códigos, ou seja, caso tenhamos, por exemplo, 6 tags
h1 e queremos que apenas 1 seja diferente das demais, bastar realizarmos a utilização do
CSS em linha para modificarmos aquele h1 especifico, pois o css que estiver
na tag diretamente ele vai pegar o valor do css que esta na tag por ordem de prioridade. Porem, nessa situação,
seria mais recomendado utilizarmos as div com classes, que aprendemos a como utilizar no curso passado...
Div com classes!
CSS incorporado:
CSS em linha:
Agora vamos imaginar uma situação, supontando que gostaríamos que todas as páginas do nosso site tivessem a mesma
cor de fundo, para explicar isso, vamos criar uma página...
Como adicionar a mesma cor de fundo para todas as páginas do nosso projeto?
Conclusão
O CSS é uma peça fundamental no desenvolvimento web, proporcionando estilos e personalização às páginas. Ele
pode ser aplicado de diversas formas, como em linha, incorporado ou em arquivos externos, sendo esta última a
opção mais recomendada para projetos maiores devido à sua organização e eficiência. Ao dominar o CSS,
conseguimos criar sites mais modernos, responsivos e visualmente atrativos. Com a prática, será possível
desenvolver layouts sofisticados e aprimorar a experiência do usuário, tornando-se um diferencial para quem
busca se destacar no mercado de trabalho e conquistar o primeiro emprego na área de tecnologia.
Seletores
Para essa nossa aula, iremos criar uma nova página web.
Ir para aula sobre seletores!
Propriedades
Nessa parte, vamos conhecer cada propriedade CSS e pra que cada uma delas servem, para melhorar
nosso aprendizado, iremos criar outra página para começarmos do zero e entendermos bem o funcionamento das
propriedades.
Aula sobre propriedades.
Estilização de links
Agora vamos aprender mais sobre a estilização dos links em nossas páginas web.
Estilizando links
Propriedade Display
Saiba mais sobre a Propriedade Display!
Propriedade Max-width
Saiba mais sobre a propriedade max-width.
Propriedade Position
Saiba mais sobre position.