Links

CSS combinators

contains selector

Exemplo de alguns seletores

.name.surname - Double Class Selector https://shihabiiuc.com/multiple-class-id-selectors-in-css/

.class

#id

p.demo - seleciona a tag com a classe .demo

span - seleciona todas as tags correpondentes

div + span - prox span depois de uma div

div > span - span dentro de uma div ou elemento pai seja uma div

p ~ ul - sel3ciona todas as ul preceded by p

.demo | div.demo - mesma classe com diferentes tags

p.center | p.large - multiclass only for p

<g> do it now </g> - Também funciona com tags personalizada, but is not a good practice

Todos os seletores

                g{
                  color: blue;
                }
          

Multi class: apenas a tag p

                  p.center {
                    text-align: center;
                    color: red;
                  }                  
                  p.large {
                    font-size: 300%;
                  }
          

A classe center e large foi especifica para a tag p e não global, então outras tags não serão afetadas mesmo declarando a classe em questão <h1> não será afetado.

                  <h1 class="center">This heading will not be affected</h1>
                  <p class="center">This paragraph will be red and center-aligned.</p>
                  <p class="center large">This paragraph will be red, center-aligned, and in a large font-size.
                  </p>
          

Exemplo de hierarquia de seleção

            body{
              zoom:150%;
              }
            body, background-color: gray or background-image, 
            background-position, background-repeat
            background-color: transparent;
            color: yellow;
            text-align: center;
            font-size: 40px;
            font-weight: bold; ou 100 a 100 se a fonte suportar e.g: 'Work Sans' in Googe Fonts
            visibility: hidden; (For disable itens)
            padding: 50px;
            float: left;
            overflow:;
            height: 50vh;
            width: 50vw;
            box-shadow -webkit-box-shadow:
            line-height: 1.2rem ; - aumentar espaços entre os textos
            width: fit-content;
            box-shadow: 0 0 15px;
            box-shadow: 0px 0px 2px 2px royalblue; //four sides
            border-top;
            border-bottom;
            letter-spacing;
            text-transform: uppercase, lowercase, capitalize            
            text-decoration-line: overline, underline
            text-decoration-color: red;
            text-decoration-style: wavy
            text-decoration-thickness: 4px; `means: espessura`
            text-decoration: none // no decoration and shorhand for 4 argumentos
            text-decoration: underline red dashed 10px;            
            text-indent: 20px; /*inicio do paragrafo */
            text-shadow: 1px 1px 0px black;
            background-color: rgba(0, 0, 0, 0.514); //transparent
            user-select: none; //desativa o cursor     
            webkit-fill-available // fills all available spece      
            border: 10px solid currentcolor;`
            `console.log of CSS: *{
              outline-color: 2px solid;
            }
            add too a: background: rgb(0 100 0 / 0.1);`            
          

<meta name="viewport" content="width=device-width, initial-scale=1.0">
                

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

CORAL

Use sempre o DevTools, este será a melhor ferramenta, margin é laranja e padding é verde

  padding: 60px 10px;
  max-width: 960px;
  margin: auto;

            margin-top
            margin-right
            margin-bottom
            margin-left
            

Shorthand property sets the margin area for all four sides

margin: 20px 5px 10px 4px

Exemplo top: 20px, right-left: auto e bottom:10px

margin: 20px auto 10px;

O mesmo se aplica para padding:

Praticar em https://developer.mozilla.org ou W3 schools

e.g use :root

--minhavar: propriedade;

                  :root {
                    --text-color: black;
                    --bg: rgb(144, 144, 144);
                    --z: 150%;
                  }
            

call variables

              body {               
                zoom:var(--z); 
                background: var(--bg);
                color: var(--txt-color);
              }          
            

            /* TIP USE variables for unique tags/class */
            aside{
              width: 260px;
              height: 260px;
              padding: .5rem;
              margin: 20px auto;
              --onlythistag: red;
              outline: 2px solid var(--onlythistag);
            }
            aside > :nth-child(2){
             text-decoration: 1px underline var(--onlythistag);
             text-align: center;
             font-family: Verdana, Geneva, Tahoma, sans-serif;
            }

          

              div {
                width: 100vw;
                height: 100vh;
                display: grid;
                place-items: center;
              }
          

              #181818
              #121212
          

Best option so far:

              :root{
                color-scheme: dark;
            }
          

Adicionar a imagem dentro de uma div

              <div> <img src=" <%- noticia.imagem %>" alt="" style="max-width: 100%;"></div>
            

Adicionar a imagem dentro de uma div

            
              <button> disabled  id="play">Play Now</button>
          

Entendendo float e clear