Introdução ao CSS

Publicado em 03 de Sep 2013.

Olá pessoal, neste artigo irei escrever sobre uma introdução ao CSS, vamos dar um passo com a linguagem de estilos CSS. Vamos a introdução do que é o CSS

O que é CSS?

O CSS ou folhas de estilos em cascata, permite você editar ou adicionar estilos ao seus elementos HTML, deixando apenas o HTML cuidar da formatação e o CSS pelos estilos, vamos ver como trabalhar da melhor maneira o CSS utilizando de forma externa e internamente.

Primeiros passos...

Vamos começas com ABC.. do CSS, utilizando os estilos no mesmo documento, o código deve ser inserido entre as tags HEAD, do código HTML, veja o exemplo abaixo:

<html>
    <head>
        <title>Primeira página com estilos</title>
        <style type="text/css">

            //Código CSS
            p {
                color: blue;
            }

        </style>
    </head>
    <body>
        <p>Olá Mundo!</p>
    </body>
</html>

Neste exemplo todo o documento será afetado pelo estilo CSS, o resultado será que para todo parágrafo

irá ter a cor azul. Isso é ideal para sites pequenos ou que tenham um determinado conteúdo que será aplicado somente nesta página.

Fácil não é mesmo, vamos complicar um pouco.

Segundo passo..

Para deixar um pouco mais complicado vamos utilizar nossa folha de estilo de arquivo externo, vamos criar este arquivo com a extensão .css, para que o arquivo seja importado para sua página HTML utilize o seguinte comando:

<link rel="stylesheet" type="text/css" href="arquivo.css">

Outra maneira que você utilizar é essa:

<style type="text/css">@import url(arquivo.css)</style>

Resultado final, com o HTML e os métodos de importação

<html>
    <head>
        <title>Primeira página com estilos</title>
        <link rel="stylesheet" type="text/css" href="arquivo.css" />
    </head>
    <body>
        <p>Olá Mundo!</p>
    </body>
</html>

Recomendo você utilizar o primeiro método que é mais utilizado e mais vistos em código e frameworks CSS

Tudo muito legal, mais quais as vantagens de eu utilizar um arquivo css externo em meu site, a primeira é que você reutilizar em várias páginas, sem ter a necessidade de ficar reescrevendo o código, e quando você precisar fazer um alteração no estilo você altera apenas este arquivo.

Exemplo:

Você tem um site com 100 páginas imaginamos que você escreveu em cada página um CSS, mas você quer mudar um elemento em todas as páginas você terá que abrir cada página e alterar o estilo.

Ah... mas eu preciso apenas alterar um determinado item em uma única página o que fazer então?

Vamos utilizar o estilo Inline

O estilo inline, como o próprio nome diz, estilo em linha, com ele você pode adicionar estilo no elemento, HTML que você determinou.

<h2 style="font-size:16px;">Olá Mundo eu estou vivo!</p>

As desvantagens ou vantagens dependendo do ponto de vista é que apenas o elemento será afetado.

O que podemos de tirar de conclusão, que CSS é simples e que podemos utilizar para estilizar nossas páginas HTML