Objetivos de aprendizagem
CSS descreve como os elementos HTML devem ser exibidos. Quando um navegador vai exibir uma página Web ele lê o conteúdo do HTML e a formatação do CSS. HTML e CSS se completam.
<p>) de uma página HTML tenham o seu conteúdo (texto) alinhado à direita, seria necessário este CSS:<p style="text-align: right; ">texto</p>. Esta forma é considerada uma má prática, pois mistura o código HTML com CSS e não permite a reutilização de código, tornando a manutenção e evolução do código mais complexa. Portanto, EVITE! <style type="text/css"> p { text-align: right; } </style>.Esta forma também é considerada uma má prática, pois coloca o código HTML com CSS em um mesmo arquivo e não permite a reutilização do CSS entre arquios HTML diferentes, que pode gerar duplicidade de código e tornar a manutenção mais trabalhosa. Portanto, EVITE! .css, separadamente do arquivo HTML. Nesse caso é necessário vincular o arquivo CSS no arquivo HTML. A ligação entre o HTML e CSS é realizada por meio do elemento link, que deve ser adicionado no elemento <head>. Veja o exemplo abaixo, onde o arquivo style.css está vinculado ao arquivo index.html:rel="stylesheet" especifica que o documento vinculado é um CSS e o atributo href recebe como valor a localização (link) do arquivo CSS a ser vinculado.<p> (paragrafo) serão estilizados conforme o bloco de declarações.{}, contém uma ou mais declarações separadas por ponto e vírgula.text-align e color são utilizadas para definir o alinhamento do texto e cor do texto respectivamente. No exemplo da imagem acima, para o text-align foi atribuído o valor right, que alinha o texto à direita e para a color foi atribuído o valor green, que deixa a cor de texto verde. {} (chaves) determina o inicio e o fim de um bloco de declarações; : (dois pontos) separa a propriedade do valor;; (ponto e vírgula) encerra uma declaração; p { } #my-id { } id por página HTML. O seletor de id inicia com uma hashtag #..my-class { } . .a:hover { }seletor:estado ./* comentários */text-align, color e font-size, que só fazem efeitos em elementos de texto. Já outras podem ser aplicadas com efeitos em qualquer elemento, tais como width, margin, etc. Vamos ver mais detalhes sobre elas na próxima seção. padding), borda (border) e margem externa (margin). Todas essas partes que compõe o elemento é conhecida como box model. A figura abaixo tem a representação gráfica de um elemento.width - largura de um elemento, pode ser definido com valor fixo usando píxel (px) ou valor dinâmico usando porcentagem (%);height - altura de um elemento, pode ser definido com valor fixo usando píxel (px) ou valor dinâmico usando porcentagem (%);margin - espaço externo a um elemento.border - linha que envolve todo o elemento.padding - espaço entre a borda e o conteúdo.background-color - a cor de fundo do elemento, as propriedades de cores podem receber valores literais (nome da cor em inglês), ou cores em hexadecimal (aquelas que começam #) ou cores RGB padding, margin e border são aplicadas aos quatro lados de um elemento: topo, direita, baixo e esquerda. No exemplo acima, essas propriedades receberam apenas um valor, com isso esse valor é aplicado a todos os lados do elemento, no entanto, é possível especificar valor específico para cada lado. Para as propriedades margin e padding há duas formas de fazer isso.padding aplicado é 2px para o topo, 5px para a direita, 3px para baixo e 4px para esquerda.margin aplicada é 5px para o topo e baixo e 7px para esquerda e direita.margin:margin-topmargin-rightmargin-bottommargin-leftpadding:padding-toppadding-rightpadding-bottompadding-leftborderborder-topborder-rightborder-bottomborder-leftborder) recebem três valores: largura da borda, tipo da borda e cor da borda.padding, margin e border , estamos usando a forma abreviada das propriedades individuais, com isso deixamos o código mais curto e limpo, facilitando a manutenção do mesmo. Sempre que possível utilize a forma abreviada, só recomendo a utilização das propriedades individuais quando realmente for necessário fazer customizações para lados específicos do elemento.