styles.css

/* Fortsätt här tid : */

/* Fakta hämtade från
  * https://www.youtube.com/watch?v=Yvd52i14NLU  HTML & CSS
  * https://www.youtube.com/watch?v=YAXotVH2cQM  CSS: Responsivitet
    https://www.youtube.com/watch?v=9hXxGMJ2opw  CSS: Positionering
    https://www.youtube.com/watch?v=3uMJimaduiQ  CSS Boxmodellen & typsnitt på webben
  * 
*/

/* Webbläsaren tillämpar CSS regler på ett dokument för att påverka hur de visas för användaren. */

/* En regel består av:
1. En uppsättning properties/egenskaper som har values/värden vilka uppdaterar hur innehållet i HTML visas, 
   dessa kallas för deklarationsblock.
2. En selektor “väljer” vilket eller vilka element som du vill tillämpa deklarationsblocket på. 
   Exempelvis “ Jag vill tillämpa min CSS regel på alla paragraph-element i mitt HTML dokument” */

/* Hur skriver vi CSS? */
p  {                      /* p är selektorn i detta fallet */
    color: red;         /* Detta är en deklaration */
    font-size: 12pt;      /* Detta är ytterligare en deklaration */
}                         /* Från { till } är själva deklarationsblocket */

/* 
* En deklaration består av en property, tex color eller font-size och ett value, tex red eller 12pt.
* Ett property skiljs från värdet med ett kolon och flera deklarationer separeras med ett semikolon.
* Tre sätt att tillämpa CSS i HTML
    * Externt style sheet - vi laddar CSS från en fil till vår HTML. GÖR SÅHÄR!
    * Internt style sheet - vi skriver CSS i vårt dokuments head-element. GÖR EJ!
    * Styling inline - vi skriver VSS inuti vår markup i HTML. GÖR EJ!
* Cascade I CSS syftar till att regeler som definieras i CSS draperar nedåt beroende på källa. 
    * 1. Externa
    * 2. Sid-specifika (interna)
    * 3. Inline

* Selektorer
    * Enkla Selektorer - Matchar ett eller flera element baserat på elementtyp, id eller class.
    * Attributselektorer - Matchar ett eller flera element baserat på deras attribut och attributvärden.
    * Pseudo-Klasser - Matchar ett eller flera element som existerar i ett visst tillstånd, t.ex. när man hovrar över eller element.
    * Kombinatorer - Àr inte en egen selektor utan kombinerar flera selektorer för at få väldigt specifika selektioner av element, eller grupper av element.
    * Multipla Selektorer - Lite som kombinatorer så är dessa inte en egen typ av selektor utan beskriver hur man kan sätta flera selektorer pa samma regel, 
      separerade med kommatecken, och på så sett applicera en uppsättning av deklarationer på alla element som selektorerna väljer.
    * Hashtag # används för att selektera en id-selector
    * Dot-selector . används för att selektera en class-selector   */

/* Read more on selectors at https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors */

/* ID selector (octothorpe) (Räknas som Enkel Selektor för de används så ofta) */
#heading-1 {                    /* Selects the HTML-element with id="heading-1". */
    color: blue;
}

/* Class selector (Räknas som Enkel Selektor för de används så ofta) */
.red {                     /* Selects the HTML-element with class of "red". */
    color: red;
}

 /* Descendant selector, selects every p in the section*/
section p {
    color: green;
} 

/* Child selector, selects only the children-paragraphs in the section*/
section > p{
    color: yellow;
}

---------------------------------------------------------------------
/* Combinatory Selectors */

/* Adjacent siblling selector. */
h2 + p {                                    /* Selects the h2´s first p-sibling*/ 
    text-transform: uppercase;              /* Transforms the text to uppercase */
}

/* General adjacent siblling selector. */
h2 ~p {                                     /* Selects all the h2´s p-sibling. Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.*/ 
    border: 1px dashed black;             
}

---------------------------------------------------------------------
/* Attribute selectors. */

[data-vegetable] {                          /* To select attributes, we use square-brackets, [], around the attribute. */
    color: green
}

/* Attribute equals selector. */
[data-vegetable="liquid"] {                  /* Here we select an attribute with a specific value, i.e "liquid". */
    color: red
}

/* Attribute hyphenated selector */
[lang="sv-SE"] {                            /* Om man vill välja detta attribut kan man skriva såhär*/
    color: red
}

[lang|=sv] {                                /* Med rak pipe använder vi hyphenated selector och då ändras specificiteten i ovanstående exempel till att rikta sig mot alla attribut med bindestreck som har sv före eller efter sig. Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches. */
    color: aquamarine
}

/* Attribute begins with */
[data-quantity^="optional"] {               /* Här använder vi ^ för att påverka specificiteten. Represents elements with an attribute name of attr whose value is prefixed (preceded) by value. */
    opacity: 0.3;
}

/* Attribute ends with */
[data-quantity$="kg"] {                     /* Här använder vi $ för att påverka specificiteten. Represents elements with an attribute name of attr whose value is suffixed (followed) by value. */
    font-weight: bold;
}

/* Attribute contains  */                   /* Här använder vi * för att påverka specificiteten. Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string. */
[data-vegetable*="not spicy"] {
    text-decoration: underline;
}}


/* Pseudo selectors */
a {                                         /* Here we set the anchor tag to color aquamarine*/
    color: aquamarine;                   
}
a:hover{                                    /* Here we set the anchor tag to change from aquamarine to purple when we hoover on it*/
    color: purple;
}

/* Pseudo element*/
[href^=http]::after {                       /* Här lägger vi till ett element (en enhörning) i HTML-dokumentet. Vi väljer alla href som har ett attribut som börjar med https och väljer att lägga elementet i slutet. Om vill ha det i början så byter vi ordet after mot ordet before*/
    content: ' 🦄';
}

/* Multiple selector */                     /* Här väljer vi alla h2, p och a och ändrar deras typsnitt. */
h2,
p,
a {
    font-family: Arial, Helvetica, sans-serif;
}
---------------------------------------------------------------------

/* CSS Responsiveness */

/* Responsive Web Design (RWD): 
* En approach för hur man skapar den bästa möjliga visuella upplevelsen oavsett enhetstyp och skärmstorlek 
* Hjälper utvecklare att få kontroll över hur man anpassar en webbsida för olika visningsscernarion.
* Man kan testa responsivitet och layout genom att prova sidan på massa olika fysiska enheter eller med webbläsarens inbygda verktyg (inspector i chrome).
* Skillnade mellan responsiv design och adaptiv design är att den den responsiva varianten ska reagera oavsett vilken bredd webbläsaren är i, medan den adaptiva endast
  bryr sig om specifika punter.
* Vi måste använda detta för att vår sida ska kunna visas på alla typer av skärmar.
* För att få en responsiv sida behöver vi ha med detta i HTMLs head: <meta name="viewport" content="width=device-width,initial-scale=1">
* Här är några sidor där vi kan visualisera responsivitet: 
  https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/layout-shifter.html eller 
  https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/column-drop.html 
  https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/off-canvas.html 
*/

 /* Media queries */ 
 @media only screen and (max-width: 400px) {    /* Här skriver vi att när två kriterier uppfylls: alla enheter som har skärmar OCH som har max-width 400px, då ska denna CSS kod appliceras på hemsidan. */
    body {background-color: red;
 }
}

---------------------------------------------------------------------
/* Positionering */

/* Här kan man se i slow motion hur en webbläsare tolkar och läser in html och css i slow motion 
https://www.youtube.com/watch?v=ZTnIxIA5KGw  */

/* CSS Boxmodel. Alla element kommer få egenskaper utifrån boxmodel.
  * Margin - Lägger till mellanrum utanför boxen, trycker bort andra boxar.
  * Border - Lägger en ram runt elementet som vi definierar regeln för.
  * Padding - Lägger till mellanrum inuti boxen, trycker bort innehållet från kanten på boxen, (bakgrundsfärgen syns i padding). 
  * Content 

  * Eftersom boxar har fyra sidor så finns där fyra typer av både margin och padding: 
    * Margin: margin-top, margin-right, margin-bottom, margin-left
    * Padding: padding-top, padding-right, padding-bottom, padding-left
*/

  article > header {                    /* Man kan skriva såhär. */
    margin-top: 10px;  
    margin-right: 12px;  
    margin-bottom: 10px;  
    margin-left: 12px;
    
    padding-top 5px;
    padding-right 6px;
    padding-bottom 5px;
    padding-left 6px;
  }

  article > header {                    /* Men det är cleanare och snabbare att skriva med shorthands (enligt klockan) */
    margin: 10px 12px 10px 12px;        /* top, right, bottom, left*/
    padding: 5px 6px 5px 6px;           /* top, right, bottom, left*/
  }

  article > header {                    /* Om sidorna är lika långa och över/under är lika långa kan vi korta ner det ännu mer. */
    margin: 10px 12px;                  /* top and bottom, right and left. */
    padding: 5px 6px;                   /* top and bottom, right and left. */
  }

  /* Vertical margin collapse */
  p {                                   /* I detta exempel kan man tro att avståndet mellan två paragrafer ska vara högre än 40. Men CSS fungerar så att den mindre margin äts upp av den större, kolapsar in i den större. */
    color: white;
    background: gray;
    padding: 20px 0 20px 10px;
    margin-top: 10px
    margin-bottom: 40px;                /* Det är altså bara denna margin som kommer gälla*/
  }

/* Border skriv såhär: border:<storlek><typ><färg>. */

/* Exempel: */
 p {
    border: 2px solid black;
 }

  /* Precis som med margin och padding kan vi nyttja top, right, left och bottom för att ha olika border colors. */
  p {
    border-top: 1px solid black
    border-right: 1px solid red;
    border-bottom: 1px solid blue;
    border-left: 1px solid green;
  }

 /* Box-sizing. Hur räknas storlek ut på boxar? Borde väl vara egenskaperna width och height?
 Vi kan få storlek på delarna i boxen att bli bestämda mått utan att bråka med varandra genom att i head lägga till: */
 * {
  box-sizing: border-box;
 }
/* För att undvika huvudvärk, använd border-box. */

/* Det är en god praxis att resetta förinställda margin och padding: */
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }

 /* Det finns två typer av boxar, block och inline 
   * Blockelement
     * Tar upp en hel rad, nya block på ny rad
     * De tar bara upp hela bredden av sin förälder
     * De får sin höjd baserad på sitt innehåll
  * Inline-element
    * Används inte för layout, utan för att ge styling till element inuti block-element
    * De tillåter andra element att lägga sig brevid dem på samma rad
    * Dess bredd baseras på dess innehåll, inte bredden på sin förälder
  
 * Vi kan med CSS säga till ett blockelement att det ska bete sig som ett inline-element och vice versa med hjälp av egenskapen display.
   Om vi så skriver: */
   /* HTML */
   <h1>En rubrik som ärett blockelement</h1>
   <p>Ett paragraf-element som också är ett block-element <em>men</em> har ett inline-element som är &lt;em&gt;</p>     /* &lt;em&gt; är ett sätt att visa html kod i webbläsaren, så det som syns är: <em> */
   /* CSS */
   h1, p {                              /* multiple selector*/
    background-color: papayawhip;
   }
   em {
    background-color: green;
   }
   /* Så kommer webbläsaren visa: */
   Ett paragraf-element som också är ett block-element men har ett inline-element som är <em>       /* "men" kommer att visas med grön färg*/
   /* Om vi då skriver såhär: */
   em {
    display: block;
    background-color: green;
   }
   /* Så kommer "men" att hoppa ut till en egen rad:  */
   Ett paragraf-element som också är ett block-element
   men                                                      /* Hela denna rad kommer vara grön. */
   har ett inline-element som är <em>
   /* Och om vi skriver såhär: */
   h1, p {
    display: inline;
   background-color: papayawhip;
   }
   /* Så kommer paragrafen hoppa upp till h1: */
   En rubrik som ärett blockelement Ett paragraf-element som också är ett block-element men har ett inline-element som är <em>

   /* Sen har vi hybriden inline-block.
      Ett inline block placeras inline (i.e. samma rad som det andra innehållet) men beter sig om ett block, andvänds för att få text att flöda runt bilder  
      Ett exempel är en horisontell navigationsmeny */
    <nav>                                             /* nav är ett display-block*/
      <ul>                                            /* ul är ett list-item, men eftersom ul är ett barn till nav så kommer ul bete sig som ett display-block */
        <li><a href="#">Dinosaurs</a></li>
        <li><a href="#">Meat-eaters</a></li>
        <li><a href="#">Plant-eaters</a></li>
      </ul>
    </nav>
    /* Om jag nu vill att alla länkar ska synas på samma rad istället för en lista så skriver jag såhär i CSS:  */
    ul > li { 
        display: inline-block;
      }
    /* Och vill jag att de ska ha lite mellanrum samt bli underlined när vi hovrar så skriver jag:  */
    ul > li {
        display: inline-block;
        padding: 10px 12px
      }
      ul > li > a {
        text-decoration: none;
      }
      
      ul > li > a:hover {
        text-decoration: underline;
      }
    /* För att snygga till det med centrerat, vit text och nolla förinställda padding/margin/box-sizing så skriver jag såhär:  */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      ul {
        background: green;
        text-align: center;
      }
      
      ul > li {
        display: inline-block;
        padding: 10px 12px
      }
      
      ul > li > a {
        text-decoration: none;
        color: white;  
      }
      
      ul > li > a:hover {
        text-decoration: underline;
      }

      /* Exempel på block-element inuti en section */
      <main>
        <section>
          <h2>Dinosaurs</h2>
          <div class="boxy"></div>
        </section>
     </main>  

     main {
        margin: 10px;
      }
      section {
        background-color: blue;
      }
      section > h2 {
        color: white;
        text-align: center;
      }  
      section > .boxy {
        margin-left: auto;              /* m-l auto och m-r auto gör att den gula boxen centreras, kan förkortas med bara "margin: 0 auto;" */
        margin-right: auto;
        height: 100px;
        width: 250px;
        background-color: yellow;
      }

/* Floats. Boxar kan även bete sig mellan varandra med något som kallas för floats i CSS.  
   Vi använder floats i CSS för att ändra den horisontella positionen av ett element. 
   De två mest logiska är:
   * float-left
   * float-right */
/* Exempel.  */
sidebar {
    float: left;        /* Floats your sidebar to the left. */
    height: 300px;
    width: 100px;
    background-color: red;
}
    

       



* Margin edge
* Border edge
* Padding edge
* Content edge



kolla denna sen 
https://www.youtube.com/watch?v=3uMJimaduiQ