Introdução:
Quando nós falamos em Folhas de estilos em cascata ou Cascading Style Sheets ou ainda mas simples CSS, estamos falando sobre como dar estilo a sua página na internet, para se fazer uso de CSS no mínimo você tem que conhecer sobre HTML
Este curso ensinará como utilizar CSS com HTML, sendo atravéz de links externos ou editar na própria página HTML e ainda ensinará como utilizar as principais propriedades CSS, no decorrer dos tutoriais você entenderá o que é essas citações.
Sintaxe (como usar CSS)
A sintaxe de CSS é bastante simples, basicamente as propriedades são escritas em inglês e dão algum valor para dar estilos a página. Para nós escrevermos CSS nós precisamos entender três tópicos:
Sintaxe básica
seletor { propriedade: valor; }
Primeiro nós escrevemos o seletor logo em seguida abrimos chaves “{“ após disso escrevemos o nome da propriedade e depois dois pontos “:” após isso escrevemos o valor e fechamos com ponto-e-virgula “;” e chaves “}“.
-
seletor
Em uma maneira mais fácil de explicar seria “o nome” do que você quer dar estilo ou seja pode ser tags HTML como por exemplo <p>, <h1>, <form> ou nomes de classes ou ID na próxima aula falaremos sobre classes e ID mais a fundo.
-
Propriedade
A propriedade é que diz ao navegador qual função tomar, por exemplo existem propriedade para fontes, fundos do layout, tamanhos cores e etc. dependendo de sua necessidade.
-
Valor
Toda propriedade tem um valor, se for uma propriedade de fonte o valor vai ser o nome da fonte, tamanho se for uma de fundo o valor vai ser o nome da cor ou da imagem e assim por diante. Ou seja, valor é a característica da propriedade.
Onde usar CSS
Nós podemos usar CSS de três formas, que são in-line, interna e externa
- In-line significa aplicar CSS diretamente na página HTML juntamente com o atributo
style
Exemplos
A sintaxe é a seguinte
<tag style=”propriedade: valor;”>
<body style="background-color: #FF0000;"> <p style="color: black">Esta frase está no cor preta.</p>
Percebe-se que o estilo está sendo aplicado diretamente nas tags HTML
- Interna é o modo que se aplica CSS com a tag
<style>
Para aplicarmos estilos internamente em uma página HTML precisamos adicionar o código entre a tag head
A sintaxe é a seguinte
<style type=”text/css”>
seletor { propriedade: valor;}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exemplo de CSS</title>
<style type="text/css">
seletor { propriedade: valor;}
</style>
</head>
- Externo é o método mais recomendado.
Para adicionar CSS externamente é preciso colocar o link entre as tags head
<html> <head> <title>Exemplo de como adicionar o link de um arquivo externo de css</title> <link rel="stylesheet" type="text/css" href="nome-da-pasta/nome-do-arquivo.css" /> </head> <body> ......
No atributo href coloca-se o endereço onde seu arquivo de estilo está hospedado.
Índice:Css básico
- Curso de CSS – Introdução ( Aula 1)
- Curso de CSS – Div e Span ( Aula 2)
- Curso de CSS – Classes e Id ( Aula 3)
- Curso de CSS – Background ( Aula 4)
- Curso de CSS – Font/color ( Aula 5)
- Curso de CSS – Border ( Aula 6)
- Curso de CSS – Padding e Margin ( Aula 7)
- Curso de CSS – Text/Widgth/Height/Listheight(Aula 8 )
- Curso de CSS – Float e Clear ( Aula 9)
- Curso de CSS – Posicionamentos ( Aula 10)
- Curso de CSS – Overflow ( Aula 11)
FAQ
O que é um seletor?
O que é linguagem de marcação?
Mais informações:
Noção básica de hexadecimal e RGB
Mais informações:
Nossa… já tentei aprender alguma dessas linguagens de computador e internet, mas não levo jeito mesmo. Me deixem como meu português mesmo e mais um inglês.
CSS muito legal.
Vou deixar nos favoritos e assistir com calma…muita calma
Ainda sai a Aula 07?
cocerteza até queria pedir desculpas pela demora
é que começo de ao é complicado o tempo é escaso
mas até seguda sai a aula 7 e até o fim de semaa sai aula 8 e 9
queria parabenizar pelas video aulas e dizer que estou ancioso pelo restante das aulas…
obrigado Eduardo
logo logo o restante das aulas estará disponivel
seguido de um novo curso aguarde