Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt så här CSS (Cascading Style Sheets) är ett stilmallsspråk som beskriver presentationen av ett HTML- (eller XML-) dokument. CSS beskriver hur HTML-elementen ska visas på skärmen. I CSS-filen, som liksom HTML-filen är en textfil i grunden, skrivs namnen på HTML-taggarna in följt av {. Därefter specificeras vilket attribut som ska påverkas, och sedan avslutas det med. Till exempel: I det här fallet får <body> en snygg grå bakgrundsfärg. Varje rad avslutas med semikolon (;). Ibland vill man ändra fler attribut än ett för varje HTML-tagg, det gör man genom att skriva nästa attribut på en ny rad. 1. Skapa ett nytt dokument i texteditorn. 2. Lägg till HTML-taggen body i CSS-dokumentet. Det som ska ändras är sidans bakgrundsfärg. Det görs genom att skriva background-color: och sedan det hexadecimala värdet av färgen ni vill använda. Använd till exempel Photoshop för att blanda en färg och få färgvärdet, eller kolla här: http://www.w3schools.com/html/html_colors.asp Det går också att skriva färgnamnet på färgen som ska användas. Se här: http://www.w3schools.com/cssref/css_colornames.asp 3. Spara sedan filen som style.css i samma mapp som HTML-filen. 4. Om webbsidan laddas om kommer det inte att vara någon skillnad mot tidigare. Det beror på att webbrowsern inte vet att den ska läsa in stilmallen för webbsidan. Det fixas genom att lägga till följande kod i <head> i HTML-koden: <link href="style.css" media="screen" rel="stylesheet" type="text/css"/> 5. Ladda nu om webbsidan i browsern, och webbsidan har den valda grå bakgrundsfärgen. 6. Lägg sedan till HTML-taggen för rubriknivå 1, och ge den en orange färg genom att skriva. 7. Den orangea färgen kommer att bli lite svårläst mot den grå bakgrunden varför vi väljer en mörkare komplementfärg som bakgrundsfärg till rubriken. Gör därför en ny rad i h1-taggen och skriv background-color: #6a6a6a;. 8. Centrera rubriken genom att skriva: text-align: center;. Läs mer om text-align här: http://www.w3schools.com/cssref/pr_text_text-align.asp 9. Ta också bort den feta stilen från rubriken genom att lägga till: font-weight: normal;. http://www.w3schools.com/cssref/pr_font_weight.asp 10. Med hjälp av font-size: kan storleken på texten förändras. Till exempel genom att skriva 72px. Px är en magisk storlek i CSS som inte nödvändigtvis har något med verkligheten att göra, men genom att genomgående använda px som storleksmått är det enkelt få rätt inbördes storleksförhållanden. Läs mer om storlek här: http://www.w3.org/style/examples/007/units.en.html
11. Det går också att förändra storlek på ett element genom att ändra width eller height. I det här fallet påverkas inte teckenstorleken utan rutan i vilken texten sitter. http://www.w3schools.com/cssref/pr_dim_width.asp http://www.w3schools.com/cssref/pr_dim_height.asp 12. Genom att specificera padding ges utrymme runt texten (eller ett annat objekt) inuti rutan i vilken texten sitter. Padding anges på olika sätt. Till exempel padding-top: 100px; vilket ger 100px mellan toppen på rutan och texten. Det går också att bara skriva padding: 100px; vilket ger 100px mellan alla sidor av rutan och texten. Man kan också skriva padding: 100px 0; vilket ger 100px mellan toppen och botten av rutan och texten, men ingen padding till vänster eller till höger. När värdet är 0 behövs det inte specas närmare med px eller annan enhet. Det går också att skriva padding: 100px 25px 50px; för att få 100px padding i toppen, 25px åt sidorna och 50px i botten. Det går förstås också att ge olika padding åt alla håll, ordningen är topp, höger, botten, vänster. Ge rubriken följande padding:. Läs mer här: http://www.w3schools.com/css/css_padding.asp 13. Marginalen runt rutan går också att ändra. Uttrycket för margin fungerar på samma sätt som för padding. Ge rubriken följande marginaler: margin: 72px 36px 0;. http://www.w3schools.com/css/css_margin.asp 14. Lägg sedan till p-taggen i CSS-filen. Ändra bakgrundsfärgen till #bfbfbf, lägg till samma padding som för h1, och lägg till följande marginal: 0 36px. CSS-koden ska se ut ungefär så här: h1 { p { background-color: #6a6a6a; text-align: center; font-weight: normal; font-size: 72px; margin: 72px 36px 0; 15. Spara CSS-filen och ladda om webbsidan. Kommentarer i CSS-koden En kommentar i en CSS-fil börjar med /* och avslutas med */. På samma sätt som kommentarer i HTML-koden kan CSS-koden kompletteras med kommentarer som förenklar läsningen av koden. Kommentarer kan dessutom användas för att markera olika avsnitt eller avdelningar i koden.
CSS vidare Det som nu behöver fixas på webbsidan är bilden, samt listan. 1. Först ska bilden centreras. Detta görs med följande display: block; och margin: 0 auto;. Display talar om för webbrowsern hur den ska behandla bilden, och genom att skriva block tolkas bilden som ett blockelement (som ett stycke <p>). Genom att ge margin värdet autocentreras bilden då marginalen automatiskt justeras till lika bred på båda sidor. Läs mer: http://www.w3schools.com/cssref/pr_class_display.asp http://www.w3.org/style/examples/007/center.en.html 2. Storleken på bilden går också att ändras i CSS, även om det bästa är att redigera bilden till rätt storlek i ett bildredigeringsprogram. Läs mer här om dimensioner på en bild i CSS: http://www.w3schools.com/css/css_dimension.asp 3. Nu ska listan ändras så att den matchar styckena med text. Då CSS-koden för styckena i princip kommer att vara densamma för listan ska koden skrivas om i såväl HTML-koden som i CSS-koden. I stället för p, med tillhörande utseendeförändringar, i CSS-filen ska en klass användas. En klass kan tilldelas ett antal olika element. Dessa element delar då på de egenskaper som är inställda i CSS-filen. En klass skrivs så är i CSS:.klassensnamn. Som i all annan kodning, skapa klassnamn (och variabler) som är lätta att förstå och som hänvisar till det de är eller är kopplade till. http://www.w3schools.com/css/css_selectors.asp http://www.w3schools.com/html/html_classes.asp Ändra p i CSS-filen till något liknande:.maintext { padding: 36px 12px; Och ändra sedan i HTML-filen och lägg till klassbeteckningen i alla berörda delar, genom att skriva om <p> till <p class= maintext > och detsamma för listan. 1. Om man har två stycken (<p>) men vill att de ska ha olika olika utseende kan man ge dem olika id. I HTML-koden skrivs id in som <p id= ingress > och <p id= summary >. I CSS-filen skriver man #ingress { respektive #summary{. http://www.w3schools.com/cssref/sel_id.asp http://www.htmldog.com/guides/css/intermediate/classid/ Men, det går inte att använda ett och samma id mer än en gång på en webbsida. Så, om man vill använda en särskild markering för citat och det är mer än ett citat på sidan så måste man använda klass i stället för id. 2. Spara såväl CSS- som HTML-fil och kolla hur det ser ut genom att ladda om webbsidan. 3. Det är inte perfekt. Listan ligger för långt till vänster, även om den har rätt bakgrund. För att fixa detta behövs listan läggas till i CSS-filen. Detta görs genom att skriva ul.maintext. Då berörs listor i klassen maintext av CSS-koden. Ändra padding på vänsterkanten, antningen genom att skriva siffrorna i rätt ordning (padding: 0 0 0 36px;) eller genom att använda padding-left: 36px;. 4. Och avslutningsvis ska en tabellen fixas till. Även en tabell kan få en klasstillhörighet och ärva utseende med hjälp av class. Till exempel så här:
<table class="maintext"> <tr> <th>manufacturer</th> <th>model</th> <th>power</th> </tr> </table> 5. När det är klart kan tabellen få ett något annat utseende i CSS-filen. Till exempel utseendet på kanten (border) runt tabellen, hur texten ska justeras (text-align) i tabellen, eller vilken padding texten ska ha i cellerna. http://www.w3schools.com/css/css_table.asp table.maintext { border: 1px solid black; th, td { text-align: left; padding: 6px; 6. Som default blir länkar blå och understrukna, en besökt länk är lila och understruken, medan en aktiv länk (dvs när musknappen är nedtryckt på länken) blir röd och understruken. Detta är standard, och oftast tydligt och lättförståeligt, men ibland passar det verkligen inte in layouten, designen eller färgschemat. En länk skrivs a:link i CSS, en besökt länk a:visited, en aktiv länk a:active, och en länk som musmarkören är ovanför skrivs som a:hover. a:link { a:visited { a:hover { a:active { color: #FFFF00; http://www.w3schools.com/css/css_link.asp 7. När all kodning är klar bör man testa den i en validator för att få hjälp att upptäcka syntaxfel. HTML: https://validator.w3.org/ CSS: https://jigsaw.w3.org/css-validator/ 8. Om allt stämmer enligt validatorerna, har vi nu en enkel webbsida som innehåller ett utbud av vanliga element. För mer information än det som ges i detta dokument kolla här: HTML: http://www.w3schools.com/html/ CSS: http://www.w3schools.com/css/ CSS-koden:
h1 { background-color: #6a6a6a; text-align: center; font-weight: normal; font-size: 72px; margin: 72px 36px 0;.mainText { img { display: block; margin: auto; ul.maintext { padding-left: 36px; table.maintext { border: 1px solid black; border-collapse: collapse; th, td { text-align: left; padding: 6px; a:link { a:visited { a:hover { a:active { color: #FFFF00;