# Odin Project HTML and CSS- diary
## Introduction and installing OS and some of the dev tools
##### Command line guide book
http://conqueringthecommandline.com/book/basics
## Git
#### Useful commands
https://www.youtube.com/watch?v=HVsySz-h9r4
Asettaa kansion git- repositoryksi
``` Git
git init
```
Näyttää tämän hetkisen tiedon, tämä on hyvä ajaa heti initin jälkeen
``` Git
git status
```
Luo uuden gitignore tekstitiedoston, jonka avulla voidaan päättää tiedostoja / kansioita, joita ei sisällytetä commitiin / versionhallintaan
``` Git
touch .gitignore
```
Add asettaa tiedostoja ns. staging arealle, joka on välitila työskentelykansion ja versionhallinnan välillä. Reset poistaa tietoja staging arealta
``` Git
git add -a
git reset -a
```
Commit lähettää staging arealta tiedot omaan versionhallintaan
``` Git
git commit -m "Commitin nimi"
```
Clone- komento kloonaa valmiin repositoryn lokaaliin kohteeseen joka annetaan toisena parametrina. Ensimäinnen parametri voi olla lokaali.
``` Git
git clone <URL> <LocalFolder>
```
Näillä komennoilla saadaan tietoja etärepositorysta
``` Git
git remote -v
git branch -a
```
Näillä komennoilla lähetetään tiedot jaettuun versionhallintaan, eli remote repositoryyn. Pull- komento on pakollinen alussa, koska se lataa tuoreimmat tiedot remote reposta ennenkuin sinne lisätään uutta dataa Push-komennolla. Komennossa on parametreina remote repository ja lokaali branch
``` Git
git pull origin master
git push origin master
parametrilla -u voidaan asettaa käytetyt repositoryt defaultiksi, jolloin riittää pelkät
git pull
git push
```
Tällä tarkastellaan missä lokaalissa branchissa työskennellään
``` Git
git branch
```
Tällä luodaan uusi oma lokaali branch
``` Git
git branch <Branchin Nimi>
```
Tällä vaihdetaan toiseen branchiin
``` Git
git checkout <Branchin Nimi>
```
Branchien mergeeminen eli yhdistäminen
``` Git
git checkout <PääBranch>
git pull origin <PääBranch>
git branch --merged
git merge <BranchToMerge>
git push origin <PääBranch>
```
Branchin poistaminen, ensin lokaalisti ja sitten remote reposta
``` Git
git branch --merged
git branch -d <PoistettavaBranch>
git branch -a
git push origin --delete <PoistettavaBranch>
```
-----
## HTML
Suurin osa tekstistä ja koodiesimerkeistä on kopioitu sivuston www.freecodecamp.org koulutuksista.
### Links
#### Internal linking
``` html5
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
```
To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.
### Images
``` html5
<img src="https://www.your-image-source.com/your-image.jpg" alt="">
```
Note that img elements are self-closing.
All img elements **must have an alt attribute.** The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
Note: If the image is purely decorative, using an empty alt attribute is a best practice.
Ideally the alt attribute should not contain special characters unless needed.
CSS-Sidenote: It is a good practice to set both width and height for the image. This way the space required for the picture is already reserved, even if the image has not yet fully loaded. Height can be left "auto", so the image will keep it's proportions.
### Webforms
Tekstikenttä
``` html5
<input type="text" placeholder="this is placeholder text">
```
Tekstikenttä, joka lähettää kentän tiedot kirjoitettuun URL
``` html5
<form action="/url-where-you-want-to-submit-form-data"><input type="text" placeholder="this is placeholder text"></form>
```
Perusbutton
``` html5
<button type="submit">this button submits the form</button>
```
Note that input elements are self-closing.
For example, if you wanted to make a text input field required, you can just add the attribute required within your input element, like this:
``` html5
<input type="text" required>
```
Radio buttons are a type of input.
Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.
All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
Here's an example of a radio button:
``` html5
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
```
It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element. For example:
``` html5
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
```
Sending data needs Value=" " attribute
```html5
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
```
You can set a checkbox or radio button to be checked by default using the ***checked*** attribute.
### Audio
HTML5 tarjoaa mahdollisuuden luoda audio-kontenttia sivustoille. Lisäämällä keyword "controls" audio tagiin, näyttää sivusto peruskontrollit.
```HTML5
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
```
### Extra knowledge
#### Multiple classes
Erotetaan välilyönnillä, pidetään samojen quotejen sisällä
``` html
<img class="class1 class2">
```
#### Tags
HTML5 introduces more descriptive HTML tags. These include **main, header, footer, nav, video, article, section** and others.
These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The main HTML5 tag helps search engines and other developers find the main content of your page.
#### Metadatan käyttäminen ja muutamat tärkeät loitsut
Jos CSS- tiedostossa haluaa käyttää @media- queryja, tulee html-koodin metadataan sisällyttää seuraava osio.
``` html
<meta name="viewport" content="width=device-width, initial-scale=1">
```
## CSS
!important > Inline > ID > Class. Samassa tapauksessa mennään CSS-koodin järjestyksessä.
### HTML:n sisällä style block
``` CSS
<style>
h2 {
color: red;
}
</style>
```
### Absolute ja Relative yksiköt
Relative units, such as **em** or **rem**, are relative to another length value. For example, em is based on the size of an element's font. If you use it to set the font-size property itself, it's relative to the parent's font-size.
### Fontit
``` CSS
alue {
font-size: px, em;
font-family: font1, degradeFont;
}
```
### Taustat
``` CSS
.background{
background.color = color;
}
```
### CSS- blockit
#### Block and inline boxes
On kahden tyyppisiä blockeja, blockit ja inline boxit. Blockit luovat automaattisesti uuden rivin ja inline boxit sijoittuvat blockin sisälle. Jotkin elementit sisältävät itseisarvona blockin tai inline boxin.
Blockit noudattavat width ja height- arvoja ja puskevat muita blockeja pois päin arvojen verran.
Inline- tason elementtien koko on vain niiden contentin kokoinen, jonka vuoksi korkeussuunnassa padding tai border eivät muuta niiden sijoitusta tai kokoa, eikä muiden inline elementtien sijoitusta. Inline- elementit kyllä noudattavat paddingia, marginia ja bordereita, mutta nämä voivat overlapata muiden inline- elementtien kanssa. [Esimerkki](####Esimerkki-inline-boxeista). Poikkeuksena kokojen muuttamiseen ovat elementit, jotka sisältävät korkeus ja/tai leveysarvoja, kuten *img*, joka on luonnostaan inline.
Tämän vuoksi esimerkiksi navigointikenttää luodessa on muistettava, että elementti a on inline box, jonka vuoksi useampi linkki voi overlapata, vaikka niille olisi annettu padding arvoja suurentamaan linkin klikattavaa kokoa. Tällöin linkit kannattaa muuttaa esimerkiksi display: inline-block; muotoon, jolloin ne noudattavat parent boxin sisällä kokoon vaikuttavia arvoja.
Blockeja:
- h1
- p
inline boxeja:
- a
- span
- em
- strong
Kaikkien elementtien perityt arvot löytyvät [w3schoolsista](https://www.w3schools.com/html/html_blocks.asp).
#### Padding
Padding sijaitsee elementin ja borderin välissä ja luo sinne tyhjää tilaa. Padding ei voi olla negatiivinen. Peruslaatikossa padding lisää laatikon kokoa annettujen arvojen verran. Jos laatikon tyyppi on Alternative Box, padding vie tilaa laatikolle annettuista korkeudesta ja leveydestä.
Elementille annettu taustakuva (background) näkyy paddingin alla.
#### Border
Border sijaitsee Marginin ja Padding välissä. Border luo annetujen arvojen mukaisesti reunat, joita voidaan myös teksturoida. Peruslaatikossa Border lisää laatikon kokoa annettujen arvojen verran. Jos laatikon tyyppi on Alternative Box, Border vie tilaa laatikolle annettuista korkeudesta ja leveydestä.
Perusreunat, tässä esimerkissä punainen, 5 pikseliä leveä ja kiinteä.
``` CSS
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
```
Reunojen pehmennys. Reunoista ja samalla kuvasta voi tehdä pyöreän käyttämällä pikseleiden sijaan prosentteja, esim. 50%.
``` CSS
border-radius: x px;
```
#### Margin
Margin tekee pidemmän välimatkan ulkopuolisiin muihin objekteihin. Margin toimii samalla tavalla peruslaatikossa ja alternative boxissa.
Asettamalla Margin arvoksi "auto", voidaan elementti keskittää vaakatasossa. Tällä voidaan vaikuttaa myös kuviin, jos niille asetetaan display arvo.
**IMPORTANT:** Jos kahdelle elementille, jotka vaikuttavat pystysuunnassa, on annettu vierekkäiset Margin- arvot, pätee kolme pääsääntöä:
- Kaksi positiivista arvoa ottavat huomioon vain suuremman yksittäisen arvon
- Kaksi negatiivista arvoa ottavat huomioon pienimmän (kauimpana nollasta) arvon
- Jos toinen arvo on negatiivinen, vähennetään se positiivisesta arvosta
#### Perus Boxit ja Alternative Boxit
Perusboxit ovat sisältä päin sen kokoisia kuin niille merkityt inline-size (width) ja block-size (height). Padding ja Border leventävät Boxin kokoa "ulospäin", eli todellisuudessa boxi on isompi kuin merkityt width ja height.
Alternate Boxissa laatikon koko on aina sille merkitty width ja height. "Sisältölaatikon" koosta vähennetään Padding ja Border. Alternate Boxin etuna on se, että sen koko on aina ne arvot mitä sille annetaan, jolloin paddingit ja borderit pitää laskea vain sen sisällä.
Molempien kohdalla Margin puskee "näkyvää" laatikkoa arvojensa verran.
- Box:
``` CSS
.box {
width: x px;
height: x px;
}
```
Lisäämällä padding ja / tai border arvoja, kasvattavat boxin todellista kokoa
- Alternative Box:
``` CSS
.box {
box-sizing: border-box;
}
```
Lisäämällä padding ja / tai border arvoja, poistavat sisäisen "sisältölaatikon" kokoa.
- Esimerkki; Luo kaksi visuaalisesti samankokoista laatikkoa:
``` CSS
.box {
border: 5px solid rebeccapurple;
background-color: lightgray;
padding: 40px;
margin: 40px;
width: 300px;
height: 150px;
}
.alternate {
box-sizing: border-box;
width: 390px;
height: 240px;
}
```
``` html
<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>
```
#### Esimerkki inline boxeista
``` CSS
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
}
```
``` html
<p>
I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>
```
#### Clockwise notation
Jos haluaa asettaa eri valuet kaikkiin neljään suuntaan, voidaan käyttää clockwise notationia, jolla asetetaan myötäpäivään kaikille neljälle suunnalle arvot yhteen padding- muuttujaan. Arvot alkavat ylhäältä.
``` CSS
<style>
.box{
padding: 30px 20px 10px 5px;
}
</style>
```
### Flexbox
Flexboxin ideana on luoda alue, johon voidaan sijoittaa erilaisia osia antaen niille prosentuaalisesti tilaa alueen sisällä.
Flex-itemeille voi asettaa width tai height arvoja, mutta ne voivat kasvaa niiden yli (tai ali) riippuen containerin koosta.
**Termit:**
- Flex-container: Isompi flex-"laatikko", jonka sisään asetetaan osia. Käytettäessä flexin perusasetuksia, flex-itemit eivät koskaan kasva containerille annettujen rajojen yli.
- Flex-item: Osa, joita voidaan asettaa flex-containeriin. Flex-item voi olla myös flex-container.
**Perusmääritys:**
``` CSS
flex-container{
display: flex
}
flex-item{
flex: 1;
}
```
**Flex-shorthand**
flex: flex-grow flex-shrink flex-basis
flex-grow kertoo flex-itemille minkä kokoiseksi itemit voivat kasvaa containerissa verrattuna muihin containerin itemeihin.
flex-shrinkin avulla määritetään millä "kertoimella" itemit kutistuvat, jos itemit eivät mahdu containerille määritettyyn kokoon. Korkeampi numero nostaa kerrointa. 0 tarkoittaa sitä, että kyseinen itemi ei kutistu.
flex-basis asettaa flex-itemille lähtökohtaisen koon. Jos flex-basis on asetettu tiettyyn lukemaan, alkaa grow tai shrink vasta sen lukeman jälkeen. Jos flex-basis on auto, tarkistaa se silloin elementille annetun width tai height arvon.
Important:
kaksi asiaa flex-shorthandista, jotka ovat flex: 1 ja flex: auto.
Flex: 1 asettaa shorthand arvoiksi; 1 1 0.
Flex: auto asettaa shorthand arvoiksi; 1 1 auto.
Lisää erikoisemmista shorthandeista [tässä](https://www.w3.org/TR/css-flexbox-1/#flex-common) linkissä
Hyvä ottaa haltuun myös flex: none. Tällöin elementti tottelee height tai width siihen asti kunnes tilaa ei enää ole containerissa. Esim jos navigointikentässä on kolme nappi, jotka ovat 100px leveydeltä. Voidaan määrittää että n. 330px kohdalla muutetaan napit muunlaiseksi navigoinniksi, siihen asti vähennetään vain vasemmalta tyhjää tilaa, joka on auto. **OBS** Myöhemmin tämän voi tehdä järkevämmin justifylla.
**OBS2** Kikkakakkonen on tehdä tämä niin, että ensimmäinen item sisältää arvon margin-right: auto. Tällöin ensimmäisen itemin oikean puolimmainen margin syö kaiken tarjolla olevan tyhjän tilan.
**Min-width- tietoa**
Joissain tapauksissa containerin sisäiset itemit voivat overflowata, jos containerin koko menee liian pieneksi. Tämä johtuu siitä, että joillain elementeillä on default arvoina tietty width ja height, jolloin ne eivät suostu pienenemään noita arvoja pienemmäksi. Tämän vuoksi joissain tapauksissa on asetettava min-width: 0; jolloin elementit saavat pienentyä poikkeavasti. Esimerkiksi elementin, jossa on tekstiä, default minimileveys on sen pisimmän yhtänäisen sanan mittainen.
**Flex-direction ja Axes**
flex-direction määrittää mihin suuntaan flex-containerin itemit järjestyvät. Atribuutilla column, itemit sijoitetaan containeriin päällekkäin. Default attribuutilla row, itemit sijoitetaan containeriin vierekkäin.
Flex-containerilla on olemassa kaksi axista, main axis ja cross axis. Flex-directionin mukainen axis on main axis ja sen poikittainen on cross-axis. Myös Flex-basis suunta on directionin mukainen.
Defaulttina kaksi sääntöä:
1. Main-axis: Itemit asetetaan alkamaan containerin alun reunalta
2. Cross-axis: Itemit käyttävät koko containerille varatun cross-axis tilan. [Default: Height]
**Alignment- asettelu**
Alignmentit asetetaan lähes aina **flex-containerin** sisälle.
justify-content: liikuttaa itemeitä main axisin suuntaisesti.
align-items: liikuttaa itemeitä cross axisin mukaisesti.
gap: asettaa itemeitten välille raon main-axisin mukaisesti
align-self: Poikkeus, joka vahvistaa säännön. Tämä asetetaan *itemin* sisälle.
### Värityksistä
#### Hexadecimaalien käyttö
Hexadecimaalit määräävät RGB- yhdistelmän käyttämällä kuutta numeroa -- RRGGBB
esim.
#FF0000 -- Punainen
#00FF00 -- Vihreä
#0000FF -- Sininen
Perusvärit voidaan lyhentää ottamalla jokaisesta perusväristä toinen merkintä pois -- RGB
esim.
#F00 -- Punainen
#0F0 -- Vihreä
#00F -- Sininen
#### RGB merkinnän käyttö
RGB- merkinnällä voidaan suoraan kertoa kuinka paljon mitäkin väriä halutaan. 0-255.
RGB(x, y, z)
esim.
RGB(255, 0, 0) -- Punainen
RGB- värityksessä on mahdollista lisätä myös läpinäkyvyys(transparency), jolloin merkintä on RGBA(x,y,z,a). Alpha-value on väliltä 0-1.
#### HSL merkinnän käyttö
Hue, Saturation, Lightness. Ensimmäinen arvo on väliltä 0-360 ja sillä tarkoitetaan kulmaa väriympyrässä. Toisella arvolla lisätään väriin harmautta välillä 0-100%, isommalla arvolla vähemmän harmautta. Kolmas arvo lisää valoisuutta, jolla määritetään paljonko värissä on valkoista ja mustaa. 0% Black - 100% White. 50% on normaali. HUOM! Vain CSS3 ->
HSL(0,100%,50%) -- Punainen
#### Usean värin käyttö
##### Linear Gradient ja Repeating Linear Gradient
Linear gradientin avulla on mahdollista tehdä taustoja käyttäen useita värejä, jotka vaihtuvat annettujen parametrien mukaisesti. Linear gradient on niin moniulotteinen aihe, etten jätä tähän yksittäistä esimerkkiä vaan linkin CSS- dokumentaatioon
[Linear Gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
[Repeating Linear Gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient)
### Eri tapoja nimetä ja valita CSS- elementtejä
#### !Important
Kaikista vahvin tapa kertoa mitä CSS-asetusta tulee käyttää. Lisätään laittamalla attribuutin perään !important.
``` CSS
.white-text{
color: white !important;
}
```
#### Luokat (Classes)
Nimetään käyttämällä pistettä CSS- tiedostossa. HTML- tagina käytetään class="", josta piste poistetaan
``` CSS
<style>
.blue-text {
color: blue;
}
</style>
```
``` html
<p class="blue-text">Tämä teksti olisi sinistä</p>
```
Applying multiple class attributes to a HTML element is done with a space between them like this:
``` CSS
class="class1 class2"
```
Note: It doesn't matter which order the classes are listed in the HTML element.
However, the order of the class declarations in the style section is what is important. The second declaration will always take precedence over the first.
#### ID
Nimetään käyttämällä #- merkkiä CSS- tiedostossa. HTML- tagina käytetään id="", josta # poistetaan. Id on hyvä olla uniikki, vaikka sitä ei ole pakotettu. ID ylikirjoittaa Classin, jos samassa elementissä molemmat.
``` CSS
#cat-photo-element {
background-color: green;
}
```
``` html
<div id="cat-photo-element">
<p> Tässä olisi vihreä tausta</p>
</div>
```
#### Attribute selector
Nimetään laittamalla hakasulkeiden sisään haluttu attribute ja mahdollinen nimitys.
Esim. vaikuttaa kaikkiin elementteihin joista löytyy type="radio"
``` CSS
[type='radio'] {
margin: 20px 0px 20px 0px;
}
```
#### ::Before ja ::After
These pseudo-elements are used to add something before or after a selected element.
For the ::before and ::after pseudo-elements to function properly, they must have a defined content property. This property is usually used to add things like a photo or text to the selected element. When the ::before and ::after pseudo-elements are used to make shapes, the content property is still required, but it's set to an empty string.
Yläluokan asetuksista mm. transform vaikuttaa näihin alempiin luokkiin.
NOTE: Oletan että ne muuttujat joita löytyy yläluokista, mutta joita ei ylikirjoiteta näissä pseudo-luokissa, ovat voimassa
### Muuttujat
Muuttuja on jonkin luokan sisällä (mahd. globaaliudelle) ja ne nimetään käyttämällä tuplaviivaa muuttujan nimen edessä. Kutsuminen tapahtuu kirjoittamalla arvoksi var(--muuttujan-nimi). Hyvänä käytäntönä voidaan pitää sitä, että muuttujia sisältäviin arvoihin lisätään fallback- taso, eli perään jokin default- arvo.
Esim.
```CSS
<style>
.luokka{
--color-muuttuja: orange;
--fonttikoko-muuttuja: 12px;
}
.luokka-h1{
color: var(--color-muuttuja, white);
font-size: 14px;
}
.luokka-p{
color: black;
font-size: var(--fonttikoko-muuttuja, 13px);
}
.luokka-yhdistelma{
color: var(--color-muuttuja, blue);
font-size: var(--fonttikoko-muuttuja, 11px);
}
</style>
```
Globaalit muuttujat lisätään ns. :root- pseudo-luokan alaisuuteen ja niitä voidaan käyttää missä tahansa CSS-koodissa.
``` CSS
<style>
:root {
--globaali-muuttuja: blue;
}
.sininen-teksti{
color: var(--globaali-muuttuja);
}
</style>
```
Globaaleja muuttujia voidaan muuttaa koodin mennessä eteenpäin niin etteivät aikaisemmat delkaraatiot muutu.
``` CSS
<style>
:root {
--globaali-muuttuja: blue;
}
.sininen-teksti{
color: var(--globaali-muuttuja);
}
.punainen{
--globaali-muuttuja: red;
}
.punainen-teksti{
color: var(---globaali-muuttuja)
}
</style>
```
### @media- käyttäminen
Jos CSS- koodissa halutaan ottaa huomioon erilaisten päätteiden koot, voidaan käyttää @media- toimintoa, jonka avulla voidaan määrittää eri kokoisille päätteille omat muuttujat.
Esim.
``` CSS
<style>
:root {
--leipateksti-fonttikoko: 16px;
}
@media (max-width: 250px){
--leipateksti-fonttikoko: 12px;
}
</style>
```
### Browser fallbacks
Sellaisissa tapauksissa joissa käytetään monimutkaisempaa CSS- koodia, voi vanhemmissa selaimissa tulla vastaan ongelmia. Tälläisiä tilanteita voidaan ennakoida käyttämällä ns. fallback- vaihtoehtoja, joissa koodiin lisätään yleisemmin käytetty vaihtoehto monimutkaisemman yläpuolelle.
Tämä esimerkki on suoraan freecodecamp.org css-oppitunnilta, jossa taustaväri määritetään käyttämällä muuttujaa. Muuttujia ei tueta ollenkaan Internet Explorerissa, minkä vuoksi koodiin on lisätty ylimääräinen fallback- vaihtoehto.
``` html css
<style>
:root {
--red-color: red;
}
.red-box {
background: red;
background: var(--red-color);
height: 200px;
width:200px;
}
</style>
<div class="red-box"></div>
```
### Helppo tapa tehdä responsiivinen kuva / alue
```css
img {
max-width: 100%;
height: auto;
}
```
### Viewport sizes
The four different viewport units are:
- vw (viewport width): 10vw would be 10% of the viewport's width.
- vh (viewport height): 3vh would be 3% of the viewport's height.
- vmin (viewport minimum): 70vmin would be 70% of the viewport's smaller dimension (height or width).
- vmax (viewport maximum): 100vmax would be 100% of the viewport's bigger dimension (height or width).
## Advanced visual options
Tähän osioon lisään itselleni uusia tapoja luoda visuaalisia elementtejä websivuille.
### CSS Flexbox
flex-direction muuttaa mihin suuntaan uudet elementit sijoittuvat flex- containerin sisällä
```css
#id{
display: flex;
flex-direction: row; // Default
}
```
### CSS Grid
Gridit tekevät asetetuista elementeistä ns. grid- elementtejä. Kaikki muut sitova osio on nimeltään container, ja containerin sisäiset elementit ovat itemeitä.
#### Perusasetus
```css
.container{
display:grid;
}
```
#### Gridin hyväksymät arvot
You can use absolute and relative units like *px and em* in CSS Grid to define the size of rows and columns. You can use these as well:
*fr*: sets the column or row to a fraction of the available space,
*auto*: sets the column or row to the width or height of its content automatically,
*%*: adjusts the column or row to the percent width of its container.
##### FR, eli fractions
fr- avainsanalla annetaan objektille sellainen koko joka vastaa sitä kuinka monta fractionia sille on annettu.
Tilanteessa jossa kenttien koot on määrätty niin että kaksi kenttää saavat kokonsa niiden contentin perusteella (auto) ja yksi saa fractionien avulla, fractionoitu alue täyttää kaiken muun tilan.
Tilanteissa joissa käytössä on useampia fractioneita, ne jakavat käytössä olevan alueen niille annetun arvon mukaan
#### Grid-template-columns
Tämä asettaa containerille tietyn määrän pylväspalkkeja, johon containerin itemit asetetaan. Lukumäärät muuttujan sisällä kertovat kuinka monta osaa tehdään ja kuinka leveitä ne ovat. Huomioi: Ei pilkkuja!
```css
.container{
grid-template-columns: 50px 50px 50px;
}
```
#### Grid-template-rows
ks. yläpuolelta. Tämä tekee jonoja
```css
.container{
grid-template-rows: 50px 50px 50px;
}
```
#### Repeat
Jos rivejä tai pylväitä on useampia samankokoisia, voidaan toistoa rajoittaa käyttämällä avainsanaa repeat.
```css
.container{
grid-template-columns: repeat(3, 50px); /* Luo kolme 50px pylvästä */
}
```
```css
.container{
grid-template-columns: repeat(2, 20px) 40px; /*Translate: 20px 20px 40px;*/
}
```
#### Minmax, eli minimi ja maksimikoot
Tällä avainsanalla voidaan määrittää minimi- ja maksimikoot itemeille. Erilaisia kenttiä voidaan lisätä kuten yläpuolella olevassa koodiesimerkissä.
```css
.container{
grid-template-columns: minmax(20px, 100px); /* Luo kentän joka on min 20px ja max 100px */
}
```
#### Grid-column-gap ja row-gap
Asettaa itemeiden välille halutun kokoisen raon.
```css
.container{
grid-column-gap: 10px;
grid-row-gap: 10px;
}
```
Shorthandina voidaan käyttää pelkästään Grid-gap. Tämä asettaa yhdellä arvolla molempiin samat lukemat. Jos annetaan kaksi arvoa, ensimmäinen on row ja toinen column gap.
```css
.container{
grid-gap: 10px 20px;
}
```
#### Column ja Row lines
Column ja row lineseilla tarkoitetaan jakoviivoja joilla container on jaettu. Ensimmäinen linja kulkee ensimmäisen elementin yläpuolella (row) tai vasemmalla (column) puolella. Esimerkiksi kolmella columnilla on neljä column linea.
|Column|Column|Column|
__
Row
__
Row
__
Row
__
#### Grid-column
Käyttökohde: Grid Items
Tällä asetetaan kuinka monta column linea haluttu itemi käyttää gridistä. Alla oleva esimerkki käyttää ensimmäisestä linjasta kolmanteen linjaan, eli kaksi columnia.
```css
.item{
grid-column: 1 / 3
}
```
#### Grid-row
ks. ylempi. Tämä roweilla.
```css
.item{
grid-row: 1 / 3
}
```
#### Auto-fill
Auto-fillin avulla containeriin lisätään niin monta riviä ja pylvästä kuin sen kokoon mahtuu annettujen parametrien avulla. Auto-fill luo tyhjiä cellejä, jos tilaa on enemmän kuin omia cellejä.
```css
.container{
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}
```
#### Auto-fit
Auto-fit venyttää cellejä annettujen parametrien mukaan, jos pituus siinä suunnassa ylittyy. Jos kaikki omat cellit eivät mahdu, luodaan uusi rivi / pylväs.
```css
.container{
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}
```
____
#### Moving content inside cells
Jokaisen itemin ympärillä kulkee kuvitteellinen laatikko, jota kutsutaan celliksi. Cellien sisällä voi olla jotain contenttia. Contenttia voidaan manipuloida seuraavilla tavoilla
#### Justify-self
Tällä asetetaan kuinka paljon leveyttä cellistä content käyttää. Defaulttina tämä on Stretch, joka venyttää contentin koko cellin kokoiseksi (esim. taustakuva).
start: aligns the content at the left of the cell,
center: aligns the content in the center of the cell,
end: aligns the content at the right of the cell.
```css
.item{
justify-self: center;
}
```
#### Align-self
ks. ylempi, mutta pystysuunnassa.
```css
.item{
align-self: center;
}
```
#### Justify-items ja align-items
Tällä annetaan sääntöjä kaikille containerin itemeille.
```css
.container{
justify-items: center;
align-items: center;
}
```
___
#### Grid-template-areas
Tällä voidaan nimetä kenttiä, esimerkiksi sen sisältämän contentin mukaan. Nimeämällä osat samannimiseksi, asetetaan useampi cell arean käyttöön. Käyttämällä pistettä, asetetaan cell tyhjäksi kentäksi.
```css
.container{
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
}
```
#### Grid-area
Tämän avulla jokin itemi voidaan sisällyttää arean sisälle. Jos kyseisellä nimellä on useampia kenttiä varattuna areassa, käyttää itemi koko tämän tilan.
```css
item1 {
grid-area: header;
}
```
Grid-area ei vaadi template areaa, vaan areat voidaan tehdä lennosta käyttämällä row ja column lineja.
```css
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
```
#### Simppeli responsiivisuus sivuille käyttämällä @Media
Käyttämällä Media queryja, voidaan luoda simppelillä tavalla responsiivisuutta sivuille antamalla eri alueita (grid-area), sitä mukaan minkä kokoinen toistoalue on.
```css
@media (min-width: 300px){
.container{
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
}
@media (min-width: 400px){
.container{
grid-template-areas:
"header header"
"advert content"
"footer footer";
}
}
```
### Positions
#### Relative
Jos objekti asetetaan relative- tilaan, liikkuu elementti pois päin merkittyjen arvojen verran. Tärkeä huomio on se, että tämä ei liikuta muita elementtejä, eli huolimattomuudella on mahdollista asettaa elementtien näkyviä osia päällekkäin. Tälläistä liikuttamista kutsutaan offsetiksi. Alapuolella oleva koodi liikuttaa kaikkia p-elementtejä 10px ylöspäin, eli ns. bottom offset.
```CSS
p {
position: relative;
bottom: 10px;
}
```
#### Absolute
Absolute- tilassa elementti lukitaan paikoilleen relatiivisesti sen parent- elementtiin. Absolute- tilassa elementti poistetaan dokumentin luonnollisesta flow:sta, minkä vuoksi on tärkeää että sen parent- elementti on *positioned*. Absolute- tilassakin voidaan käyttää offset-arvoilla liikuttamista. **Tärkeä huomio on se että elementin parent- elementti määräytyy HTML- hierarkian mukaan!**
```html
.laatikko{
position: relative;
}
#laatikon-sisalla{
position: absolute;
}
<h1>Hello world!</h1>
<div class="laatikko">
<p id="laatikon-sisalla">Tämän lauseen elementti on sidonnainen sen parent- elementistä, joka on ympäröivä div-elementti</p>
</div>
```
#### Fixed
Fixed- tilassa elementti lukitaan selaimen ikkunan mukaisesti ja se poistetaan kokonaan dokumentin flow:sta. Tämä tarkoittaa sitä että objektit pysyvät ruudulla samassa paikassa kun sivustoa esimerkiksi rullataan johonkin suuntaan. Tällä voi tehdä helposti esimerkiksi pysyvän navigointikentän, kunhan ottaa huomioon sen viemän tilan muissa kentissä.
```css
#navbar {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #767676;
}
```
#### Float
Floatin avulla elementti voidaan asettaa parent- elementin sisällä joko vasemmalle tai oikealle. Elementille annetaan leveysarvo, jolla määritetään paljonko tilaa nämä elementit vievät.
```css
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}
```
#### z-index
Z-indexin avulla on mahdollista vaikuttaa siihen mitkä elementit ovat ns. päällimmäisiä. Korkeampi arvo vastaa korkeampaa asemaa. Normaalisti päällimmäisyys määräytyy sen mukaan missä järjestyksessä elementit ovat HTML- koodissa.
```css
z-index: 2;
```
### Box-shadow
The box-shadow property applies one or more shadows to an element.
The box-shadow property takes values for
* offset-x (how far to push the shadow horizontally from the element),
* offset-y (how far to push the shadow vertically from the element),
* blur-radius,
* spread-radius and
* color, in that order.
The blur-radius and spread-radius values are optional.
Tämä lisää kaksi box-shadow elementtiä.
``` CSS
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
```
### Opacity
Tämän avulla hallitaan koko halutun elementin läpinäkyvyyttä. Väliltä 0-1.
``` CSS
Opacity: 0.5;
```
### Using pseudo-classes
Pseudo-luokilla voidaan valita elementti kun se on jossakin tietyssä tilassa. Pseudoluokka erotetaan käyttämällä kaksoispistettä ja merkitsemällä tila tämän jälkeen. Esimerkiksi tällä koodilla h1- tason otsikot muuttuvat punaisiksi kun hiiri on jonkin h1-elementin päällä (hover-state).
``` CSS
h1:hover{
font-color: red;
}
```
### Transform -- Scale, skewX Y Z, rotation
Tuplaa kaikkien paragraphien koot
```CSS
p {
transform: scale(2);
}
```
"Viistouttaa" halutun akselin ympäri haluttu määrä
```CSS
p {
transform: skewX(Xdeg);
}
```
Kääntää elementtiä halutun määrän
```CSS
div {
transform: rotation(Xdeg);
}
```
### Animaatiot
The animation properties control how the animation should behave and the **@keyframes** rule controls what happens during that animation.
**animation-name** sets the name of the animation, which is later used by @keyframes to tell CSS which rules go with which animations.
**animation-duration** sets the length of time for the animation.
**animation-fill-mode** asettaa mihin tilaan animaatio päättyy, merkittävä keyword forwards jolloin animaatio päättyy päätöstilaan
**animation-iteration-count** asettaa kuinka monesti animaatio toistetaan, numero tai infinite.
**animation-timing-function** asettaa millaisella nopeudella (speed curve) animaatio suoritetaan; ease, ease-out(nopea alku), ease-in(nopea loppu), linear
```CSS
#anim {
animation-name: animationName;
animation-duration: Xs;
}
@keyframes animationFrame {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
```
Tällä voi luoda esimerkiksi hienoja animaatioita painikkeisiin hover-efektin kautta:
NOTE: Käyttämällä animation-fill-mode: forwards asetetaan tila pysymään hoverin aikana päätöstilaan
```CSS
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
```
##### Bezier curves
In CSS animations, Bezier curves are used with the cubic-bezier function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.
Bezier curve koostuu neljästä pisteestä, joista kaksi ensimmäistä sijaitseva origoissa (0,0) ja (1,1). Koodiin kirjataan kaksi muuta pistettä, jotka muodostavat animaatiolle itse tehdyn käyrän.
```CSS
animation-timing-function: cubic-bezier(x1, y1, x2, y2);
```
### Shapes
Tähän sisällytän valmiita CSS- koodeja, joilla voi tehdä erilaisia graafisia muotoja
##### Crescent Moon
```CSS
<style>
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0px 0px blue;
}
</style>
```
##### Heart
```CSS
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
```
### Kuinka tehdä järkevät line-breakit (rivinvaihto) elementeille
Accessibilityn kannalta ei ole järkevää käyttää `<br>`- tagia rivinvaihtoihin elementtien välillä, koska screenreaderit eivät osaa tulkita näitä välttämättä oikealla tavalla. Myös CSS- koodin käyttäminen vaikeutuu. Parempi tapa on käyttää block- tyyppisiä display asetuksia tyylien tasolla.
Esimerkissä annetaan formissa ohjeistus, jossa kentän otsikko on block- tyyppinen, jolloin se käytännössä muodostaa uuden rivin. Tässä tapauksessa jokainen label- kenttä on yksi laatikko, joka täyttää koko rivin.
```css
label {
display: block;
margin-top: 0.8rem;
}
input {
margin-top: 0.1rem;
}
```
## Accessibility
### Article, section, div
**Note about section and div**
The section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.
```html
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
```
### Figure ja figcaption
```html5
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
```
### Label
The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.
The value of the for attribute must be the same as the value of the id attribute of the form control. Here's an example:
```html5
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
```
### Fieldset ja legend
The fieldset tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.
The fieldset wrapper and legend tag are not necessary when the choices are self-explanatory, like a gender selection. Using a label with the for attribute for each radio button is sufficient.
Here's an example:
``` html5
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
```
### Date
For older browsers, the type will default to text, so it helps to show users the expected date format in the label or as placeholder text just in case.
Here's an example:
```html5
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
```
### Time ja datetime
Näiden avulla screenreader lukee datetimen sisälle asetetun päivämäärän selkeyden vuoksi
```html5
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
```
### Accesskey
Accesskey on uusi avainsana html5:ssä. Sen avulla elementille voidaan asettaa jokin painike, jonka avulla elementistä tulee interaktiivinen
```html5
<button accesskey="b">Important Button</button>
```
### Tabkey
Tabkey avainsanalla on mahdollista asettaa muitakin elementtejä, kuin vain ne jotka ottavat vastaan napinpainalluksia, sellaisiksi elementiksi joihin selain pysähtyy kun käyttäjä etsii tekstikenttiä tab-painikkeella. Input-kentät ovat normaalisti valmiiksi sellaisia joihin aktiivinen kenttä pysähtyy tabia käytettäessä.
Käyttämällä korkeampia numeroita, asetetaan tabindex-objekteille läpikäyntijärjestys. Ensimmäisenä käydään läpi numeroidut objektit 1:stä eteenpäin, minkä jälkeen käydään läpi default ja 0- arvoiset.
HUOM! Tabindexin käyttö mahdollistaa CSS:sä pseudoluokan :focus käytön!
```html5
<div tabindex="0">I need keyboard focus!</div>
```
### Using CSS
#### .sr-only, perusasetukset
CSS- koodin avulla on mahdollista lisätä sivustolle contenttia, jotka ovat nähtävissä vain screenreaderilla, eli tavalliset selaimet ignoraavat.
HUOM! Contenttia ei saa asettaa näkymättömäksi tai piilottaa tiputtamalla kokoa tai asettamalla display tai visibility arvoja nollaan. Tällä vain siirretään contentti "ulos" selaimen ruudusta
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
#### Kontrastien käyttö tekstien selkeyttämiseksi
The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. There are many contrast checking tools available online that calculate this ratio for you.
Color is a large part of visual design, but its use introduces two accessibility issues. First, color alone should not be used as the only way to convey important information because screen reader users won't see it. Second, foreground and background colors need sufficient contrast so colorblind users can distinguish them.
Esimerkki [työkalu](https://webaim.org/resources/contrastchecker/)
Sign in with Wallet
Connect another wallet