Tutorial CSS

CSS é usado para controlar o estilo de um documento da web de uma forma simples e fácil.

CSS é a sigla para "Cascading Style Sheet". Este tutorial cobre as versões CSS1, CSS2 e CSS3, e dá uma compreensão completa de CSS, desde seus conceitos básicos até conceitos avançados.

Por que aprender CSS?

Cascading Style Sheets, carinhosamente referido como CSS, é uma linguagem de design simples que visa simplificar o processo de tornar as páginas da web apresentáveis.

CSSé uma OBRIGAÇÃO para estudantes e profissionais que trabalham se tornarem um grande Engenheiro de Software, especialmente quando estão trabalhando no Domínio de Desenvolvimento Web. Vou listar algumas das principais vantagens de aprender CSS:

Create Stunning Web site- CSS trata a aparência e o comportamento de uma página da web. Usando CSS, você pode controlar a cor do texto, o estilo das fontes, o espaçamento entre os parágrafos, como as colunas são dimensionadas e dispostas, quais imagens ou cores de fundo são usadas, designs de layout, variações na exibição para diferentes dispositivos e tamanhos de tela bem como uma variedade de outros efeitos.
Become a web designer - Se você deseja iniciar uma carreira como web designer profissional, o design de HTML e CSS é uma habilidade obrigatória.
Control web- CSS é fácil de aprender e entender, mas fornece um controle poderoso sobre a apresentação de um documento HTML. Mais comumente, CSS é combinado com as linguagens de marcação HTML ou XHTML.
Learn other languages - Depois que você entende o básico de HTML e CSS, outras tecnologias relacionadas, como javascript, php ou angular, tornam-se mais fáceis de entender.

Hello World usando CSS.

Só para te entusiasmar um pouco sobre CSS, vou apresentar um pequeno programa convencional CSS Hello World, que você pode tentar usando o link Demo.

<!DOCTYPE html>
<html>
   <head>
      <title>This is document title</title>
      <style>
      h1 {
         color: #36CFFF; 
      }
      </style>
   </head>	
   <body>
      <h1>Hello World!</h1>
   </body>	
</html>

Aplicações de CSS

Conforme mencionado antes, CSS é uma das linguagens de estilo mais amplamente usadas na web. Vou listar alguns deles aqui:

CSS saves time- Você pode escrever CSS uma vez e então reutilizar a mesma folha em várias páginas HTML. Você pode definir um estilo para cada elemento HTML e aplicá-lo a quantas páginas da Web desejar.
Pages load faster- Se você estiver usando CSS, não precisa escrever atributos de tag HTML todas as vezes. Basta escrever uma regra CSS de uma tag e aplicá-la a todas as ocorrências dessa tag. Portanto, menos código significa tempos de download mais rápidos.
Easy maintenance - Para fazer uma mudança global, basta mudar o estilo e todos os elementos em todas as páginas da web serão atualizados automaticamente.
Superior styles to HTML - CSS tem uma gama de atributos muito mais ampla do que HTML, então você pode dar uma aparência muito melhor à sua página HTML em comparação aos atributos HTML.
Multiple Device Compatibility- As folhas de estilo permitem que o conteúdo seja otimizado para mais de um tipo de dispositivo. Usando o mesmo documento HTML, diferentes versões de um site podem ser apresentadas para dispositivos portáteis, como PDAs e telefones celulares, ou para impressão.
Global web standards - Agora os atributos HTML estão sendo preteridos e é recomendado o uso de CSS. Portanto, é uma boa ideia começar a usar CSS em todas as páginas HTML para torná-las compatíveis com navegadores futuros.

Público

este CSS tutorial ajudará tanto estudantes quanto profissionais que desejam tornar seus sites ou blogs pessoais mais atraentes.

Pré-requisitos

Você deve estar familiarizado com:

Processamento de texto básico usando qualquer editor de texto.
Como criar diretórios e arquivos.
Como navegar por diferentes diretórios.
Navegar na Internet usando navegadores populares como o Internet Explorer ou Firefox.
Desenvolvimento de páginas da Web simples usando HTML ou XHTML.

Se você é novo em HTML e XHTML, sugerimos que consulte primeiro nosso Tutorial de HTML ou Tutorial de XHTML.

↰ Previous page Next page ↱