Estilos

Publicado em por

style é um atributo usado para adicionar estilos a um elemento, por exemplo, cor, fonte , tamanho etc.
<p style=”color:red;background-color:blue;”> Paragrafo vermelho fundo azul</p>
Porém colocar estilos em cada uma das tags HTML não é um boa pratica de desenvolvimento hoje me dia. Pois teríamos a necessidade de alterar os estilos em varias tags da nossa pagina, caso fosse necessário.
Então podemos fazer os estilos de forma mais organizada e centralizando essa personalização em uma tag <style></style> e indicando quais tags terão estilos.

A sintaxe desse método é bem simples :

indicamos qual será o seletor , depois qual propriedade iremos alterar e incluímos o valor desejado. O p é o nosso seletor , color a propriedade e blue seu valor. Existem propriedades que possuiem subpropriedade como é o caso do background-color onde
background é propriedade e color é a subpropriedade.

  <style>
      p {
        color: blue;
        background-color: yellow;
      }
    </style>

Experimente as seguinte propriedades para cada parágrafo

 font-family: serif;
 
font-family: sans-serif;
 
font-family: sans-serif;

CSS

Você pode adicionar CSS em um documento HTML de 3 formas:

  • Inline – usado como atributo em uma tag HTML
  • Internal -usado na prórpia pagina coma um bloco de estilo <style>
  • External – usado em um arquivo externo <link> indicando um arquivo.css
    • <link rel=”stylesheet” href=”estilo.css”>

Todos as formas devem ser inseridas na sessão <head>

Estilos de Bordas em Tabelas:

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;
border-style: dotted dashed solid double;

Podemos definir os estilos das bordas de acordo com a sua localização, para isso usamos as seguintes propriedades:

border-top-style: dotted; -> borda superior
border-right-style: solid; -> borda direita
border-bottom-style: dotted; ->borda inferior
border-left-style: solid; -> borda esquerda

O tamanho da borda tambem pode ser alterado com a seguinte propriedade:

border: 4px;

podemos também arredondar as bordas com:

border-radius: 10px;

px é uma unidade de medida.