CSS 3 – del 1 – Introduktion

Lästid: 2 minuter

Introduktion till CSS3

Stilmallen – Cascading Style Sheet – är ett kraftfullt verktyg i vårt hemsidebyggande. Att skilja på struktur (HTML) och presentation (CSS) skapar också de bästa förutsättningarna för en standardisering med korrekt syntax. Det vi använder idag är en kombination av specifikationerna CSS level 2.1 och CSS3. I takt med nya och mer avancerade applikationer och ett ökat behov av att utveckla webben som exempelvis HTML5, så följer även CSS samma fotspår. CSS3 är av W3C rekommenderade webbstandarden. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Robert Nyman – How to solve :first-child CSS bug in IE 7

Lästid: 2 minuter

Denna artikel – How to solve :first-child CSS bug in IE 7 – är översatt från engelska och omarbetad med Robert Nymans tillåtelse. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

10 grundläggande lektioner i CSS

Lästid: 33 minuter

Hur fungerar egentligen CSS? Hur ser syntaxen ut? Hur länkar vi in en stilmall till hemsidan? Vad menas med allmänna cssmärkningar? Vad är fulhtml? Detta, och mycket mycket mer, får du lära dig i 10 grundläggande lektioner i CSS. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Bold, strong, em eller italic?

Lästid: 1 minut

Varför kan en fetstilt text både heta bold och strong? Är det någon skillnad på css och css? Mja egentligen inte, men det finns skillnader beroende på om du använder en stilmall eller lägger in enkla cssavsnitt som html. Låt oss reda ut det här med rätt kod för rätt semantik. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

CSS referensguide

Lästid: 4 minuter

Här listar jag enbart CSS nivå 1 och 2.1. Vad gäller CSS3 och CSS4 så har de sina egna inlägg om du vill lära dig mer.

Allmänna egenskaper

(mer…)

id {data} teckensträng som anger en specifik identitet till ett element
div märkning som omfattar ett block eller element
class märkning som föregås av ett block eller element
span
formaterar en avgränsad del (in-line)
visibility
anger om du vill att något element ska vara osynligt eller ej, ex visible, hidden
overflow
anger hur du vill att innehållet i ex en box ska ”svämma över” med värdet auto, hidden, scroll, visible
display
anger hur du vill att ett element ska formateras med värdet none, block, inline, list-item

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Relative – absolute – float

Lästid: 5 minuter

Uppdaterat 3 april 2017 / Om clear:float och clearfix:after. Idag anges clear:float annorlunda genom att vi kan använda CSS pseudo class-elementen :after och/eller :before för att avsluta ett/flera flytande element. Exempelkod 1 specificerar blocket som berörs (wrapper). Nummer 2 specificerar flera element. Exempel 3 är global. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Runda hörn utan bilder – enbart css

Lästid: 1 minut

Uppdaterat 2 april 2017

Denna artikel innehöll en gammal teknik och är därför redigerad. Nu för tiden används CSS3 border-radius, och med dagens moderna webbläsare behöver man inte längre ange ett webbläsarespecifikt prefix såsom -webkit-border-radius eller -moz-border-radius utan det räcker med border-radius. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Gör en iframe enbart med css – skrollbar div

Lästid: 2 minuter

Uppdaterat 2 april 2017 / Iframes – inbäddade ramar används numer mycket sällan eftersom det finns nyare tekniker. Iframes bör dessutom inte användas med tanke på användbarhet och tillgänglighet. Guiden här under kommer dock att få ligga kvar eftersom den används i programmeringsstudier och lärande av vad frames/iframes är. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Styla dina bilder

Lästid: 3 minuter

Du kanske använder bilder som klickbara länkar? Det vanliga sättet är då att skriva border=”0″ i html-koden. Använder du css ska du naturligtvis låta stilmallen sköta detta istället för att stjäla utrymme i html-koden. Ni som använder xhtml och/eller vill gå över till strict kommer direkt att upptäcka att sidan inte validerar om man inte tar bort det. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

Systematisk enkel felsökning

Lästid: 5 minuter

Hjälp – sidan vill inte validera eller så har div-blocken hamnat helt fel. Jag ändrade lite i koden och nu är allt förstört!!!

Här har du ett litet ”check-schema” att följa. Jag vill bara poängtera att denna felsökning inte är någon universalmedicin eftersom jag inte vet hur just din sajt ser ut. Se den istället som ett hjälpmedel till att finna eventuella fel du kanske inte vet hur du annars skulle kunnat upptäcka. (mer…)

Författare: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.