Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

CSS – Aprenda Fácil

CSS

CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria ótimo fazer layouts na sua página sem ter que alterar o HTML toda vez que quisesse mudar? Nesta postagem vamos ter uma breve introdução ao CSS para você ter uma ideia como o CSS é prático. Podemos dizer que o CSS é a outra metade do HTML. Simplificando, não há melhor parceria: HTML é responsável pelo trabalho pesado (a estrutura), enquanto a CSS dá o toque de elegância (layout). CSS pode ser adicionado com uso do atributo style.

 

Você vai precisar para estudar CSS, apenas de um editor de código, eu recomendo o NotePade++  e também de um servidor local, que eu também recomendo o WampServer. Caso você ainda não tenha instalado no seu computador, basta você acessar as postagens clicando nos devidos nomes neste texto e proceder conforme e tutorial indicado. Seus negócios online, ficará com outra aparência após você estudar CSS.

Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo:

<HTML>
<HEAD>
<TITLE>Estudando Folha de Estilo CSS</TITLE>
</HEAD>
<BODY>
<p style=”font-size:20px;”>Este parágrafo está em tamanho de fonte igual a
20px</p>
<p style=”font-family:courier;”>Este parágrafo está em fonte Courier</p>
<p style=”font-size:16px; font-family:cambria”>Este parágrafo está em fonte Cambria e tamanho 20px</p>
</BODY>
</HTML>

 

Será renderizado no navegador assim:

 

atributo style

 

No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade font-family) e o tamanho da fonte (com a propriedade font-size). Note que no último parágrafo do exemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e vírgula.

 

Está parecendo que vai dar muito trabalho para fazer isso na pagina toda  não é verdade?  Mas uma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de um arquivo central em toda a página. Em lugar de se usar o atributo style em cada tag, você pode dizer ao navegador como deve ser o layout de todos os textos em toda a página:

 

<html>
<head>
<title>Minha primeira página CSS</title>
<style type=”text/css”>
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<body>
<h1>Minha primeira página CSS</h1>
<h2>Bem vindo à minha primeira página CSS</h2>
<p>Aqui você verá como funciona CSS</p>
</body>
</html>

 CSS é isto!

No exemplo acima inserimos as CSS na seção head do documento, assim ela se aplica à página inteira. Para fazer isto use a tag <style type=”text/css”> que informa ao navegador que você está digitando CSS. No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8px. Uma outra opção é a de digitar as CSS em um documento separado. Com as CSS em um documento separado você pode gerenciar o layout de muitas páginas ao mesmo tempo. Muito inteligente néhh? Pois você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas ou milhares de páginas. Isso foi apenas uma introdução de CSS, mas você pode aprender tudo o que precisa estuando as nossas postagens, veja logo abaixo a sequência de estudos, basta clicar no assunto desejado e o link te levará para a página onde você poderá estudar mais.

Veja como ficará no navegador o nosso exemplo acima:

 

style type

 

 

Veja logo abaixo outros capítulos que estudaremos com mais detalhes sobre a CSS basta clicar sob os textos para abrir a página de estudo:

Como funciona as CSS?

Cores e fundos

–  FONTES

Textos

Links

Identificando e agrupando elementos (classes e id)

Agrupando elementos (span e div)

Box Model

Margin e padding

Bordas

Altura e largura

Flutuando elementos (floats)

Posicionando elementos

Usando z-index (Layers)

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.