O que é CSS?

0
509

O CSS, Cascading Style Sheets, tem como função estilizar as páginas web, como o nome já diz, ele é uma “folha de estilos”, que pode ser chamado no HTML interno ou externo, e, neste post tentarei explicar o que é CSS de uma forma simples, e como utilizar o mesmo.

A sintaxe…

O CSS se apropria de uma sintaxe muito simples, onde, é definido três ações, o seletor, a propriedade e o valor. Realizando estas três ações você já poderá trabalhar com o CSS estilizando sua página já estruturada em HTML.

seletor { propriedade: valor; }

Para um exemplo mais prático, vamos fazer o seguinte, irei estilizar o corpo do site. Se você já estudou HTML, sabe que o corpo do site é a tag <body>, nesta mesma tag, vamos colocar um fundo preto e fazer com que a escrita do site fique branca. Deste modo:

body {
  background: #000;
  color: #fff;
}

O seletor, no exemplo acima, é o body, nele, apresentamos a propriedade background, que como o nome já diz, é um fundo. E neste fundo acrescentamos um valor, o #000 que na escala hexadecimal de cores é o valor mais escuro, no caso, o preto.

Se você ainda tem dúvidas em questão as cores hexadecimais, recomendo você ver atabela de cores em valores hexadecimais do MXStudio.

Como aplicar o CSS no site?

css_cascading_style_sheet

Existem várias formas de aplicar o CSS no site, na verdade, três apenas, o inline, o interno e oexterno“Mas… Qual é o mais recomendado?”, então, o mais recomendado é o externo, onde, você faz uma chamada de um arquivo externo, claro, através de um link no cabeçalho de seu site. Abaixo eu mostro os três modos de aplicar um CSS.

CSS Inline:
O CSS Inline se baseia em aplicar o CSS na prória linha do HTML, por isso, o Inline. Você o aplica abrindo uma espécie de atributo em sua tag HTML, como você abre uma classe ou id, você o faz abrindo o style. Deste modo:

<body style="background: #000;color: #fff;">

Esta função, inline, parece interessante para quando você alterar um simples detalhe naquela tag, é tentador também, mas não, não é recomendado.

CSS Interno:
O CSS Interno se baseia em aplicar o CSS dentro do seu site. Você o aplica dentro do cabeçalho de seu site, a tag <head>, com outra tag, a <style>. Deste modo você pode trabalhar de uma forma mais completa, utilizando seletores, do modo que expliquei no começo do artigo (você não viu?). Por exemplo:

<html>
<head>
	<title>Título do seu site</title>

	<style>
		body {
			background: #000;
			color: #fff;
		}
	</style>
	
</head>
<body>
Seu conteúdo...
</body>
</html>

Este modo é super interessante, por conter dentro da página seu HTML e CSS, você poderá alterar tudo de uma só vez quando tiver algum problema, não é sensacional? Não, não é. E por que? Porque deste modo o seu site ficará muito lento, o navegador lerá seu CSS antes mesmo de ler seu HTML, tendo assim, dependendo da quantidade do seu CSS, uma lentidão absurda. E por outro lado, também não é recomendado pois seu CSS fica à mostra de todos, que podem, se forem maus, copiar seu CSS e utilizar em seus próprios sites. Você não quer isso, quer? Por isso, vamos ao próximo.

♥ CSS Externo:

css-back-to-basic


Este método, na minha opinião é o melhor, com ele você faz uma requisição de um servidor de um arquivo, no caso, .css e faz um link do mesmo para sua página, fazendo uma chamada, com uma simples linha no HTML. Mas aí vocês me perguntam, “como eu faria o CSS?”, você o faria do mesmo modo, mas agora num editor de texto ou códigos, pode ser num simples bloco de notas até um (lindo) Sublime Text da vida, depois salvariam seu arquivo com a extensão.css e fariam o upload do mesmo num servidor, caso você não tenha uma hospedagem,recomendo o Dropbox.

Depois que você tenha feito o upload do seu arquivo.css, você o chamará da seguinte maneira:

<html>
<head>
	<title>Título do seu site</title>
	<link href="link-do-arquivo.css" rel="stylesheet" />
</head>
<body>
Seu conteúdo...
</body>
</html>

Desta forma, seu CSS está assegurado em um servidor, que se você quiser, não terá acesso, com isso, seu CSS estará assegurado de pessoas más… E mais, fazendo isso, seu site ficará muito mais leve, para que pessoas (como eu) que tem a internet de baixa qualidade possam acessá-lo com facilidade.

Espero ter ajudado vocês, este artigo foi publicado no dia , mas reescrito no dia . Qualquer dúvida que esteja incomodando, deixa-a no comentário que terei prazer em matá-la junto com você. Ok? Ok.

RECEBA NOSSAS ATUALIZAÇÕES GRÁTIS
Enviamos nossos novos posts por e-mail para que você não perca nenhuma novidade!