CSS Tutorial

Question 1

Como dar estilo somente a titulos h2 dentro de uma div?

Answer 1

div h2 {
# Estilos
}

Question 2

O que é e como funciona inheritance no CSS?

Answer 2

É o fato de elementos filhos herdarem alguma propriedades dos elementos pai. Nem todas as propriedades são herdadas.

Estilos referente a fonte e typograph são herdadas.

Alguns elementos não herdam propriedades mesmo de fonte como button, select, textarea,… É possível forçar a herança utilizando:
button, input, textarea, select {
font: inherit
}

Question 3

Qual a diferença entre rem e em?

Answer 3

rem utiliza como referência o tamanho da raiz, que é influenciado pelo tamanho da font do navegador (esse é um dos motivos que não devemos utilizar px em fontes).

em vai utilizar como referência o tamanho da font do elemento relativo. Então podemos utilizar rem para setar o tamanho da fonte de um botão e em para definir o tamanho do padding margin de forma relativa a fonte do botão.

Question 4

Qual CSS reset utilizar?

Answer 4

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box; # -> Dessa forma quando definido a largura ou altura de um elemento será considerado o tamanho total, com conteúdo, margin, padding e border. Mais fácil de controlar.
  }

Question 5

Qual atalho para duplicar uma linha no VS Code?

Answer 5

Shift Alt Down

Question 6

How make a circle with css?

Answer 6

a

Question 7

Quando setamos em body o tamanho da fonte, nem todos os elementos herdam essa propriedade, como por exemplo o texto de botões e input. Como fazer para que essa herança ocorra?

Answer 7

body {
font-size: 2rem;
}

input, button {
font: inherit;
}

Question 8

Como aumentar a distância entre as linhas?

Answer 8

Utilizando a propriedade line-height. É uma ótima forma de aumentar a legibilidade dos textos aumentar um pouco a distância entre as linhas dos parágrafos.

Question 9

Cite algumas fontes populares utilizadas em sites.

Answer 9

font-family:

sans-serif
monospace
cursive
fantasy

Question 10

O que a propriedade
font-family: ‘Courier New’, Courier, monospace
faz?

Answer 10

O navegador irá procurar pelas fontes instalas na sequência.
Primeira opção é ‘Courier New’. Se ela não estiver instalada então utiliza Courier.

Se também não conseguir irá utilizar monospace.

Question 11

O que é CORS e como funciona?

Como evitar o erro “No ‘Access-Control-Allow-Origin’?

Answer 11

Cross-origin resource sharing, or CORS, is a browser security feature that restricts cross-origin HTTP requests that are initiated from scripts running in the browser.

This works by adding new HTTP headers that let the servers describe thich origins are permitted to read that information from a web browser, what HTTP methods can be used in the request, what headers can be used, and so on.

Como evitar o erro “No ‘Access-Control-Allow-Origin’?

The REST API resource is configured with an OPTIONS method that returns the required CORS headers.

The HTTP methods GET, PUT, POST, etc. associated with the resource are also returning the required CORS headers in case of both Proxy and Non Proxy integrations.

Question 12

What is the diferrence between :: (pseudo-element) vs : (pseudo-classes)?

How change the color of an link after visited?

Answer 12

Pseudo-classes (:) allow you to style the different states of an element e.g. when you hover over it, when it is disabled, when it is the first child of its parent, etc.

Pseudo-elements (::) allow you to style different parts of an element e.g. the first line, the first letter, inserting content before or after, etc.

a:visited {
color: purple;
}

Question 13

What are the most common pseudo-classes to set style of links?

Answer 13

a {}
a.visited {}
a.focus {}
a.hover {}
a.active {}

Question 14

What are the most comum styles applied to lists?

Answer 14

ol {
list-style-type: [options: …lower-alpha, decimal-leading-zero, disc, upper-roman, none]
}

ul {
list-style-type: square;
text-align: center;
list-style-position: inside;
list-style-image: url(‘path_img_checkmark.png…’)
list-style: square url(…) inside;
}

ul li:nth-child(2) { # Apenas altera o segundo item da lista
color: red;
}
ul li:nth-child([options: odd, even, number,…]) { # Apenas altera o segundo item da lista
color: red;
}

Question 15

How change list’s markers with pseudo-elements??

Answer 15

ul li::marker {
color: red;
font-family: fantasy;
…
}

Question 16

What are the defaults properties of block level elements?

Answer 16

display: block # é o default para parágrafos e outros elementos

width: 100% #relative to parent element

Question 17

What are the defaults properties of inline block elements?

Answer 17

span is by default inline block

inline elements ficam na mesma linha do elemento pai/irmãos.

Não é possível aplicar margin, e height a inline elements.

Padding funciona porém irá ultrapassar o elemento pai (span com padding dentro de um parágrafo pode ficar bem estranho).
Para resolver isso utilize display: inline-block; Dessa forma o padding será acompanhado pelo elemento relativo. Com inline-block o margin também irá funcionar.

Question 18

Crie um parágrafo com o texto “This is another paragraph”, onde another é um span com a classe “opposite”.

Adicione background diferentes ao parágrafo e ao span.

Faça o span ter padding e margin respeitadas.

Answer 18

Parei em 2:53:10

p {
background-color: lightgray;
}

.opposite {
display: inline-block; # essa propriedade inline block que faz margin e height serem respeitadas. Se tivesse o padrão (que é inline para span), essas propriedades não estariam funcionando. Padding até funcionaria porém sem respeitar o tamanho do elemento relativo.
background-color: #333;
color: whitesmoke;
margin-top: 100px;
height: 200px;
padding: 4rem;
}

Question 19

Anotações Curso

Answer 19

(0:00:00) Intro - ok
(0:01:08) Chapter 1: Start Here - ok
(0:14:50) Chapter 2: Selectors - ok
(0:34:41) Chapter 3: Colors - ok
(0:51:13) Chapter 4: Units & Sizes - ok
(1:11:56) Chapter 5: Box Model - ok
(1:37:08) Chapter 6: Typography - ok
(2:00:29) Chapter 7: Styling Links - ok
(2:16:37) Chapter 8: List Styles - ok
(2:32:31) Chapter 9: Mini Project - ok
(2:45:04) Chapter 10: Display
(3:00:21) Chapter 11: Floats
(3:12:46) Chapter 12: Columns
(3:34:30) Chapter 13: Position
(3:57:53) Chapter 14: Flexbox
(4:21:39) Chapter 15: Grid Layout
(4:46:33) Chapter 16: Images
(5:32:40) Chapter 17: Media Queries
(5:58:59) Chapter 18: Card Project
(6:33:21) Chapter 19: Pseudo
(6:52:56) Chapter 20: Variables
(7:20:28) Chapter 21: Functions
(7:50:05) Chapter 22: Animations -> OK
(8:37:33) Chapter 23: Organization
(8:57:23) Chapter 24: Final Project

Question 20

Quais tipos de transformações podemos aplicar com CSS?

Answer 20

Podemos aplicar transformações com a propriedade transform.

Alguns valores possíveis são
- rotateY(78deg)
- rotateX (rotaciona no eixo X -> em 90 graus desaparece)

• rotateZ (sentido do relógio)

Move o elemento em relação ao eixo escolhido:
- translate(2rem)
- translateX
- translateY

Aumentar o tamanho do elemento
scale(50%)
scaleX(20%)
scaleY(30%)

Formado Losango
skewX(-10deg)
skewY(-20deg)
shew(-10deg, 5deg)

Question 21

How set an transition on CSS?

Answer 21

div:hover {
background-color: midnightblue;
transition-property: background-color;
transition-duration: 2s;
transition-delay: 0.5s;
}

Também é possível configurar a transição para mais de uma propriedade ao mesmo tempo:

div:hover {
background-color: midnightblue;
transition-property: background-color, transform;
transition-duration: 2s, 3s;
transition-delay: 0.5s;
}
dev:last-child:hover {
transform: rotate(180deg)
}

Outra opção é aplicar a transição para todas as propriedades:
div:hover {
background-color: midnightblue;
transition: all 2s 0.5s
}
dev:last-child:hover {
transform: rotate(180deg)
}

Question 22

Como alterar o comportamento das transições com CSS?

Answer 22

É possível utilizar a propriedade transition-timing-function.

Os principais valores são:
ease (default), linear

Question 23

Como criar animações no CSS?

Answer 23

.animate {
animation-name: slide;
animation-duration: 5s;
animation-timing-function: ease-in-ou;
animation-delay: 1s;
animation-iteration-count: 5;
}

@keyframes slide {
0% {
transform: translateX(0);
}
33% {
transform: translateX(600px) rotate(180deg);
}
66% {
transform: translateX(-600px) rotate(-180deg);
}
100% {
transform: translateX(0);
background-color: rebeccapurple;
}

Outras propriedades / valores de animações são:
animation-direction: alternate;
(Nas execuções ímpares seguirá a direção oposta)

animation-fill-mode: -> backwards é o default
fowards (permanece no estado final definido no keyframes.)

Também é possível aplicar esses efeitos de animção somente com a propriedade animation:
.animate {
animation:5s ease-in-out 1s 2 normal forwards slides;
}

Question 24

Como alterar vários elementos dentro do elemento pai de uma vez?

Answer 24

Utilizando o pseudo-class :is
nav :is(a:hover, a:focus) {
…
}

Sem o is ficaria assim:
nav a:hover,
nav a:focus {
…
}

Também podemos utilizar :where da mesma forma.
A diferença entre eles é a especificidade. Com o where, a especificidade é mais baixa e outros seletores iguais sem o where irão ter mais prioridade na mudança da propriedade de estilo do elemento.

Question 25

O que faz a pseudo-class :target?

Answer 25

Faz o estilo ser aplicado ao último elemento selecionado (href referenciando o id de um elemento especifico).

.card:target {
border: 1px solid…
}

Question 26

Como selecionar elementos que tem (ou não) um determinado atributo?

Answer 26

Por exemplo, para descobrirmos todas as imagens que não tem o atributo alt podemos utilizar a seguinte sintaxe:
# Irá selecionar todas as imagens que não (not) tem o atributo alt
.card img:not([alt]) {
border: 10px solid red;
}