translations and css code examples fixed (#23553)

guide/portuguese/css/css-custom-properties/index.md

@@ -19,23 +19,39 @@ Dentro de um seletor, as propriedades personalizadas são declaradas usando dois
 
 Declarar propriedades personalizadas no seletor `:root` torna essas propriedades disponíveis globalmente. O seletor `:root` pode ser considerado o mesmo que o seletor `html` .
 
-### Usando propriedades personalizadas
+### Usando Propriedades Personalizadas
 
-Para usar uma propriedade customizada, é utilizada a função `var()` , que usa um único argumento do nome da propriedade customizada. \`\` \`css h1 { font-size: var (- headerSize); }
+Para usar uma propriedade customizada, é utilizada a função `var()`, que usa um único argumento do nome da propriedade customizada. 
+```css 
+h1 {
+  font-size: var(--headerSize);
+}
  
-.card { box-shadow: var (- dropShadow); }
+.card {
-```
+  box-shadow: var(--dropShadow);
-### Cascading Custom Properties 
+}
- When custom properties are declared in the `:root` selector, those properties are globally available; any style rules can use the properties. If a custom property needs to be different for specific element, class, or id, a property of the same can be declared in that selector. The compiler will first look for a property name within the immediate enclosing selector, then move to the `:root`. 
 ```
 
-css : root { - sem cor: vermelho; }
+### Propriedades Personalizadas Cascateadas 
+Quando propriedades personalizadas são declaradas no seletor `:root`, essas propriedades são disponíveis globalmente; todos os estilos podem usar a propriedade. Se uma propriedade personalizada precisa diferente para um elemento específico, classe ou id, a propriedade do mesmo poder ser declarada naquele seletor. O compilador irá primeiramente olhar para o nome da propriedade dentro do seletor imediatamente encapsulando, e depois mover para o `:root` 
 
-h1 { - sem cor: azul; }
+```css
+:root {
+  --font-color: red;
+}
 
-h1 { font-color: var (- fonte-cor); / \* azul \* / }
+h1 {
+  --font-color: blue;
+}
 
-h2 { font-color: var (- fonte-cor); / \* vermelho \* / } \`\` \`
+h1 {
+  font-color: var(--font-color); /* blue */
+}
+
+h2 {
+  font-color: var(--font-color); /* red */
+}
+```
 
 #### Mais Informações: