Os sites ficariam chatos sem CSS, pois essa linguagem de estilo é responsável pelo estilo, tamanho, cor e posicionamento do texto em uma página da web.
últimas postagens
O que é CSS?
Cascading Style Sheets, abreviado como CSS, é uma linguagem que descreve como os elementos HTML devem ser exibidos em uma tela ou papel. O CSS foi criado pelo World Wide Web Consortium (W3C) em 1996.
Os elementos HTML não foram projetados para ter tags que pudessem ajudar a formatar uma página da Web, e os desenvolvedores só precisavam escrever uma marcação para a página. A introdução de tags como quando o HTML 3.2 foi lançado introduziu novos problemas para os desenvolvedores.
Como as páginas da Web têm planos de fundo coloridos, fontes diferentes e vários estilos, reescrever o código tornou-se caro e doloroso. As escolas do W3C introduziram o CSS para resolver esses desafios e ele continuou a evoluir ao longo dos anos.
Por que CSS?
#1. CSS é eficiente
O CSS nos salva da dor de adicionar tags como fonte, alinhamentos de elementos, borda, cor, estilo de plano de fundo e tamanho em todas as páginas da web.
#2. Economizar tempo
Você pode alterar facilmente a aparência de todo o site alterando o arquivo CSS externo.
#3. Compatibilidade de vários dispositivos
Os usuários modernos da Web acessam sites em dispositivos com tamanhos de tela variados, como PCs, tablets e smartphones. O CSS facilita a criação de páginas da Web responsivas aos tamanhos de tela.
#4. Aplicativos fáceis de manter
Aplicações web modernas estão sempre evoluindo. O CSS facilita a alteração de componentes únicos ou até mesmo de todo o site sem alterar a base de código.
Como o CSS é usado com HTML para criar sites?
HTML é uma linguagem de marcação padrão usada para a criação de páginas da web. Por outro lado, CSS descreve como as páginas da web (criadas usando HTML) são exibidas. Uma página da Web criada usando HTML e CSS idealmente terá um arquivo HTML de texto, links de imagem e tags HTML.
Esse arquivo HTML pode ter um arquivo CSS separado vinculado a ele usando uma tag de link ou empregar estilos CSS internos ou embutidos. Um arquivo HTML pode ter um título como
e um parágrafo denotado por
. Você pode usar CSS para instruir o navegador a exibir todo o conteúdo do parágrafo em negrito ou até mesmo tornar o conteúdo do cabeçalho em 50 pixels e na cor verde.
Demonstraremos como HTML e CSS funcionam na próxima seção.
Tipos de CSS
#1. CSS externo
Para que o CSS seja classificado como externo, deve haver um arquivo HTML e um arquivo CSS separado com extensão .css. Por exemplo, estilo.css. O arquivo CSS é vinculado ao arquivo/documento HTML usando uma tag de link.
Exemplo de um arquivo CSS externo:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
O arquivo CSS pode ser vinculado ao seguinte documento HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
A tag link vincula a folha de estilo externa ao documento HTML, enquanto o atributo href especifica a localização da folha de estilo externa.
A página web final aparecerá da seguinte forma:
O CSS externo é a abordagem mais recomendada, pois facilita a criação de componentes reutilizáveis e faz alterações universais na base de código.
#2. CSS interno
O CSS interno é ideal quando você tem um único documento HTML que deseja estilizar de forma exclusiva. O conjunto de regras de estilo é escrito no documento HTML dentro da seção head.
Este é um exemplo de CSS interno:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
A página da Web renderizada aparecerá da seguinte maneira:
O CSS interno não é ideal na maioria dos casos, pois torna o código em um documento HTML muito grande, afetando a velocidade de carregamento.
#3. CSS embutido
O CSS embutido contém o estilo CSS dentro do corpo. Por exemplo, você pode estilizar um parágrafo, um cabeçalho ou até mesmo um div usando CSS embutido.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
O documento renderizado aparecerá da seguinte forma:
O CSS embutido não é ideal se você deseja dimensionar seu aplicativo da Web, pois adicionar uma propriedade CSS a cada tag HTML leva tempo.
Explore alguns dos melhores cursos e livros online para dominar o CSS.
Crie sites responsivos com HTML e CSS
Este curso de criação de sites responsivos do mundo real ensina como criar sites responsivos usando HTML5 e CSS3. Você não precisa de nenhum conhecimento prévio em desenvolvimento web para aprender este curso que explora conceitos como modelo de caixa, resolução de conflitos de seletores, esquemas de posicionamento e herança.
Também é o curso ideal se você quiser aprender como fazer brainstorming, planejar, esboçar, codificar, testar e otimizar um site profissional.
CSS Avançado e Sass
O curso avançado de CSS e Sass apresenta como o CSS funciona nos bastidores, explorando tópicos como cascata, especificidade e herança.
O curso tem muitas técnicas CSS modernas para criar páginas da Web poderosas e responsivas. O curso apresenta Saas e como usá-lo em projetos durante a arquitetura de CSS, variáveis globais e gerenciamento de consultas de mídia.
Também é o curso ideal se você quiser aprender animação CSS, pois aborda @keyframes, animação e transição.
Aprenda CSS
Learn CSS by Codecademy ensina como usar CSS para transformar HTML em sites atraentes visualmente. O curso é dividido em 8 lições e tem 6 projetos para testar sua compreensão.
As principais coisas que você aprenderá neste curso são como adicionar estilo a elementos HTML, conectar arquivos HTML e CSS e criar layouts exclusivos para páginas da web.
Crie sua primeira página da Web com HTML e CSS
O curso construa sua primeira página da web ensina como usar HTML5 e CSS3 para criar sites responsivos. Este curso gratuito é apresentado em 4 módulos e requer cerca de 10 horas para ser concluído. Você não precisa de nenhum conhecimento prévio de programação para aprender este curso.
Noções básicas de CSS
CSS Basics é criado por W3Cx. Algumas das coisas que você aprenderá neste curso são; melhores práticas em web design, seletores CSS fundamentais e como selecionar propriedades CSS. O curso é dividido em 5 módulos; você precisa de cerca de 5 semanas para completá-lo ao estudar 5-7 horas por semana.
Introdução ao CSS3
Este curso sobre CSS3 apresenta as folhas de estilo em cascata. O curso é preparado pela Universidade de Michigan e ensina como escrever regras CSS, estabelecer bons hábitos de programação e testar código. Você precisa de cerca de 12 horas para concluir este curso, que vem com um certificado compartilhável na conclusão.
Introdução ao HTML e CSS
Este curso introdutório sobre HTML e CSS ensina como criar sites estilizados e bem estruturados usando HTML e CSS. O curso ensina os alunos a criar sites usando uma estrutura semelhante a uma árvore e, em seguida, estilizá-los usando CSS.
Este curso gratuito é adequado para iniciantes e usa um modelo de aprendizado individualizado. Você precisa de cerca de 3 semanas para concluir este curso ministrado por especialistas do setor.
Tutorial CSS
CSS Tutorial é um curso gratuito no W3schools. O curso é dividido em capítulos para facilitar o entendimento. Cada capítulo dá exemplos e exercícios. A plataforma tem um online onde pode experimentar diferentes conceitos através do botão “Try it Yourself”.
CSS: o guia definitivo
O livro CSS: The Definitive Guide é útil se você quiser aprender o básico de CSS, desde seletores e especificidade até a cascata. O livro também detalha truques de flexbox, posicionamento e flutuação.
Também é o livro que você pode encomendar se quiser aprender a usar CSS para produzir transformações, transições e animações 2D e 3D. O Guia Definitivo está disponível nas versões Kindle e brochura.
Web design responsivo com HTML5 e CSS
Este livro sobre Responsive Web Design com HTML5 e CSS ensina como criar sites responsivos preparados para o futuro usando HTML5 e CSS.
Depois de aprender os truques deste livro, os sites que você criar funcionarão perfeitamente em computadores, tablets e celulares. O livro é escrito em um formato fácil de seguir e está disponível nos formatos brochura e Kindle.
HTML e CSS: projetar e construir sites
Este livro sobre HTML e CSS é ideal para todos, sejam amadores, estudantes ou profissionais.
O escritor fornece o conteúdo deste livro por meio de infográficos e fotografia de estilo de vida para facilitar a compreensão de vários conceitos. O recurso é apresentado em uma estrutura única, facilitando a navegação por todos os capítulos.
CSS moderno
Este livro sobre CSS moderno: domine os principais conceitos de CSS para o desenvolvimento moderno da Web ensina CSS por meio de exemplos de código, diagramas e capturas de tela.
O livro apresenta cores, seletores, modelos de caixa, combinadores e especificidade em seus primeiros capítulos. Em seguida, o livro apresenta estilo de texto, posicionamento, gradientes, bordas, índice Z e contextos de empilhamento. Você também aprende tópicos avançados como transições, animações, transformações, flexbox e grades CSS.
Palavras Finais
O papel do CSS em sites modernos não pode ser enfatizado o suficiente. Além de tornar as páginas da Web visualmente atraentes, o CSS facilita a navegação em várias páginas da Web.
Aprender CSS pode ser fácil se você usar os recursos listados acima. Alguns desses cursos são gratuitos, enquanto outros são pagos.
Em seguida, você pode conferir as folhas de dicas CSS para desenvolvedores e designers.