CSS Lektion 1 Man infogar css koden och sparar som .css sen länkar man till den filen i html dokumentet. Exempel: ( ) Min första stilmall ( ) ____________________________________________________________________________________________ Lektion 2-Olika typer att använda CSS ____________________________________________________________________________________________ Style Här kan man skriva vad som hellst.... Span används när en formatering bara ska användas någon enstaka gång. ____________________________________________________________________________________________ Class ( ) ( ) Den här texten blir gul CLASS används när man ska använda en formatering flera gånger. ____________________________________________________________________________________________ ID ( ) ( ) Den här texten blir röd ID är samma sak som class fast med en # istället för en punkt. ____________________________________________________________________________________________ Lektion 3-Händelser Hover Hover används när man vill att något ska hända när man drar musen över t.ex. en länk. Min mail ____________________________________________________________________________________________ ACTIVE Används när man vill att något ska hända när man håller musen över någonting och trycker ner musknappen. Min mail ____________________________________________________________________________________________ Link Bestämmer hur en länk ska se ut när man tittar på den. Min mail ____________________________________________________________________________________________ First line Används när man vill att första raden i ett dokument ska få en speciell formatering.

Den här första linjen blir fet
Men den här blir helt normal.

____________________________________________________________________________________________ First letter Används när man vill att första bokstaven skall bli lite anorlunda.

D:et blir lite större än dom andra bokstäverna....

____________________________________________________________________________________________ Lektion 4-text Text decoration Används när man vill formatera en text på något speciellt sätt. Egenskaper för Text-decoration: Underline Overline Blink Line-trough None Exempel: Min mail ____________________________________________________________________________________________ Line height Anger hur mycket mellanrum det ska vara mellan vissa textrader. Måtten kan anges i: Centimeter (cm) Milimeter (mm) Punkter (pt) Tum (in) Exempel: Den texten har lite
extra mellanrum mellan raderna. ____________________________________________________________________________________________ Letter spacing Anger mellanrum mellan bokstäverna i enheterna: Centimeter (cm) Milimeter (mm) Punkter (pt) Tum (in) Exempel: Denna stil kan verka svårläst eftersom det är 9mm mellan bokstäverna..... ____________________________________________________________________________________________ Text align Används när man vill ha texten på ett speciellt ställe. Godkända värden för text-align: Justify (Normal) Center (Mitten) Right (Höger) Left (Vänster) Exempel:
Här kan man skriva vad som hellst.
____________________________________________________________________________________________ Word spacing Används för att bestämma hur mycket mellanrum det ska vara mellan varje nytt ord. OBS!! Den här egenskapen fungerar inte för IE och NN men den kommer att göra det i dom nyare versionerna av IE och NN T.ex IE 5. Word-spacing kan anges i fyra enheter: Centimeter (cm) Milimeter (mm) Punkter (pt) Tum (in) ____________________________________________________________________________________________ Text-transform Används för att ange om en textrad ska ha stora eller små bokstäver. Godkända värden för Text-transform är: Uppercase (Alla bokstäver skrivs som STORA) Lowercase (Alla bokstäver skrivs som små) Capitalize (Försa bokstaven blir stor) Exempel:
Alla ord har stor bokstav i början
____________________________________________________________________________________________ Text-indent Används för att skapa indrag i en text. Godkända värden är: Centimeter (cm) Milimeter (mm) Punkter (pt) Tum (in) Exempel:

Den här texten har ett indrag på två cm

____________________________________________________________________________________________ Vertical align Bestämmer var någonstans i t.ex. en tabell en text ska placeras vertikalt. Godkännda värden är: Top Middle Botton Exempel:
Den här texten placerar sig vertikalt i mitten av en tabell
____________________________________________________________________________________________ Lektion 5-Färger Color Används för att ange färg på något. Ange det engelska namnet på färgen för att det ska fungera (eller färgens RGB kod). Exempel: För att ange en färg med RGB kod skriv så här: ____________________________________________________________________________________________ Background color Anger vilken bakgrungsfärg som ska användas. Använd i första hand de hexkoder som finns för färgerna (#000080) i annat fall kan man ange färgens engelska namn. Exempel: ____________________________________________________________________________________________ Background image Istället för att använda en och samma backgrund i alla dokument kan du bara ange det i din stil mall.Fördelen är också att du kan inkludera bakgrunden bakom exempelvis en text. Exempel: ____________________________________________________________________________________________ Background repeat Används för att bestämma om backgrunden ska förekomma en gång eller upprepas, dvs återkomma över hela dokumentet eller att den bara ska visas som en bild. Godkännda värden för Background-repeat: Repeat (Upprepar bakgrunden både horisontellt och vertikalt) Repeat-x (Upprepar bakgrunden vertikalt) Repeat-y (Upprepar bakgrunden horisontellt) no-repeat (Visar bakgrunden som en bild) Exempel: _____________________________________________________________________________________________ Background attachment Om bakgrunden ska vara dynamisk eller klistrad. Godkända värden: Fixed (Bakgrunden ligger still när man "scrollar") Scroll (Bakgrunden flyttar på sig när man "scrollar") Exempel: _____________________________________________________________________________________________ background-position Den här bestämmer var någonstans bakgrunden skall börja. Normalt sett ritas alltid bakgrunden upp ifrån vänster sida längst upp. Ibland kanske man vill att bakgrunden skall börja ritas upp först en centimeter ner på sidan, då fixar du det med background-position. Erkända värden för background-position: cm Anger indragningen av bakgrunden i centimeter % Du kan också ange hur många procent av ytan i webläsaren som skall lämnas ledigt. bottom center top - left right center Du kan också använda någon av ovanstående ord för att placera bakgrunden. Skillnaden på att använda dessa ord istället för centimeter eller procent, är att du måste kombinera två av dem. De tre första bestämmer om bakgrunden skall infogas längst ner, i mitten eller överst, vertikalt sett. De tre sista bestämmer om bakgrunden skall infogas från vänster, höger eller från mitten. För att kombinera dem skriver du t ex så här. Exempel: Du har just nu angett att bakgrunden skall ritas upp/infogas från höger längst ner på sidan. _____________________________________________________________________________________________ background Den här egenskapen är att föredra ifall du tänker använda alla eller flera av de ovanstående egenskaperna tillsammans, eftersom du då slipper skriva ut dem alla. Exemplet nedan visar hur du anger ett värde för alla de fem olika egenskaperna som vi gått igenom i styckena ovan. Exempel: _____________________________________________________________________________________________ Lektion 6-Bilder Margin Används när man vill ha marginal i ett dokument. Godkända märken Margin (Justerar alla fyra marginaler lika) Margin-left (Justerar endast vänstersians marginal) Margin-right (Justerar endast högersians marginal) Margin-top (Justerar endast toppens marginal) Margin-botton (Justerar endast bottens marginal) Enheter: Pixlar (px) Centimeter (cm) o.s.v Man kan också ange enheten i procent. Exempel: Ska man ha 1 cm marginal för alla fyra sidor hade man kunnat skriva: ______________________________________________________________________________________________ Padding Används för att ange hur mycket fritt utrymme det ska vara mellan innehållet och webbläsarens kant. Godkännda märken: Padding (Justerar alla sidorna) Padding-left (Justerar endast vänstersians marginal) Padding-right (Justerar endast högersians marginal) Padding-top (Justerar endast toppens marginal) Padding-botton (Justerar endast bottens marginal) Exempel: Godkända värden för padding: Pixlar (px) Centimeter (cm) o.s.v Man kan också ange enheten i procent. Exempel: ______________________________________________________________________________________________ Border width Används för att bestämma tjockleken på linjen som avgränsar innehållet och webbläsarens kant. Godkända märken: Border-width (Justerar alla kanter) Border-top-width (Justerar kantens storlek i toppen) Border-right-width (Justerar kantens storlek på höger sida) Border-botton-width (Justerar kantens storlek på höger sida) Border-left-width (Justerar kantens storlek på vänster sida) Godkända värden för border-width Thin (tunn) Medium (medel) Thick (tjock) Man kan också ange storleken i pixlar(px) eller centimeter(cm). Exempel: ______________________________________________________________________________________________ Border color Bestämmer färgen på kanterna. Godkända märken: Border-color (Anger samma färg för alla fyra sidor) Border-top-color (Anger färgen för kanten överst) Border-right-color (Anger färgen för kanten till höger) Border-bottom-color (Anger färgen för kanten längst ner) Border-left-color (Anger färgen för kanten till vänster) Godkända värden: Färgens namn på engelska eller färgens hexkod(#00ff00) Exempel: ______________________________________________________________________________________________ Border style Anger hur kanten ska se ut dvs om den ska vara prickig rutigeller bara normal. Godkända märken: Border-style (Anger samma stil för alla kanter) Border-top-style (Anger utseendet på kanten längst upp) Border-right-style (Anger färgen för kanten till höger) Border-bottom-style (Anger färgen för kanten längst ner) Border-left-style (Anger färgen för kanten till vänster) Olika typer av border-style: None (Ingen kant alls) Dotted (Ett prickigt mönster draget i kanten) Dashed (En vanlig linje dragen som kant) Solid (En ej skuggad kant) Double (En dubbellinje) Groove (En 3D-linje) Ridge (En 3D-linje baserad på färgen du angett i border-color) Exempel: ______________________________________________________________________________________________ Border Dom egenskaper som finns för Border kan läggas in i en och samma komando. Exempel: ______________________________________________________________________________________________ Lektion7-Font Font size Används för att bestämma storleken på den text som används. Storleken är lik den man använder i word t.ex. storlek 12 i word är också storlek 12pt i css. Godkända värden är: Procent (%) Punkter (pt) Pixlar (px) Centimeter (cm) Exempel: Text med storleken 14 punkter ______________________________________________________________________________________________ Font-family Används för att ange storleken på texten även om man använder många olika ramar i samma dokument. Godkända värden: Alla typsnitt. Det enda man behöver tänka på är att man använder komma(,) mellan dom olika typsnitten t.ex. times new roman,arial,helvetica,comic sans,MS sans seriff. Exempel:
Jonas
______________________________________________________________________________________________ Font-weight Gör texten lite synligare i ett dokument. Godkända värden: Normal Bold Bolder Lighter 100 200 300 400 500 600 700 800 900 Exempel: Extra synlig text ______________________________________________________________________________________________ Font-style Styr dom vanliga funktionerna för hur en text ska se ut t.ex. fet,kursiv. Godkända värden: normal (normal) italic (fet) oblique (kursiv) Exempel: ______________________________________________________________________________________________ Font variant Används för att ange om en text ska skrivas med versaler eller gemener.dvs stora eller små bokstäver. Godkända värden: Normal Small-caps (STORA BOKSTÄVER) Exempel: ______________________________________________________________________________________________ @font-face Den här egenskapen råder det ofta lite tveksamhet om. Men meningen med den är att man skall infoga egna fonter till sina filer, detta är lämpligt att göra då man skall använda udda fonter som få användare har. Problemet är dock att man måste använda sig av fonter av formaten .eot, .eo eller .ote. Inte TrueType-fonter alltså! För att infoga en font med hjälp av egenskapen skriver du så här: ______________________________________________________________________________________________ Lektion 8-Markören Cursor Default (vanligt utseende) E-resize (pilen pekar åt höger) Wait (ladda) Text (textmarkör) Help (frågetecken) Nw-resize (pilen pekar snett uppåt) Sw-resize (pilen pekar snett neråt) W-resize (pilen pekar åt vänster) Crosshair (kryss) Hand (hand) Ne-resize (pilen pekar snett uppåt till höger) N-resize (pilen pekar uppåt) Se-resize (pilen pekar snett åt höger neråt) S-resize (pilen pekar neråt) Move (flyttecken) Exempel: ______________________________________________________________________________________________ Lektion 9-Positioner Positionering Används för att placera en bild eller text över en annan bild eller text. Godkända värden: left top width height Exempel: ( ) Jonas Jonas är Bäst
CSS är jättelätt
______________________________________________________________________________________________ Lektion 10-display Display Bestämmer om ett element skall synas i webbläsaren eller inte. Godkända värden: Block Inline List-item None (Visas ej) Exempel: ______________________________________________________________________________________________ White-space bestämmer hur mycket utrymme som skall skapas vid ett element. Vanligtvis skapar
ett enkelt enterslag.Denna egenskap kan du enkelt ändra. Godkända värden: Normal Nowrap Pre Exempel: Rad 1
Rad 2 OBS! Radbrytningen ser ut som vanligt. ______________________________________________________________________________________________ List-style-type Används för att byta ikoner när man gör en lista med komandot