Programação Web – O que é CSS

Embora o CSS (Cascading Style Sheets ou Folha de Estilos em Cascata), assim como o HTML, não seja uma linguagem de programação, um bom profissional da área de WebDesigner deve entender muito bem o que é CSS e como e quando ele é utilizado na elaboração das páginas Web. Vamos apresentar então um mini tutorial CSS.

O que é o CSS e por que ele existe?

O CSS é uma linguagem de folhas de estilos que é utilizada para definir como os documentos escritos na linguagem de marcação (HTML ou XML) devem ser apresentados em termos de formatação, de layout. Em um cenário ideal, enquanto o HTML é usado para estruturar os conteúdos, o CSS é utilizado para formatá-los. Dessa forma há uma enorme integração entre o HTML e o CSS.

No inicio da Internet, apenas o HTML era utilizado na elaboração das páginas Web, com o tempo e a necessidade de mais alternativas de formatação dessas páginas, foram criadas novas tags e atributos de estilo no HTML para que ele pudesse atender essas necessidades de layout, passando a cumprir tanto a função de estruturação quanto a de apresentação. Porém, isto começou a criar um problema para os Web Designers pois não havia como definir um padrão que se aplicasse a todas as páginas, qualquer alteração tinha que ser aplicada em cada uma delas, tornando o desenvolvimento muito complexo principalmente em grandes portais.

Para solucionar essas dificuldades foi criado o CSS, que passou a ser utilizado especificamente para definir a formatação de um documento e suas características de apresentação como cores, fontes, alinhamento e etc. O CSS também trouxe a possibilidade de compartilhamento do formato, aonde uma mesma definição de layout pode ser aplicada a várias páginas, aumentando a flexibilidade e reduzindo a repetição de código. O HTML volta então à sua função essencial, estruturar os conteúdos.

Principais Benefícios do CSS

Podemos então listar as seguintes grandes vantagens da aplicação do CSS:

Possibilidade do controle do layout de vários documentos a partir de um único arquivo CSS
Aplicação de layouts diferentes de acordo com o dispositivo utilizado, possibilitando o layout responsivo
Possibilidade de manter a mesma formatação em diferentes navegadores
Aplicação de técnicas mais sofisticadas de desenvolvimento
Menor consumo de banda e melhor desempenho devido ao reuso do mesmo código de formatação em várias páginas

Como o CSS é integrado com o HTML?

Há diferentes maneiras de aplicar a formatação do CSS dentro do HTML, vamos a alguns exemplos bem simples:

1. O Atributo Style

Nesse caso, é utilizado o atributo Style dentro da tag Body do HTML. Por exemplo:

<html>         
    <head>               
        <title>Exemplo HTML CSS</title>          
    </head>         
    <body style="background-color: #00BFFF;">               
        <p>Esta é uma página com fundo azul</p>          
    </body>        
</html>

2. A Tag Style

Aqui é utilizada tag CSS style para definição da formatação, não um atributo dentro da tag body.

<html>         
    <head>               
        <title>Exemplo Linguagem CSS</title>     
        <style type="text/css"> 
            body {background-color: #00BFFF;}
        </style>      
    </head>         
        <p>Este é um exemplo de página com formatação</p>          
    </body>        
</html>

3. Externo – Link para o arquivo CSS

Essa é uma das opções mais utilizadas pois permite que as alterações de formatação sejam feitas uma única vez e afetem várias páginas simultaneamente. Nesse modelo o documento HTML inclui um link para um outro documento CSS de onde ele importa as definições de estilo.

exemplo.html

<html>
    <head>
        <title>O que é CSS</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <h1>Esse é um exemplo de documento HTML</h1>
    </body>
</html>

style.css

body {
    background-color: #00BFFF;
}

E o que é CSS3?

O CCS3 é simplesmente a versão mais atual do CSS, uma evolução. Entre outras as evoluções, ele incorpora novos elementos para construir animações tanto em 2 como e 3 dimensões. Incorpora também novos mecanismos para um maior controle sobre o estilo com o qual se mostram as características das páginas.

Curso Completo Programador FullStack

Se deseja informações sobre um curso completo de programação Fullstack, incluindo HTML, CSS, JavaScript e muito mais, acesse essa página.