CSS SKOLA

CSS var inte det lättaste att lära sig. Kan man html kan man lätt hitta sig väg via en css stilmall, men det finns några saker som nybörjare kan ha svårt för.

Det svåraste är dels att identifiera vad man kan förändra med css-stilmallar. Men svaret på den här frågan är mycket enkel i själva verket: Allt går att förändra! Varje liten element på sidan kan stylas med css.

Här kommer jag att ta upp sådant som har att göra med externa stilmallar.

Fördelar med CSS

En klar fördel med CSS är att man kan ge en hemsida den look som man har behov av och som man önskar ge den. Genom att använda en extern css-fil kan man förändra många saker i en hemsida på ett enda ställe. Man sparar tid.Dessutom anses css leda till mindre kod på varje hemsida något som leder till att hemsidor laddas snabbare.

Man överskrider hmtl:s begränsning, och kan skapa hemsidor som ser ut som broschyrer eller som tidningar. Du har säkert hört negativa saker om css. Men det finns nackdelar med alla skriftspåk som används.

Nackdelar med CSS

Även om css är flexibel och bra, kan olika webbläsare ha olika färdigheter när det gäller läsning av css-koderna. Detta leder till att en hemsida kan se olika ut i firefox och internet explorer.

Men ju precisare koden är, desto mer kompabilitet finns det. Glöm därför inte att förgranska din hemsida i både IE och Firefox, Netscape och Opera. Det största misstaget man kan göra är att glömma kolla hur en hemsida ser ut i en annan webbläsare.

Den första regeln - skillnaden mellan externa och interna stilmallar

En extern stilmall sparas som t ex filnamn.css och infogas eller inkluderas mellan <head> </head> taggarna så här:

<head>
<TITLE>Carmens CSS-skola </TITLE>
<link href="filnamn.css" rel="stylesheet" type="text/css" />
</head>

Man kan även använda interna stilmallar. Detta innebär att samtliga stilar definieras mellan <head> </head> taggarna på följande sätt:


 <head>
<TITLE>Carmens CSS-skola </TITLE>
<style type="text/css">       
	#left a:link
	{color: red; text-transform: uppercase; 
	text-decoration: none;}
	#left a:hover
	{color: black; background: pink; 
	text-decoration: underline;}
	.style1 {font-style: italic}
etc...
</style>
</head>

Allmän CSS styling - Grundstyling med CSS

När man öppnar en stilmall på en hemsida, börjar de allmänna egenskaperna definieras och stylas. Det handlar framför allt om vilken bakgrund sidan har, hur huvudrubrikerna, länkarna, paragraferna, textstoleken, m.m. ser ut.

Det allmänna delas sedan upp med css stilmallen i avgränsade områden så kallade div ID på vilka andra allmänna regler kan gälla. De mest specifika egenskaperna stylas med .class.

Vi börjar med det allmänna.

CSS BODY

body {color: #000; margin: 0 auto; padding: 0; background: #fff; text-align: center; font-family: verdana; font-size: 16px; line-height: 20px}

Den här koden definierar sidans allmäna egenskaper. Allt som inte har # eller . (punkt) framför innebär att koden gäller överallt på sidan, om inget annat anges någon annanstans.

  1. color - syftar på textfärgen som i mitt exempel är svart.
  2. background - bakgrundsfärgen som i mitt exempel är vit.
  3. margin - syftar på vilka avstånd som finns mellan det som står på sidan och den text eller det innehåll som finns på en sida. En margin på noll innebär att det inte finns några marginaler vad gäller huvudet och foten på t ex den här sidan.
  4. text-align - definierar om de element som finns på sidan skall vara centrerade, till höger eller till vänster. Om man vill att själva innehållet på en sida som denna skall vara centrerad så gäller det att skriva text-align: center i body. Men i de andra taggarna och olika #div som används skriver man sedan text-align: justify (som jag använder mig av) eller text-align: left, som innebär att texten inte har centrerad inriktning.
  5. font-family - syftar på teckensnittet som används generellt på hemsidan. Man kan använda vilka teckensnitt man än vill.
  6. font-size - storleken på texten.
  7. line-height - har med radavstånd att göra. Om man inte anger något värde kan man inte räkna med något radavstånd något som kan leda till mindre bra synlighet.

CSS P

En annan sak som brukar anges är värdena och stilen som skall gälla för varje ny paragraf (p).

p{margin-left: 10px;padding: 0; color: red}

Detta innebär i korta drag att varje ny paragraf börjar med ett vänsterindrag på 10 px samt att färgen på texten är röd. Padding kan jämföras med margin, men det är en annan sak. Då börjar paragrafen på noll men har en marginal till sig själv, om ni förstår vad jag menar. Det bästa sättet att lära sig är skillnaden är att prova själv. Lek med koden och med olika värden och du kommer att lära dig snabbt skillnaderna och upptäcka de möjligheter som koden ger.

Skillnaden mellan margin och padding ser du på mina huvudrubriker.

Detta är H1 med en padding på 10px

Detta är H2 med en margin på 10 px och en padding på 10px.

Kanske kan du testa själv.

En viktig sak när det kommer till margin och padding är att dessa mått tar upp plats. Om du definierar något som har 100px i längd, och anger en padding på 10 px eller en margin på 10 px, tänk då på att minska längden till 80px, eftersom padding och margin läggs på utöver den angivna längden.

P:first letter

För att få en snygg första bokstav på en paragraf, kan man använda sig av p:first letter. I mitt exempel har jag gjort en extra avsnitt inom vilken p:first letter skall gälla, som kallas #example.

Titta på koden:

#example
{
width: auto;
background: #f7f7f7;
}

#example p:first-letter
{
color: #ff0000;
font-size:xx-large
}

Och titta på resultatet.

 

CSS Länkar

Länkarnas utseende är också viktiga på en sida. a:link står för själva länken, a:active står för länken som är aktivt, a:visited gäller besökta länkar och a:hover vad som händer med länkens egenskaper när man drar med muspekaren över den. 

a:link{
	color: red; 
	text-transform: uppercase; 
	text-decoration: none;
}
a:hover{
	color: black; 
	background: pink;
	text-decoration: underline;
}

Länken är i det här fallet röd och består av VERSALER men när man drar med muspekaren över länken, omvandlas färgen till svart. Länken får en rosa bakgrund och en understryckning.

EXEMPEL:

Detta gäller för länkarna inom det här avsnittet.

Eftersom jag inte har angett hur a:visited och a:active skall se ut, gäller den allmänna reglen med en lila färgad länk när du väl har klickat på länken som ändrar färg.

Vill du specificera skriver du:

a:active {....}

a:visited{....}

Om du vill att länkarna alltid skall se likadana ut kan du i stället gruppera egenskaperna och skriva:

a:link, a:hover, a:visited, a:active{..........}

Då ändrar inte länkarna färg utan de egenskaper som du anger gäller.

CSS H1, H2, H3, H4, H5, H6 - Huvudrubrikerna

H står för huvudrubrik. Man kan ha upp till sex typer av huvudrubriker på en hemsida och i själva verket behöver man inte fler. Det är så mycket bättre med liten variation. För mycket variation på en hemsida, gör att hemsidan blir krånlig.

Har man många sidor med olika teman, kan man definiera fler huvudrubriker men man kan så klart definiera även hur olika huvudrubriker skall se ut inom vissa avsnitt.

För h1 och h2 på den här sidan har jag använt följande syling:

h1{
 font-size: 15px;
 line-height: 26px;
 background: #333;
 color: #fff;
 padding-left: 10px;
 }

 h2{
 font-size: 15px;
 line-height: 26px;
 background: #CCC;
 color: #fff;
 padding-left: 10px;
 margin-left: 10px;
 }

Man kan som i länkarnas fall, gruppera huvudrubrikerna så att samma styling gäller alla:

h1, h2, h3, h4, h5, h6 {....}

CSS HR (horisontell linje)

hr står för Horisontal line, och gäller den horisontella linjen. Den kan också få vissa värden, t ex:

hr{
color: #333;
margin-top: 10px;
border: 1px dashed;
width: 200px;
}

Då ser linjen ut som den som du ser ovan.

CSS .CLASS

När man använder class, har man oftast en punkt framför det som man vill styla tex .h1. När man sedan tillämpar class-egenskaperna för en huvudrubrik, kommer stylingen endast att gälla för huvudrubriken i fråga.

Låt oss ta ett exempel:

.h1{
 	      font-size: 23px;
 	      color: pink;
 	      line-height: 15px;
         }

Den här stilen ger följande resultat:

huvudrubrik

När du applicerar koden i själva html, ser det ut så här:

<p class="h1">huvudrubrik</p>

Som du själv ser, är line-height lika med 15 medan font-size är lika med 23. Detta leder till utseendet ovan. En del av texten på den andra raden går över texten ovan.

CSS #DIV ID

Du som är intresserad av CSS har sett det själv. Ibland kan man se sådana html kombinationer:

<div id="googlediv">Text text text</div>

När du specificerar ID, så kommer en utseende att gälla i en hel sektion. T ex kan man göra en div se ut så här:

#googlediv{
width: 800px;
height: 90px;
margin: 0 auto;
padding: 0;
text-align: center;
}

Och då gäller det att titta på google annonserna ovan menyn högst upp på sidan. De finns i sin egen div-tag med ID googlediv.

Det roliga med ID är att man:

  • Kan få de olika sektionerna att flyta till höger eller vänster på en sida, genom att använda sig av float: right eller left.
  • Man kan ge alla element inom en sektion vissa egenskaper.

Låt oss säga att man vill att en viss h1 skall gälla inom #left. Då skriver man:

#left h1{.................}

Om det är länkarna som gäller, då skriver man så:

#left a:link{
color: red; 
text-transform: uppercase; 
text-decoration: none;
}


#left a:hover{
color: black; 
background: pink; 
text-decoration: 
underline;
}

Och så har man fått den här länken, som vi har tagit upp tidigare också.

CSS MENYER

Det är ganska lätt att skapa menyer med externa stilmallar. Ändå finns det några problem som kan uppstå i processen. Det är svårt att veta hur man får en vågrätt och en horisontell meny. Det var i alla fall svårt för mig.

När man skall lägga in en meny i html koden, kan det se ut på det här viset.

<div id="meny">
<ul>
<li><a href="#.html">Hem</a></li>
<li><a href="#.html">Länkar</a></li>
</ul>
</div>

Hur menyn ser ut, kan variera men i det här fallet pratar vi om en horisontell meny som ser ut så här:

 

Vad är hemligeheten bakom den horisontella menyn? låt oss ta en titt på koden.

#meny{
 	width: 300px;
 	height: 58px;
 	background: #81AA44 url(../bilder/navbak.jpg);
 	text-align: left;
 	font-size: 15px;
 	margin-top: 0 auto;
 	padding:0;
 }
#meny ul{
    padding: 20px 10px 0 0;
           }
#meny li{
   display: inline;
   margin: 2px 2px 2px 2px;
           }
#meny a{
   color: #66FF99;
   text-decoration: none;
   padding: 0 10px 0 10px;
   }

#meny a:hover{
	color: auto;
	text-decoration: none; 
 }

Det som du ser i grönt är själva hemligheten. När man skriver display: inline som kod för li, får man en horisontell meny. Om man däremot skriver inline-table i stället för inline, får man en vertikal meny. Exakt samma kod alltså men i stället för att skriva display: inline, så skriver man display: inline-table.

 

Den vertikala menyn är en meny som i stort sett är en punktlista som kan stylas ytterligare. Det enklaste sättet att lära sig hur detta går till är att själv leka med koden. Om du använder dig av

CSS Footer

Hemligheten bakom en footer som inte blandar sig in i de andra taggarna är helt enkelt att ha med koden 'clear: both' när man definierar foten på sidan. 

#footer{
 clear: both;
 height:50px;
 padding-top:50px;
}

CSS Nyhetsbox, rullande text eller css scrolls

Ibland vill man ha med en text som är större än utrymmet. På statiska webbsidor som inte skall vara längre än det som kan ses utan att behöva rulla ner sidan, kan man använda funktionen overflow: scroll.

Låt oss ta ett exempel:

#mytext{
 overflow: scroll;
 height: 100px;
 width: 100px;
 scrollbar-face-color: green;
 }

Vad får vi fram? Jo, följande box, som kan användas som nyhetsbox till exempel:

Här kan man skriva lite nyheter, eller andra saker som är bra att ha på en hemsida. Det är roligt med scrolls.
 

Det är dock inte alltid man vill ha scrollbars både vertikalt och horisontellt och det är ganska enkelt att bli av med den horisontella scrollbaren. 

#mytext1{
 	     overflow-x: hidden;
 	      overflow-y: scroll;
 	      height: 100px;
 	      width: 100px;
 	      scrollbar-face-color: green;
 	      scrollbar-arrow-color: red;
}
Här kan man skriva lite nyheter, eller andra saker som är bra att ha på en hemsida. Det är roligt med scrolls.

Genom att använda padding och justera storleken på boxen kan man få en snyggare look.

Som men alla andra #div id kan man definiera allt för en sådan scroll - color för text, background för bakgrund, border för ram osv.

Man kan också definiera länkarna så klart. #mytext1 a{....}, #mytext1 a:hover {....} och så vidare.

EN FÖRSTA SIDA MED CSS

Det första man bör tänka på när man gör en CSS-sida är dels vad man skall ha på sidan och hur man vill indela sidan.

Det vanligaste är att man först definierar de allmänna egenskaperna, men dessa kan också tas upp sedan. Det är därför svårt att ange en allmän ordning som alltid skall göra, eftersom en hemsidas uppbyggnad är en kreativ process. Ändå bör man ha i huvudet en bild av hur man vill ha sin sida.

Centrerad innehåll eller inte

En mycket viktig sak är att bestämma sig om man vill ha allt centrerad på sidan eller om allt skall ligga till vänster eller med en viss marginal.

Den här sidan är centrerad i alla webbläsare. Hur kunde jag åstadkomma detta? Det var en gåta för mig i början och jag fick testa olika saker innan jag kunde åstadkomma en centrerad hemsida i samtliga webbläsare. Jag är självlärd, precis som du som läser detta. Ändå är hemligheten enkel.

Jag skall visa er css koden för BODY, där hemligheten finns. Det som är markerad med grön textfärg är särskilt viktigt. 

body{
 color: #333;
 text-align: center;
 line-height: 17px;
 font-size: 13px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 padding:0;
 margin:0 auto;
 background: #333 url(../bilder/bakgrund.gif) repeat;
 }

text-align: center gör sidan centrerad. När man sedan definierar den "container" som håller ihop text och bild, kommer den att vara centererad på sidan.Om man nu skulle vilja ha allting till vänster eller till höger skriver man text-align: left; eller text-align: right;.

padding: 0 och margin: 0 leder till att det inte finns några avstånd och marginaler mellan min container eller sidans innehåll och skärmens kanter och detta gäller över hela webbsidan. Om man vill att all innehåll på sidan skall börja lite längre ner ger man padding-top: zzpx; där zz ersätts med önskat antal pixel, t ex 10 eller 20. Då börjar själva containern med en marginal på 0 men allt som finns inom den här containern börjar med ett visst avstånd från toppen.

margin: 0 auto gör sidan centerad även i Firefox. Om man saknar auto i den här koden kommer sidans innehåll att ligga till vänster i Firefox.

Bakgrundens upprepning (repeat - repetering)

Ibland vill man ha en bakgrund i sidans topp, ibland vill man att den endast repeteras horisontell, ibland att den repeteras vertikalt, ibland vill man att den endast visas en enda gång.

background: url(/bilder/bg.jpg); - Bakgrunden repeteras både horisontellt och vertikalt

background: url(/bilder/bg.jpg) repeat-x; - Bakgrunden repeteras horisontellt.

background: #000 url(/bilder/bg.jpg) repeat-x; - Bakgrunden repeteras horisontellt och resten av bakgrunden kompletteras med svart färg (#000). Om ingen färg anges som komplettering kommer resten av bakgrunden att få vit färg (#fff).

background: url(/bilder/bg.jpg) repeat-y; - Bakgrunden repeteras vertikalt.

background: #000 url(/bilder/bg.jpg) repeat-y; - Bakgrunden repeteras vertikalt och resten av bakgrunden kompletteras med svart färg (#000). Om ingen färg anges som komplettering kommer resten av bakgrunden att få vit färg (#fff).

background: #000 url(/bilder/bg.jpg) no-repeat; - Bakgrunden visas en enda gång och repeteras inte mer än en gång.

Positionering av bakgrunden

Bakgrunden kan positioneras på olika sätt på sidan eller inom de olika avsnitten som man sedan skapar med hjälp av .class och #div id. Nedan kan jag endast ge dig vissa kombinationer som du kan prova själv. Ändra villkoren för bakgrundsbilden och bakgrundsfärgen, spara och uppdatera sidan för att se skillnaden.

background: #333 url(/bilder/bg.jpg) no-repeat left top;

background: #333 url(/bilder/bg.jpg) no-repeat center;

background: #333 url(/bilder/bg.jpg) repeat center;

background: #333 url(/bilder/bg.jpg) no-repeat bottom;

background: #333 url(/bilder/bg.jpg) no-repeat right bottom;

background: #333 url(/bilder/bg.jpg) no-repeat right top;

osv.

Tänk logiskt och tillämpa. Så enkelt är det.

BILDGALLERI MED CSS

När man skapar en bildgalleri med CSS använder man sig av ungefär samma princip som när man skapar menyer.

Följande kod kopierades från w3schools.com som även har andra bra läxor om CSS för dig som har lätt för engelska. I det här exemplet kommer css-koden att tas upp inom head taggarna men om man använder sig av externa css-mallar så gäller det helt enkelt att kopiera koden och klistra in den i sin .css sparade sida. 

<html>
<head>
<style type="text/css">
 div.img
 	      {
 margin: 2px;
 border: 1px solid #0000ff;
 height: auto;
 width: auto;
 float: left;
 text-align: center;
 } 
 div.img img
 {
 display: inline;
 margin: 3px;
 border: 1px solid #ffffff;
 }
 div.img a:hover img {border: 1px solid #0000ff;}
 div.desc
 {
 text-align: center;
 font-weight: normal;
 width: 120px;
 margin: 2px;
 }
 </style>
 </head>
 <body>
<div class="img">
   <a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" 
width="110" height="90" />
</a>
   <div class="desc">Add a description of the image here
</div>
   </div>
   <div class="img">
   <a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" 
width="110" height="90" />
</a>
   <div class="desc">Add a description of the image here
</div>
   </div>
   <div class="img">
   <a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" 
width="110" height="90" />
</a>
   <div class="desc">Add a description of the image here
</div>
   </div>
   <div class="img">
   <a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" 
width="110" height="90" /
></a>
   <div class="desc">Add a description of the image here
</div>
   </div>
</body>
 	      </html>

Resultatet kan sedan ses här. Men du kan givetvis prova själv.

Jag provar inte här ännu. Det kommer att ske vid ett senare tillfälle.

CSS Outlines

Det är ganska stiligt och fint med outlines, som innebär att en tunnare eller tjockare linje som inte tar upp plats dras runt någonting. Det tråkiga är dock att de här linjerna inte fungerar i Internet Explorer. Därför kommer de inte att tas upp här. Vill man ha en linje runtom något är det bästa att använda border i stället. Även om IE anses som lite udda av programmerare och sådana som sysslar med CSS, kan man inte hjälpa det faktum att de flesta människor använder IE.

CSS Borders eller Ramar

Borders kan ritas runt vad som helst - både text, boxar, huvudrubriker, menyer, m.m. Låt oss ta några exempel:

Följande kod... 

#textmedramochscrolliett
{
border: 1px red dashed; 
font-size: 12px; 
font-line: 20px; 
overflow-y: scroll; 
overflow-x: hide; 
height: 100px; 
width: 200px; 
background: #fff; 
color: #003300;
}

.. ger följande resultat:

Här kan man nu skriva lite text. Man ser att det finns en ram eller border som man kan styla som man vill. Det är enkelt och smidigt. Det är roligt med sådana grejer på en hemsida då de piffar upp utseendet och en vacker hemsida drar till sig besökare.

Följande kod...

.text{
font-size: 20px; 
line-height: 25px; 
border: 1px solid #333; 
padding: 10px;
}

....ger följande resultat:

Det här är exempel på text med ram runtom.

Borders kan också användas runt om hela menyer eller endast själva li eller a och kan med framgång användas för att styla menyn vid hover, då man drar med musen över antigen a eller li.

HOVER - Musen över

Egenskapen Hover, innebär att något händer med texten eller utseendet på ett avsnitt när man drar med musen över. Låt oss ta vilket exempel som helst. 

.text{
 	      font-size: 20px; 
 	      line-height: 24px; 
 	      border: 1px solid green; 
 	      padding: 10px;
         }
.text:hover{
 	      font-size: 20px; 
 	      line-height: 24px; 
 	      border: 1px solid red; 
 	      padding: 10px;
 	      background: pink;
 	      }

Resultat. Dra över texten med muspekaren.

För att se hover egenskapen drar du med muspekaren över den här texten.

Har du sett vad hemligheten är?

Om man vill ändra egenskaperna för något är det bara att lägga till :hover, t ex:

  • a:hover
  • h1:hover
  • #left:hover
  • #scroll:hover

Sedan definierar man de egenskaper som skall gälla vis muspekaren över.

TABELLER

Följande kod kopieras från W3Schools där du även kan se resultatet. 

<html>
 	      <head>
 	      <style type="text/css">
 	      table.one
 	      {
 	      table-layout: automatic
 	      }
 	      table.two
 	      {
 	      table-layout: fixed
 	      }
 	      </style>
 	      </head>
         <body>
<table class="one" border="1" width="100%">
 	      <tr>
 	      <td width="20%">1000000000000000000000000000</td>
 	      <td width="40%">10000000</td>
 	      <td width="40%">100</td>
 	      </tr>
 	      </table>
<br />

Du får prova den själv. Mer kan du dessutom läsa på http://www.w3schools.com/css/css_table.asp tills jag har hunnit skriva det själv.