Hello World: Dando uma nova cara
#css
Por Rafael Estevam
Criado em 04/05/2024
Dando continuidade ao pequeno projeto, o objetivo agora será trabalharmos o CSS (Folha de estilo em cascata em português). Ele será o responsável por deixar nossa landing page mais bonita.
Quando eu mencionei que o projeto é como a construção de uma casa e o CSS é a parte do acabamento, presume-se que o acabamento é a última parte da construão da casa, entretanto, se tratando de um projeto digital, não precisamos seguir, necessáriamente, uma ordem de desenvolvimento, embora o mais habitual seja construir o HTML, depois o CSS e, por fim, o Javascript.
Começando de onde paramos
Abaixo está a última versão da landing page criada.
<html>
<head>
<title>Meu primeiro HTML</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Meu Site</h1>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" width="300px" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh turpis, malesuada volutpat magna ut, luctus tempus erat. Quisque ac nisl efficitur, sagittis ipsum sit amet, posuere ipsum. Nullam eu maximus ante, a feugiat ligula. Nullam sed viverra quam. Ut fringilla id ipsum nec accumsan. Integer et scelerisque libero. Aliquam elit tortor, accumsan non dapibus sit amet, ornare quis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam consectetur tellus sed fringilla tristique. Aliquam congue felis a risus fermentum finibus. Quisque quis enim arcu. Nullam risus diam, imperdiet non eros eget, mollis feugiat leo.</p>
</div>
</section>
<section id="sobre">
<h2>Seção 2</h2>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" width="300px" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh turpis, malesuada volutpat magna ut, luctus tempus erat. Quisque ac nisl efficitur, sagittis ipsum sit amet, posuere ipsum. Nullam eu maximus ante, a feugiat ligula. Nullam sed viverra quam. Ut fringilla id ipsum nec accumsan. Integer et scelerisque libero. Aliquam elit tortor, accumsan non dapibus sit amet, ornare quis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam consectetur tellus sed fringilla tristique. Aliquam congue felis a risus fermentum finibus. Quisque quis enim arcu. Nullam risus diam, imperdiet non eros eget, mollis feugiat leo.</p>
</div>
</section>
<section id="contato">
<h2>Seção 3</h2>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" width="300px" />
<form>
<input placeholder="nome" />
<input placeholder="email" type="email" />
<button type="submit">Enviar</button>
</form>
</div>
</section>
</main>
<footer>
<p>© 2024 Meu Site</p>
</footer>
</body>
</html>Lembre-se de salvar todo o código no mesmo arquivo .html que foi criado anteriormente. Caso não tenha iniciado o projeto antes, basta copiar o código acima no bloco de notas (ou em algum editor de código) e salvar o arquivo como .html. Todas as atualizações a seguir serão feitas nesse arquivo.
Como o CSS funciona
Como já falei antes, o CSS é responsável por dar cara, cores e forma ao HTML. Existem algumas maneiras de se aplicar CSS a um HTML que são o CSS inline, interno e externo, e cada um com algumas características.
CSS Inline
É a forma mais simples de se aplicar CSS a uma tag HTML, embora seja menos utilizada hoje em dia, já que os estilos aplicados ficam atrelados exclusivamente a tag que o recebeu. Por exemplo:
<header style="background: #333333; display: flex; width: 100%">
<nav>
<ul>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>A tag <header> está recebendo um estilo com o atributo "style". Ele é responsável por aplicar o CSS na tag. Neste caso a tag <header> está recebendo uma cor de fundo "#333333" e alguns estilos que fazem a tag ocupar a largura total da tela.
Desta forma, o header ficará assim:
Essa é uma maneira de se aplicar CSS a uma tag, mas não é a mais eficiente. Partindo deste ponto, usaremos o CSS importado.
CSS Incorporado
O CSS incorporado utiliza de seletores, como ID de tags, atributos, tags HTML e etc, para identificar onde o estilo criado será aplicado. Essa é uma forma mais eficiente de se trabalhar com CSS pois toda a tag que possui, por exemplo, os mesmos nomes de atributos, poderá receber o estilo criado.
<header style="background: #333333; display: flex; width: 100%">
<nav>
<ul class="menu">
<li><a href="#" class="menu__item">Página Inicial</a></li>
<li><a href="#" class="menu__item">Sobre</a></li>
<li><a href="#" class="menu__item">Contato</a></li>
</ul>
</nav>
</header>Perceba que, agora as tags <ul> e <a> receberam um atributo chamado class, e cada um recebeu um valor específico. O CSS utiliza desse valor para saber onde o estilo criado deve ser aplicado.
A principal caracteristica do CSS incorporado é que ele é feito numa "área" separada do HTML, e o estilo fica aplicado, exclusivamente, a página onde ele está inserido.
O estilo criado, foi feito através do css interno da página, onde criamos uma tag <style>, antes do fechamento da tag head.
<html>
<head>
<title>Meu primeiro HTML</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.menu{
list-style:none;
display: flex;
justify-content: flex-start;
align-items:center;
}
.menu__item{
display:block;
color: #ffffff;
padding: 20px;
}
.menu__item:hover{
background-color: #00000030;
}
</style>
</head>Para cada estilo criado, é passado um nome, que chamamos de seletor. Esses seletores podem ser bastante variados, mas no exemplo, vamos focar nos seletores de classes, que são identificados por um ponto (.) na frente do nome.
Ao receber o nome de uma classe, a tag HTML irá receber o estilo correspondente do CSS. No código anterior, por exemplo, temos a tag <a> com o nome de classe chamado ".menu__item". Neste exemplo, a tag A está recebendo o estilo .menu__item codificado em css com algumas características como cor de texto branco (#ffffff).
.menu__item{
display:block;
color: #ffffff;
padding: 20px;
}<li><a href="#" class="menu__item">Página Inicial</a></li>
<li><a href="#" class="menu__item">Sobre</a></li>
<li><a href="#" class="menu__item">Contato</a></li>Desta forma, o CSS entende, a partir do nome de classe como deve aplicar o estilo correspondente. Além disso, todas as tags que recebem o mesmo nome de classe, vão receber o mesmo estilo CSS, permitindo a reutilização do estilo para várias tags e diminuindo o tempo de codificação de CSS.
Desta forma, o topo da página deve estar parecido com isso agora.
Perceba como o menu da página já mudou em relação a versão anterior. Agora ele está alinhado na horizontal e os ítens do menu na cor branca.
CSS importado
O CSS importado é importado na página HTML através de uma tag <link>. Essa tag LINK recebe como um dos atributos o src, que é o endereço (URL) para um arquivo .css. Esses arquivos podem ser hospedados na internet e chamados através dessa tag.
Arquivos .css nada mais são que arquivos destinados a salvar código CSS separadamente do código HTML. Essa é a forma mais eficiente de se trabalhar com css, já que podemos reaproveitar os estilos em todas as páginas do projeto, importando esse arquivo ao HTML da página.
No nosso projeto, vamos separar o código em duas partes. Uma contendo só HTML e outra somente css.
<html>
<head>
<title>Meu primeiro HTML</title>
<link src="./landingpage.css" type="stylesheed" />
</head>
<body>
<header style="background: #333333; display: flex; width: 100%">
<nav>
<ul class="menu">
<li><a href="#" class="menu__item">Página Inicial</a></li>
<li><a href="#" class="menu__item">Sobre</a></li>
<li><a href="#" class="menu__item">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Meu Site</h1>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" width="300px" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh turpis, malesuada volutpat magna ut, luctus tempus erat. Quisque ac nisl efficitur, sagittis ipsum sit amet, posuere ipsum. Nullam eu maximus ante, a feugiat ligula. Nullam sed viverra quam. Ut fringilla id ipsum nec accumsan. Integer et scelerisque libero. Aliquam elit tortor, accumsan non dapibus sit amet, ornare quis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam consectetur tellus sed fringilla tristique. Aliquam congue felis a risus fermentum finibus. Quisque quis enim arcu. Nullam risus diam, imperdiet non eros eget, mollis feugiat leo.</p>
</div>
</section>
<section id="sobre">
<h2>Seção 2</h2>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" width="300px" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh turpis, malesuada volutpat magna ut, luctus tempus erat. Quisque ac nisl efficitur, sagittis ipsum sit amet, posuere ipsum. Nullam eu maximus ante, a feugiat ligula. Nullam sed viverra quam. Ut fringilla id ipsum nec accumsan. Integer et scelerisque libero. Aliquam elit tortor, accumsan non dapibus sit amet, ornare quis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam consectetur tellus sed fringilla tristique. Aliquam congue felis a risus fermentum finibus. Quisque quis enim arcu. Nullam risus diam, imperdiet non eros eget, mollis feugiat leo.</p>
</div>
</section>
<section id="contato">
<h2>Seção 3</h2>
<div>
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" width="300px" />
<form>
<input placeholder="nome" />
<input placeholder="email" type="email" />
<button type="submit">Enviar</button>
</form>
</div>
</section>
</main>
<footer>
<p>© 2024 Meu Site</p>
</footer>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
.menu{
list-style:none;
display: flex;
justify-content: flex-start;
align-items:center;
}
.menu__item{
display:block;
color: #ffffff;
padding: 20px;
}
.menu__item:hover{
background-color: #00000030;
}Salve o arquivo .css com o código acima no mesmo diretório do arquivo .html. O HTML deve ser capaz de encontrar o arquivo CSS para a importação funcionar.
No mais, o funcionamento do css importado e incorporado não muda muito. A grande vantagem do CSS importado é a capacidade de reaproveitar todo o estilo criado, embora seja necessário criar um arquivo adicional.
Também é possível importar estilos da internet, basta saber o endereço URL do arquivo .css.
Agora que conhecemos os tipos de CSS, vamos continuar a trabalhar na customização do nosso projeto.
Continuando a estilização...
Vamos concluir a estilização do projeto.
Atualize seu arquivo .html com o código abaixo.
<html>
<head>
<title>Meu primeiro HTML</title>
</head>
<link src="https://media.graphassets.com/DkXlRpiCQ3CCrlFtPG2w?_gl=1*1udluey*_ga*MjAzMDg1NTAyMi4xNzA3NDQwMDU1*_ga_G6FYGSYGZ4*MTcwOTUxNDAzNS40LjEuMTcwOTUxNDA1Ny4zOC4wLjA." rel="stylesheet" />
<body>
<header style="background: #333333; display: flex; width: 100%">
<nav>
<ul class="menu">
<li><a href="#" class="menu__item">Página Inicial</a></li>
<li><a href="#" class="menu__item">Sobre</a></li>
<li><a href="#" class="menu__item">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="home" class="section section--blue">
<div class="banner banner--rounded">
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" class="banner__image" />
</div>
<div class="wrapper">
<h1 class="section__h1">Meu primeiro site</h1>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh turpis, malesuada volutpat magna ut, luctus tempus erat. Quisque ac nisl efficitur, sagittis ipsum sit amet, posuere ipsum. Nullam eu maximus ante, a feugiat ligula. Nullam sed viverra quam. Ut fringilla id ipsum nec accumsan. Integer et scelerisque libero. Aliquam elit tortor, accumsan non dapibus sit amet, ornare quis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam consectetur tellus sed fringilla tristique. Aliquam congue felis a risus fermentum finibus. Quisque quis enim arcu. Nullam risus diam, imperdiet non eros eget, mollis feugiat leo.</p>
</div>
</section>
<section id="sobre" class="section section--yellow wrapper--left">
<div class="banner--rounded">
<img src="https://media.graphassets.com/J4Y6jMSRQYWLRY6zOSnr" class="banner__image" />
</div>
<div class="wrapper">
<h2 class="section__h1">Seção 2</h2>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh turpis, malesuada volutpat magna ut, luctus tempus erat. Quisque ac nisl efficitur, sagittis ipsum sit amet, posuere ipsum. Nullam eu maximus ante, a feugiat ligula. Nullam sed viverra quam. Ut fringilla id ipsum nec accumsan. Integer et scelerisque libero. Aliquam elit tortor, accumsan non dapibus sit amet, ornare quis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam consectetur tellus sed fringilla tristique. Aliquam congue felis a risus fermentum finibus. Quisque quis enim arcu. Nullam risus diam, imperdiet non eros eget, mollis feugiat leo.</p>
</div>
</section>
<section id="contato" class="section section--green wrapper--right">
<div class="wrapper">
<h2 class="section__h1">Seção 3</h2>
<form class="form">
<input placeholder="nome" class="form__input" />
<input placeholder="email" type="email" class="form__input" />
<button type="submit" class="form__button">Enviar</button>
</form>
</div>
</section>
</main>
<footer class="footer">
<p class="menu__item">© 2024 Meu Site</p>
</footer>
</body>
</html>Atualize seu arquivo .css com o código abaixo.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.menu{
list-style:none;
display: flex;
justify-content: flex-start;
align-items:center;
padding: 0px 80px;
}
.menu__item{
display:block;
color: #ffffff;
padding: 20px;
}
.menu__item:hover{
background-color: #00000030;
}
.section{
width: 100%;
min-height: 500px;
padding: 100px 80px;
}
.section--blue{
background: #0095ff36
}
.section--yellow{
background: #efff0036
}
.section--green{
background: #00ff5a36;
}
.banner{
width: 100%;
height: 300px;
}
.banner__image{
width: 100%;
}
.banner--rounded{
border-radius: 50px;
overflow: hidden;
}
.wrapper{
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
margin-top: 40px;
}
.section__h1{
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
color: #fff;
text-shadow: 0 0 4px #00000030, 0 0 #000000;
}
.text{
font-size: 20px;
line-height: 30px;
}
.wrapper--left{
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
}
.form{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
.form__input{
border-radius: 10px;
padding: 5px 3px;
border: 1px solid #00000030;
height: 56px;
}
.form__button{
border-radius: 10px;
padding: 5px 10px;
border: 0px;
height: 56px;
background-color: #fc0;
color: #fff;
font-size: 16px;
}
.footer{
padding: 20px 80px;
background: #333;
}Perceba o quanto o nosso arquivo .css cresceu. Por isso é necessário mantermos os arquivos separados, para facilitar o entendimento e a manutenção de ambos os códigos.
O resultado final dessa estilização deve ser algo parecido com isso:
Perceba como a página mudou, em relação a primeira versão desse mesmo código.
A página já ficou muito mais chamativa e com um aspecto mais agradável, embora ela ainda seja um exemplo bastante simples, já conseguimos ver como o HTML e o CSS trabalham juntos e como as páginas de internet são feitas e estilizadas.
Mas isso não é tudo.
Existem inúmeras possibilidades com o uso do HTML junto com o CSS. Formas muito mais complexas e profissionais de se usar essas tecnologias em conjunto. Além disso, o CSS possui uma série de detalhes e conhecimentos que não forão abordados aqui, como pseudo-classes, hierarquia, sobreposição de estilos, etc... Mas acredito que esse seja um conjnto de conhecimentos mais avançado.
Uma breve experiência...
Quando eu trabalhei numa agência de publicidade em SP, eu trabalhava customizando temas em wordpress, embora na época, eu não dominasse nem Javascript e muito menos PHP (linguagem usada no wordpress). Então, a única forma que eu conhecia de customizar o tema era via CSS. Isso me fez ficar muito bom em CSS, entendendo como ele funciona e como tirar o melhor proveito dele, sobreescrevendo os estilos dos temas, usando recursos matemáticos de seleção do css para alternar estilos de uma lista, e muitas outras coisas. O CSS parece um pouco desafiador no início, principalmente quando se tenta entender a hieraquia e sobreposição de estilos, mas com a prática, isso se torna algo mais claro para os iniciantes em CSS.