När man vill veta vilket typsnitt som används på en webbsida får man kika i CSS. Ett nytt plugin till chrome fokuserar på just detta. WhatFont skapar helt enkelt en lite ruta som talar om vilket typsnitt som valts. Smidigt.

Exempel från denna sida:

Har du någon gång känt behov att testa html och css riktigt snabbt någon gång. Utan att ha tillgång till några program för det. Det finns faktiskt möjlighet att göra det direkt i webbläsaren. Ett sådant verktyg är dabblet. Gå dit, skriv in  koden du vill testa och du ser resultatet på skärmen.

Är du intresserad av att fördjupa dig i CSS3. CSS3.info listar en trave med videor från Think Vitamin. Tidigare har de tagit betalt för dessa, men nu är de fria att kika på för den som önskar.

Border, övertoningar, animeringar, typografi, media queries m.m. Över 4 timmar med genomgångar.

Om du vill veta lite hur man skriver koden till ett minimalt HTML5-dokument kan du bege dig till Sitepoint. Där publiceras ett avsnitt ur boken HTML5 & CSS3 for the Real World. Sidan ger en rejäl genomgång av hur man skriver ett minimalt HTML-dokument och jämför ibland med XHTML och HTML4.

Författarna motiverar mycket tydligt varför man skriver som man gör, och hänvisar också till javascriptbibliotek som gör det möjligt att anpassa till äldre webbläsare.

Jag har bara hunnit ögna genom boken, men den verkar mycket läsvärd. Det finns även ett helt kapitel att ladda ner från bokens hemsida.

Författare är Alexis Goldstein, Louis Lazaris och Estelle Weyl. Du kan även läsa en introduktion av dem på bokens hemsida.

Är du extra nyfiken finns det en podcast med Alexis och Estelle hos Sitepoint. Sitepoint har även transkriptioner på sina podcast, så det går bra att “ögna igenom” den, om det inte passar att lyssna.

Om man vill göra runda hörn med CSS använder man egenskapen border-radius. Ovan ser du exempel på det. Här använder jag även box-shadow på bilden för att generera en svag skugga. Jag har använt följande css-kod på bilden:

padding: 25px;
border: 2px solid #666;
background-color: #efe;
box-shadow: 4px 4px 15px  #bbb;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; (word-press gillar tydligen inte egenskaper som börjar på  -moz och -webkit i inline, utan tar bort dem, trots att jag skrev det i koden.)

På p-taggen runt bilden har jag använt:

border: 1px solid #cdc;
margin: 0 auto 8px auto;
padding: 15px;
background-color: #ded;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

Det jag egentligen vill tipsa om är webbplatsen border-radius.com. Den har ett enda syfte: Att hjälpa dig få fram kod för runda hörn som fungerar i de flesta webbläsare. Bara skriv in antal pixlar du vill ha i rundningen och du ser hur det ser ut. Dessutom får du den extra kod som behövs för att visa hörnen i både webkit- och geckoläsare (dvs Safari, Chrome och Firefox). Så här ser det ut:

Detta är förmodligen vad de flesta oftast behöver. Att det går att göra mer kreativa lösningar och t.ex. göra “oregelbundna” hörn – det kan du fördjupa dig i på CSS3.info.

Har just lagt ut länkar för mina elever till en demoserie jag gjort tidigare. De behöver se hur man kan använda en mall i Dreamweaver (CS4) och anpassa den på ett enkelt sätt, genom att ge sig in i CSS-filen och justera.

Här introduceras bland annat:

• DEL 1 – Använd mallar i Dreamweaver och spara CSS och HTML-fil
• DEL 2 – Hitta i Dreamweaver, HTML-kod, CSS-regler. Lägg in bakgrundsbild och sidfot.
• DEL 3 – bakgrundsbilder och -egenskaper i Dreamweaver, bl.a background-repeat.
• DEL 4 – kort introduktion till hur man använder Firebug för att arbeta med en sida, bl.a. att läsa CSS-regler och box-modellen i pixlar.
  Hur man arbetar med CSS-regler, framför allt boxmodellen, bl.a. marfgin och padding  i Dreamweaver

Den är i fyra delar och börjar med en tom mall och slutar med bilden du ser ovan.

Russ Weakly ligger bland annat bakom maxdesign, där han delar med sig av sina kunskaper om bland annat css. En klassiker är hans genomgång av hur man gör olika listor, listamatic.

Han har även gjort ett antal presentationer på slideshare. En av dem handlar om hur man bygger en teckensnittsfamilj i CSS. Hur hittar man teckensnitt som passar ihop? Vad ska man tänka på när man anger alternativa typsnitt? Hur ser en optimal teckensnittslista ut?

Jag skrev till honom och fick grönt ljus att översätta en del av hans presentationer. Här finns en svensk version av hans presentation om font stacks: Hur bygger man en teckensnittslista?

PS. Språkrådet säger att “Teckensnitt och typsnitt är helt synonyma och likvärdiga termer”.

Tillhör du de som använder CSS reset? Med andra ord, nollställer du de CSS-regler som webbläsarna har inbyggda och börjar formge dina webbsidor med css utan att några inbyggda regler i webbläsaren “stör”?

Mina elever brukar vara ganska konfunderade när de börjar med CSS och upptäcker att det är märkliga “mellanrum” på webbsidan. De kliar sig i huvudet och undrar varifrån dessa kommer.

När vi plockar fram Firebug och börjarundersöka koden ser vi bland annat de gula fälten som markerar marginaler. Här börjar det bli begripligt. De förstår snart finessen med att t.ex. body har en standardmarginal i alla webbläsare. Det vore svårt att läsa texten på en webbsida om den började precis intill kanten på fönstret. Samma sak med rubriker och och stycken. De skulle vara nästan omöjliga att läsa om det inte fanns mellanrum mellan dem.

Ett sätt att ta kontroll över dessa olika förformaterade inställningar i webbläsarna är att använda en färdig fil med CSS-reset. Det finns en mängd olika, du kan t.ex. hitta en samling på cssreset.com. Du ser några av de vanligaste på bilden ovan.

Ett exempel på hur de kan se ut hämtar jag från Eric Meyers reset-fil (från cssreset.com). Här kan du se hur han tar bort: marginal, padding och border, samt påverkar ytterligare några egenskaper.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Hur använder jag begreppen i CSS? När man ska förklara är det viktigt att använda rätt terminologi.

Lois Lazaris reder ut begreppen på ett mycket tydligt sätt på sin blogg impressivewebbs.

Att det sen kommer till ytterligare förvirring för oss med det lilla språket svenska är ju en helt annan sak. Läs gärna Tommy Olssons bok  Max räckvidd med HTML & CSS (Har du den inte? Skaffa den!). Han tillhör auktoriteterna på området. Själv har jag inte stött på någon förteckning över hur man försvenskar olika begrepp. Hur översätter du själv “font-stack” till exempel?

Ytterligare en (mer kortfattad) sida om css-terminologi hittade jag samtidigt hos nimbupani.

Jag har gjort en demo till mina elever, där jag går igenom hur man använder en oordnad lista i HTML för att med CSS skapa en vertikal länklista med egen grafik.

Den går igenom de grundläggande stegen, utan några finesser. På “fyra minuter” kan du lära dig det du behöver för att göra en sådan lista.

Inspirationen är (givetvis) hämtad från Russ Weaklys Listamatic. Där är det naturligt att fortsätta fördjupa sig, med t.ex. horisontella och nästlade listor. Finessen där är att han använder samma kod tvärs igenom och man får både html och css för de olika exempel som olika personer bidragit med. En mycket bra resurs.

Men det finns säkert de som vill ha grunderna på svenska, därav denna demo.