O que é CSS e os tipos Inline, incorporado e Linkado?

Definição de tipos de CSS e o uso de tags seletores, classes e identificadores. Veja as várias formas de usar CSS. Conheça uma excelente fonte de aprendizagem online da linguagem CSS e outras usadas na criação de páginas web.

Home » Tecnologia

CSS - Cascading Style Sheets (Folha de Estilos em Cascata), é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

O CSS deve ser usado em conjunto e em conformidade com o HTML, deve ser parte obrigatória de todo projeto web. Abaixo mostrei as diversas formas de usar a linguagem de estilo em um website qualquer. Vamos lá:

Declarações

As declarações CSS são escritas da seguinte forma:

color: #ff0000;

  • color - nome da propriedade
  • (:)  separa a propriedade do seu valor
  • #ff0000 - valor da propriedade
  • (;) finaliza uma instrução CSS

Tipos de CSS

Tipos de CSS não se refere a forma de escrever as declarações e sim o local onde ele é inserido. Se ele estiver junto ao código HTML, chamamos de CSS inline, no início da página HTML ele é incorporado e quando colocado em um arquivo externo, ele é CSS linkado.

Se analisarmos desta forma, podemos dizer que há três tipos de CSS: Inline, incorporado e linkado. Vejamos cada um deles.

CSS Inline

O CSS Inline é aquele que é inserido junto ao código HTML, através do atributo style. Sua aplicação é bastante questionada já que o modelo fica bastante parecido com a antiga formatação via HTML.

<p style="color: #ffff00; font-size: 11px ">

CSS Incorporado

CSS incorporado é aquele que é inserido no início do código HTML dentro da tag. o modelo incorporado é melhor que o inline, mas ainda apresenta deficiências, já que ele terá efeito apenas sobre a página e não poderá ser reaproveitado para outras páginas.

<style type="text/css">

p {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

color: #FF0000;

}

</style>

CSS Linkado

CSS linkado é o modelo recomendado, pois neste modelo todo o código CSS fica em um arquivo separado, podendo ser linkado a várias páginas do site. Este é o melhor modelo para promover o reaproveitamento do código.

<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />

Tipos de aplicação

Quanto a aplicação é possível usar o CSS em quatro tipos de elementos HTML, seletores, tags, classes e identificadores.

Seletores

Seletores são os elementos que o CSS pode formatar. São eles: Tags do HTML, classes (class) e identificadores (ID´s)

As tags são todas aquelas que usamos no HTML para criar uma página, como: body, div, h1, h2, p, strong, table, ul, entre outras. As classes são criadas usando o atributo class e pode ser aplicado em praticamente qualquer tag HTML. Já o id é criado com o atributo id e também pode ser aplicado a quase todas as tags.

Tags

Qualquer tag do HTML poderá ser formatada em CSS, porém, algus recursos não provocarão efeito nenhum. Por exemplo: aplicar cor em uma tag .

Para formatar tags, basta colocar o nome da tag como seletor. Exemplo:

body{

font-family: Verdana, Arial, Tahoma;

font-size: 12px;

background-color: #E3E3E3;

}

Todas as demais tags que forem usadas dentro do body são passíveis de formatação, já as tags dentro do head não podem ser formatadas, pois não aparecem dentro do corpo do documento visível ao usuário.

Classes

Diferente das tags, as classes não são aplicadas automaticamente no HTML. Uma vez criada, uma classe deverá ser aplicada manualmente no HTML.

A função das classes é fazer formatações específicas onde as definições de tags não são atendidas.

.recuo {

font-size: 10px;

color: #ff0000;

}

Identificadores

Os identificadores em CSS correspondem ao ID no HTML, ou seja, quando você criar um ID no HTML significa que ele poderá ser formatado no CSS.

#site{

width: 500px;

background-color: #ffffff;

}

W3schools cursos gratuitos de HTML e CSS, PHP e SQL

Se você deseja aprender CSS, bem como outras tecnologias usadas na construção de páginas web, uma excelente fonte é o W3Schools. Veja abaixo algumas perguntas e respostas sobre este importante projeto e que ajuda milhares de estudantes mundo a fora.

O que é o W3Schools?

O W3Schools é um site criado por uma empresa norueguesa chamada Refsnes, com conteúdos educacionais na área de desenvolvimento em tecnologias web. Tornou-se um dos principais sites do segmento de treinamento e curso online para estudantes e entusiastas de criação de websites.

Qual a relação entre o W3Schools e o W3C?

Nenhuma, exceto talvez a origem do nome que tem as iniciais W3, mas como já explicado acima, ele é um site privado e não mantem nenhuma relação formal com o W3C.

Quais cursos estão disponíveis no W3Schools?

Primeiro que eles não são cursos formais, com classificação em aulas, módulos, entre outros. Na verdade são conteúdos organizados em forma de treinamento online para consulta e conhecimento geral de tais tecnologias. Os cursos ou treinamentos disponíveis são:

  • HTML
  • CSS
  • Javascript
  • PHP
  • SQL
  • Jquery
  • Bootstrap
  • Angular
  • ASP
  • ASP.NET
  • Entre outros.

Todos os cursos são gratuitos?

Sim. Todo o conteúdo do site é gratuito e pode ser consultado a qualquer momento. É bastante válido, não só pela gratuidade, mas também pelo próprio conteúdo que é muito relevante.

Os cursos estão em inglês ou português?

Todo o site, bem como o conteúdo nele exposto está em inglês. Aqui cabe algumas ressalvas importantes sobre isso: Quem quer estudar tecnologia da informação, no caso web que é um braço do TI, precisa estar familiarizado de alguma forma com o idioma inglês. Contudo, caso haja dificuldades com este idioma, basta usar um tradutor, como é o caso do Google Tradutor.

Os cursos de HTML e CSS são bons?

São bons e muito indicado para iniciantes que precisam conhecer o básico dessas tecnologias. Na verdade muita gente que já tem experiência irá achar que eles são básicos demais, mas não são. Eles são ideais para consulta e aprendizado, especialmente para leigos.

Os cursos de PHP e SQL são bons?

A reposta para esta pergunta pode ser a mesma da pergunta anterior. Creio que sejam cursos que atendam inicialmente a iniciantes e depois a profissionais de uma forma geral que vez ou outra precisa recorrer a algum tipo de documentação para relembrar algum código específico.

Onde ter acesso aos cursos gratuitos do W3Schools?

O site do W3Schools é: https://www.w3schools.com


VEJA TAMBÉM:

CANAL NO YOUTUBE

INSCREVA-SE:



Sistemas Web

Playlist de SQL

Youtube Youtube Youtube
© 2021 - Utilidade Pública: Tecnologia, Educação e Cidadania.