Introdução ao CSS

Dilema da Estilização

Primeira Página da Web

<center>

deprecated-center 
<p>Lorem ipsum dolor</p>
<center>
  <p>Lorem ipsum dolor</p>
</center>
<p>Lorem ipsum dolor</p>
<center>
  <p>Lorem ipsum dolor</p>
</center>

Referência: MDN

<font>

deprecated-font 
<p>Lorem ipsum dolor</p>
<font size="+2" color="red" face="Helvetica">Lorem ipsum dolor</font>
<p>Lorem ipsum dolor</p>
<font size="+2" color="red" face="Helvetica">Lorem ipsum dolor</font>

Referência: MDN

Declaração do CSS

Inline stylesheet

Atributo Style
            declaration
          ┌──────┴───────┐
<p style="font-size: 20px;">Lorem ipsum dolor</p>
          └───┬───┘  └─┬─┘
          property   value
Atributo Style
            declaration
          ┌──────┴───────┐
<p style="font-size: 20px;">Lorem ipsum dolor</p>
          └───┬───┘  └─┬─┘
          property   value

Atributo style="":

css-inline 
<h1>Lorem ipsum</h1>
<p style="font-size: 20px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias
  praesentium, modi facilis eveniet sapiente laborum omnis officiis
  reiciendis ut asperiores molestiae ipsum nostrum error repellendus
  suscipit in cumque commodi hic.
</p>
<p style="color: lime">
  Eveniet amet laudantium aperiam nisi ratione at, blanditiis sint modi
  quidem accusantium, veniam molestias totam. Ullam unde eligendi et hic
  suscipit neque veritatis numquam provident, incidunt voluptate, ipsum,
  consequatur, quibusdam.
</p>
<p style="font-size: 20px; color: lime">
  Culpa possimus obcaecati laudantium nesciunt consequatur ducimus sint
  perferendis inventore aspernatur necessitatibus placeat officia, hic non
  laborum ad nam iure eveniet molestias officiis id nisi accusamus? Eos
  excepturi distinctio, animi.
</p>
<h1>Lorem ipsum</h1>
<p style="font-size: 20px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias
  praesentium, modi facilis eveniet sapiente laborum omnis officiis
  reiciendis ut asperiores molestiae ipsum nostrum error repellendus
  suscipit in cumque commodi hic.
</p>
<p style="color: lime">
  Eveniet amet laudantium aperiam nisi ratione at, blanditiis sint modi
  quidem accusantium, veniam molestias totam. Ullam unde eligendi et hic
  suscipit neque veritatis numquam provident, incidunt voluptate, ipsum,
  consequatur, quibusdam.
</p>
<p style="font-size: 20px; color: lime">
  Culpa possimus obcaecati laudantium nesciunt consequatur ducimus sint
  perferendis inventore aspernatur necessitatibus placeat officia, hic non
  laborum ad nam iure eveniet molestias officiis id nisi accusamus? Eos
  excepturi distinctio, animi.
</p>

Internal stylesheet

Blocos de Estilo
selector
   ┌┴┐     declaration
    p { ┌──────┴───────┐
        font-size: 20px;
    }   └───┬───┘  └─┬─┘
        property   value
Blocos de Estilo
selector
   ┌┴┐     declaration
    p { ┌──────┴───────┐
        font-size: 20px;
    }   └───┬───┘  └─┬─┘
        property   value

Tag Style:

css-internal 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Internal CSS</title>
    <style>
      p {
        font-size: 20px;
        text-align: justify;
      }
      p,
      h1 {
        color: lime;
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
    <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
  </body>
</html>
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Internal CSS</title>
    <style>
      p {
        font-size: 20px;
        text-align: justify;
      }
      p,
      h1 {
        color: lime;
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
    <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
  </body>
</html>

External stylesheet

Tag Link
<link rel="stylesheet" href="css/style.css" />
Tag Link
<link rel="stylesheet" href="css/style.css" />

Exemplo:

css-external
Arquivos
css-external
├── css
│   └── style.css
└── index.html
Arquivos
css-external
├── css
│   └── style.css
└── index.html
/codes/css/introduction/css-external/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>External CSS</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>Lorem ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias
      praesentium, modi facilis eveniet sapiente laborum omnis officiis
      reiciendis ut asperiores molestiae ipsum nostrum error repellendus
      suscipit in cumque commodi hic.
    </p>
    <p>
      Eveniet amet laudantium aperiam nisi ratione at, blanditiis sint modi
      quidem accusantium, veniam molestias totam. Ullam unde eligendi et hic
      suscipit neque veritatis numquam provident, incidunt voluptate, ipsum,
      consequatur, quibusdam.
    </p>
    <p>
      Culpa possimus obcaecati laudantium nesciunt consequatur ducimus sint
      perferendis inventore aspernatur necessitatibus placeat officia, hic non
      laborum ad nam iure eveniet molestias officiis id nisi accusamus? Eos
      excepturi distinctio, animi.
    </p>
  </body>
</html>
/codes/css/introduction/css-external/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>External CSS</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>Lorem ipsum</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias
      praesentium, modi facilis eveniet sapiente laborum omnis officiis
      reiciendis ut asperiores molestiae ipsum nostrum error repellendus
      suscipit in cumque commodi hic.
    </p>
    <p>
      Eveniet amet laudantium aperiam nisi ratione at, blanditiis sint modi
      quidem accusantium, veniam molestias totam. Ullam unde eligendi et hic
      suscipit neque veritatis numquam provident, incidunt voluptate, ipsum,
      consequatur, quibusdam.
    </p>
    <p>
      Culpa possimus obcaecati laudantium nesciunt consequatur ducimus sint
      perferendis inventore aspernatur necessitatibus placeat officia, hic non
      laborum ad nam iure eveniet molestias officiis id nisi accusamus? Eos
      excepturi distinctio, animi.
    </p>
  </body>
</html>
/codes/css/introduction/css-external/css/style.css
p {
  font-size: 20px;
  text-align: justify;
}
 
p, h1 {
  color: lime;
}
/codes/css/introduction/css-external/css/style.css
p {
  font-size: 20px;
  text-align: justify;
}
 
p, h1 {
  color: lime;
}

Sintaxe do CSS

Propriedades

property-font
/codes/css/introduction/property-font/index.html
<p>Lorem ipsum dolor</p>
/codes/css/introduction/property-font/index.html
<p>Lorem ipsum dolor</p>
/codes/css/introduction/property-font/css/style.css
p {
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  font-family: Times;
}
 
p {
  /* Shorthand Properties */
  font: italic bold 20px Times;
}
/codes/css/introduction/property-font/css/style.css
p {
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  font-family: Times;
}
 
p {
  /* Shorthand Properties */
  font: italic bold 20px Times;
}

Seletores

Elemento

selector-element
/codes/css/introduction/selector-element/index.html
<h1>Lorem ipsum dolor</h1>
<p>
  Lorem ipsum, <span>dolor</span> sit amet consectetur adipisicing elit. Id,
  quia...
</p>
<div>
  <p>
    Expedita, officia rem, non nulla harum ut fugit optio explicabo
    temporibus eligendi...
  </p>
  <p>
    Perferendis eaque ullam harum illum quas repudiandae dolore minima
    labore quod...
  </p>
</div>
/codes/css/introduction/selector-element/index.html
<h1>Lorem ipsum dolor</h1>
<p>
  Lorem ipsum, <span>dolor</span> sit amet consectetur adipisicing elit. Id,
  quia...
</p>
<div>
  <p>
    Expedita, officia rem, non nulla harum ut fugit optio explicabo
    temporibus eligendi...
  </p>
  <p>
    Perferendis eaque ullam harum illum quas repudiandae dolore minima
    labore quod...
  </p>
</div>
/codes/css/introduction/selector-element/css/style.css
h1 {
  color: lime;
}
 
span {
  font-weight: bold;
  font-size: 1.2rem;
  color: tomato;
}
 
div {
  color: tomato;
}
/codes/css/introduction/selector-element/css/style.css
h1 {
  color: lime;
}
 
span {
  font-weight: bold;
  font-size: 1.2rem;
  color: tomato;
}
 
div {
  color: tomato;
}

#id

selector-id
/codes/css/introduction/selector-id/index.html
<h1>Lorem ipsum</h1>
<p id="first">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
<p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
<p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
/codes/css/introduction/selector-id/index.html
<h1>Lorem ipsum</h1>
<p id="first">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
<p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
<p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
/codes/css/introduction/selector-id/css/style.css
p {
  color: green;
}
 
#first {
  color: red;
}
/codes/css/introduction/selector-id/css/style.css
p {
  color: green;
}
 
#first {
  color: red;
}

.class

selector-class
/codes/css/introduction/selector-class/index.html
<h1>Lorem ipsum</h1>
<p class="color-red">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
<p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
<p class="color-red">
  Eveniet amet laudantium aperiam nisi ratione at, blanditiis...
</p>
/codes/css/introduction/selector-class/index.html
<h1>Lorem ipsum</h1>
<p class="color-red">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</p>
<p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
<p class="color-red">
  Eveniet amet laudantium aperiam nisi ratione at, blanditiis...
</p>
/codes/css/introduction/selector-class/css/style.css
p {
  color: green;
}
 
.color-red {
  color: red;
}
/codes/css/introduction/selector-class/css/style.css
p {
  color: green;
}
 
.color-red {
  color: red;
}

Descendant combinator

selector-descendant-combinator
/codes/css/introduction/selector-descendant-combinator/index.html
<header>
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
  </ul>
</header>
<main>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</main>
/codes/css/introduction/selector-descendant-combinator/index.html
<header>
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
  </ul>
</header>
<main>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</main>
/codes/css/introduction/selector-descendant-combinator/css/style.css
header ul {
  list-style-type: none;
}
/codes/css/introduction/selector-descendant-combinator/css/style.css
header ul {
  list-style-type: none;
}

Função

rgb() e rgba()

function-rgb
/codes/css/introduction/function-rgb/index.html
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...</p>
/codes/css/introduction/function-rgb/index.html
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...</p>
/codes/css/introduction/function-rgb/css/style.css
h1 {
  color: rgb(255, 0, 0);
}
 
p {
  color: rgba(255, 0, 0, 0.5);
}
/codes/css/introduction/function-rgb/css/style.css
h1 {
  color: rgb(255, 0, 0);
}
 
p {
  color: rgba(255, 0, 0, 0.5);
}

calc()

function-calc
/codes/css/introduction/function-calc/index.html
<main>
  <h1>Lorem ipsum dolor</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...
  </p>
</main>
/codes/css/introduction/function-calc/index.html
<main>
  <h1>Lorem ipsum dolor</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...
  </p>
</main>
/codes/css/introduction/function-calc/css/style.css
main {
  width: calc(100% - 100px);
  margin: auto;
}
/codes/css/introduction/function-calc/css/style.css
main {
  width: calc(100% - 100px);
  margin: auto;
}

At-rules

at-rule-import
/codes/css/introduction/at-rule-import/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>At-rule @import</title>
    <style>
      @import url('./css/style.css');
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...</p>
  </body>
</html>
/codes/css/introduction/at-rule-import/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>At-rule @import</title>
    <style>
      @import url('./css/style.css');
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...</p>
  </body>
</html>
/codes/css/introduction/at-rule-import/css/style.css
h1 {
  text-align: center;
  color: #f00;
}
/codes/css/introduction/at-rule-import/css/style.css
h1 {
  text-align: center;
  color: #f00;
}

Media Query

media-print
/codes/css/introduction/media-print/index.html
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...</p>
/codes/css/introduction/media-print/index.html
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...</p>
/codes/css/introduction/media-print/css/style.css
h1 {
  text-align: center;
  color: #f00;
}
 
@media print {
  h1 {
    text-align: left;
    color: #000;
  }
}
/codes/css/introduction/media-print/css/style.css
h1 {
  text-align: center;
  color: #f00;
}
 
@media print {
  h1 {
    text-align: left;
    color: #000;
  }
}

Variáveis

css-variable
/codes/css/introduction/css-variable/index.html
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...</p>
/codes/css/introduction/css-variable/index.html
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quia...</p>
/codes/css/introduction/css-variable/css/style.css
/* light mode */
:root {
  --background-color: #fff;
  --text-color: #000;
}
 
/* dark mode */
html.dark {
  --background-color: #0d1117;
  --text-color: #F7F8F8;
}
 
body {
  background: var(--background-color);
  color: var(--text-color);
}
/codes/css/introduction/css-variable/css/style.css
/* light mode */
:root {
  --background-color: #fff;
  --text-color: #000;
}
 
/* dark mode */
html.dark {
  --background-color: #0d1117;
  --text-color: #F7F8F8;
}
 
body {
  background: var(--background-color);
  color: var(--text-color);
}

Unidades de Medida

css-unit
/codes/css/introduction/css-unit/index.html
<p style="font-size: 1rem">Lorem ipsum</p>
<p style="font-size: 16px">Lorem ipsum</p>
/codes/css/introduction/css-unit/index.html
<p style="font-size: 1rem">Lorem ipsum</p>
<p style="font-size: 16px">Lorem ipsum</p>

Complemento: Fundamentos Visuais e Práticos do CSS

Pensando em Caixas

Cada elemento HTML é tratado como uma caixa retangular. CSS permite controlar:

Regras CSS: Seletores e Declarações

p {
  font-family: Arial;
  color: gray;
}
p {
  font-family: Arial;
  color: gray;
}

Você pode combinar seletores com vírgulas ou usar hierarquias como div > p ou h1 + p.

Como o CSS é Carregado

Cascata, Especificidade e !important

Herança

Propriedades como color, font-family e line-height são herdadas pelos filhos. Outras como border, margin e padding não são herdadas.

Cores

Três formas principais de definir cores:

/* Nome da cor */
color: DarkCyan;
 
/* Hexadecimal */
color: #ee3e80;
 
/* RGB */
color: rgb(100,100,90);
/* Nome da cor */
color: DarkCyan;
 
/* Hexadecimal */
color: #ee3e80;
 
/* RGB */
color: rgb(100,100,90);

Novas formas com CSS3:

/* RGBA com transparência */
color: rgba(100, 100, 90, 0.5);
 
/* HSL e HSLA */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);
/* RGBA com transparência */
color: rgba(100, 100, 90, 0.5);
 
/* HSL e HSLA */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

Contraste e Acessibilidade

Use Snook Contrast Checker para garantir legibilidade.

Diferenças entre Navegadores

Testar em navegadores diferentes é essencial: Firefox, Chrome, Safari, Edge e versões antigas podem renderizar propriedades CSS de maneira distinta.

Use ferramentas como:

Editar esta página