selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård
CSS selectorit
Elementti HTML CSS <h1>otsikko</h1> h1 { color: pink;
Luokka HTML CSS <h2 class= sub-title >Otsikko</h2>.sub-title { color: pink;
Sisäkkäiset elementit HTML CSS <header class= serious > <h2 class= sub-title > Otsikko </h2> </header>.sub-title { color: pink;.serious.sub-title { color: black;
Useampi luokka HTML CSS <div class= block > </div> <div class= block special > </div> <div class= block > </div>.block { background-color: pink; width: 400px;.block.special { background-color: white;
Tekstin muokkaus
Fontit sans-serif (päätteetön) Arial Verdana Impact serif (päätteellinen) Georgia Times New Roman
Fontti HTML CSS <h1>otsikko</h1> h1 { font-family: Arial, Helvetica, sans-serif; Otsikko
Tekstin koko, paksuus & väri HTML CSS <h1>otsikko</h1> h1 { font-family: Arial, Helvetica, sans-serif; font-size: 24px; Otsikko font-weight: normal; color: #850b40;
Tekstin välistykset HTML CSS <body> <p>integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.</p> </body> body { font-family: Arial, Helvetica, sans-serif; p { line-height: 1.5; letter-spacing: 1px;
HARJOITUS Luo otsikoita ja tekstikappaleita. Tyylittele tekstit. Huomiota voi kiinnittää mm. fonttiin, kokoon, väriin, paksuuteen & välistyksiin
Keskitys ja välistykset
Display: Block Elementti on oletuksena laatikko, joka varaa koko käytettävissäolevan tilan leveyssuunnassa, ja jolle voi lisätä välistyksiä. Tällaisia ovat oletuksena esim: <div> <h1> <p> <li> h1 div p p
Display: Inline Elementti on vie vain sen tarvitseman tilan. Tällaisia ovat oletuksena esim: <span> <a> <img> h1 p a a a a
body div class= container p a a a a
Block elementin keskitys HTML CSS <div class= container > </div>....container { width: 1080px; margin: 0 auto;
body div p a a a a
Inline elementtien keskitys HTML CSS <div class= container > <p>....container { text-align: center; </div> </p>
divclass= container div class= inner div class= inner div class= inner
Välistykset: margin HTML CSS <div class= container > <div class= inner >...</div> <div class= inner >...</div> <div class= inner >...</div> </div>.inner { margin: 20px 0; margin: 20px 0 20px 0; margin-top: 20px; margin-bottom: 20px;
divclass= container div class= inner div class= inner div class= inner
Välistykset: padding HTML CSS <div class= container > <div class= inner ></div> <div class= inner ></div> <div class= inner ></div> </div>.container { padding: 0 20px; padding: 0 20px 0 20px; padding-left: 20px; padding-right: 20px;
HARJOITUS Luodaan sivuun keskitetty div-elementti, jonka sisälle laitetaan esim. div-elementtejä, otsikko, tekstiä ja kuva Voitte kokeilla myös välistyksien lisäämistä.
Taustat
body divclass= container
Taustaväri HTML CSS <body> <div class= container >... </div> </body> body{ background-color: pink;.container{ background-color: grey;
body divclass= container
Toistuva taustakuva HTML CSS <body> <div class= container >... </div> body{ background-image: url('../images/image.jpg'); background-repeat: repeat; </body>
divclass= container
Koko alueen kattava taustakuva HTML CSS <body> <div class= container >... </div> body{ background-image: url('../images/image.jpg'); background-size: cover; </body>
HARJOITUS Asettakaa taustakuva ja/tai taustaväri jollekin elementille.
Sivun rakenne
div class= container div class= columns div class= left div class= right
Elementtien asettelu HTML CSS <div class= columns clearfix > <div class= left ></div> <div class= right ></div> </div>.left,.right { width: 45%;.left { float: left;.right { float: right;
div class= container div class= columns div class= left div class= right
Elementtien asettelu HTML CSS <div class= columns clearfix > <div class= left ></div> <div class= right ></div> </div>.left { float: left; width: 60%;.right { float: right; width: 30%;
Elementtien asettelu HTML CSS <div class= columns clearfix > <div class= left ></div> <div class= right ></div> </div>.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
HARJOITUS Luo divin sisään kaksi rinnakkaista elementtiä, ja käytä clearfix-luokkaa.
Navigaatio listan avulla
linkki linkki linkki linkki linkki
Navigaatio listan avulla HTML CSS <ul class= navi >.navi { <li><a href=... >Linkki 1</a></li> <li><a href=... >Linkki 2</a></li> <li><a href=... >Linkki 3</a></li> </ul> li{ margin: 0; padding: 0; list-style-type: none; margin: 5px; display: inline-block;
Napit
klikkaa mua!
Napit HTML CSS <a class= button >Klikkaa mua!</a>.button { display: inline-block; padding: 16px 32px 16px 32px; background-color: green; color: white;
klikkaa mua!
Napit HTML CSS <a class= button >Klikkaa mua!</a>.button:hover { background-color: red;
Pyöristetyt kulmat
kuva
Pyöreä kuva HTML CSS <div class= round-image ></div>.round-image { height: 300px; width: 300px; border-radius: 150px; background-image: url('...'); background-size: cover;
klikkaa mua!
Pyöristetty nappi HTML CSS <a class= button >Klikkaa mua!</a>.button { display: inline-block; padding: 16px 32px 16px 32px; background-color: green; color: white; border-radius: 10px;