Cascading Style Sheet (CSS) é um sistema de codificação de sites que permite aos designers manipular vários recursos de uma vez, atribuindo certos elementos a grupos. Por exemplo, usando um código para o plano de fundo do site, os designers podem alterar a cor ou imagem do plano de fundo em todas as páginas do site com uma alteração no arquivo CSS. Veja como criar CSS para um site básico.
Passos
Parte 1 de 4: Escrevendo CSS Inline
Etapa 1. Certifique-se de ter um conhecimento básico sobre tags HTML
Você deve saber como as tags funcionam e como
src
e
href
atributos.
Etapa 2. Aprenda algumas das propriedades básicas do CSS
Você descobrirá que existem muitas propriedades. No entanto, não é necessário aprender todos eles.
-
Algumas boas propriedades CSS básicas para saber são
cor
e
família de fontes
- .
Etapa 3. Aprenda sobre os valores de cada propriedade respectiva
Todas as propriedades precisam de um valor. Para o
cor
propriedade, por exemplo, você pode colocar o
vermelho
valor.
Etapa 4. Saiba mais sobre o
estilo
Atributo HTML.
É usado em um elemento como
href
ou
src
. Para usá-lo, entre aspas após o sinal de igual, coloque o atributo CSS, dois pontos e o valor da propriedade. Isso é conhecido como regra CSS.
Etapa 5. Entenda que CSS embutido não é normalmente usado para sites por desenvolvedores profissionais da web
CSS embutido pode adicionar desordem desnecessária a um documento HTML. No entanto, é uma ótima maneira de se familiarizar com o funcionamento do CSS.
Parte 2 de 4: Escrevendo CSS básico
Etapa 1. Inicie o programa que deseja usar
Deve permitir que você crie arquivos HTML e CSS.
Se você não tiver um programa especial instalado, pode usar o Bloco de notas ou outro editor de texto. Simplesmente salve seu arquivo como um arquivo de texto e um arquivo CSS
Etapa 2. Abra o arquivo HTML do seu site
Você também deve abri-lo com um editor de HTML, se houver um instalado.
Os editores de HTML permitem que você edite HTML e CSS ao mesmo tempo
Etapa 3. Crie uma tag em seu cabeçalho HTML
Isso permitirá que você escreva CSS sem a necessidade de um arquivo separado.
Etapa 4. Escolha um elemento ao qual deseja adicionar estilo e digite o nome do elemento seguido por um conjunto de chaves ({})
Para tornar seu código mais legível, sempre coloque a segunda chave em sua própria linha.
Etapa 5. Entre as chaves, digite suas regras CSS como faria usando o
estilo
atributo.
Cada linha deve terminar com um ponto e vírgula (;). Para tornar seu código legível, cada regra deve começar em sua própria linha e cada linha deve ser recuada.
É muito importante observar que esse estilo afetará todos os elementos do tipo selecionado na página. Um estilo mais específico será abordado na próxima seção
Parte 3 de 4: CSS mais avançado
Etapa 1. Crie um arquivo CSS, não um arquivo HTML e salve-o usando o
.css
extensão.
Abra seu arquivo HTML também.
Etapa 2. Crie uma tag em seu cabeçalho HTML
Isso permitirá que você vincule um arquivo CSS separado ao seu documento HTML. Sua tag de link precisa de três atributos:
rel
modelo
e
href
-
rel
significa "relacionamento" e informa ao navegador qual é o relacionamento com o documento HTML. Aqui, deve ter um valor de
"folha de estilo"
- .
-
modelo
informa a que tipo de mídia está sendo vinculado. Aqui, deve ter um valor de
"text / css"
-
href
- aqui é usado de forma semelhante a como é usado em um elemento, mas aqui deve ser vinculado a um arquivo CSS. Se o arquivo CSS estiver localizado na mesma pasta do arquivo HTML, apenas o nome do arquivo precisará ser escrito entre aspas.
Etapa 3. Selecione os elementos de diferentes tipos aos quais deseja adicionar o mesmo estilo
Adicione um
classe
atribua a esses elementos e defina-os igual a um nome de classe de sua escolha. Isso dará aos seus elementos o mesmo estilo.
Etapa 4. Atribua o estilo que uma classe receberá
Digite o nome da classe em seu arquivo CSS com um ponto (.) Precedendo-o (ou seja,
.classe
).
Etapa 5. Selecione os elementos individuais aos quais deseja adicionar um estilo especial e adicione um
Eu iria
atributo.
Ids são criados em CSS usando um símbolo de libra (#) em vez de um ponto.
Ids são mais específicos do que classes, portanto, um id substituirá qualquer estilo de classe se tiver um atributo com um valor diferente do da classe
Parte 4 de 4: Aprendendo mais
Etapa 1. Visite as escolas w3
É um site oficial voltado para o ensino de habilidades de desenvolvimento web. O w3 tem muitas referências listadas para HTML e CSS, bem como outras linguagens da web.
Etapa 2. Encontre outros sites voltados especificamente para aprender e ensinar HTML e CSS
Sites como CSS tricks.com destinam-se especificamente a ensinar CSS e habilidades de web design. Encontrar fontes confiáveis o ajudará em sua jornada de aprendizado.
Etapa 3. Entre em contato com designers e desenvolvedores da web
A experiência e o know-how deles podem lhe ensinar habilidades e conhecimentos valiosos.
Etapa 4. Visualize o código-fonte dos sites que encontrar
Visualizar o CSS de sites bem desenvolvidos pode mostrar maneiras de projetar partes de sites. Copiar como prática e mexer no código pode ajudá-lo a aprender como usar diferentes atributos CSS.
