kaxigt.com

Välkommen till andra lektionen!

Som tidigare nämns använder vi CSS för att skapa en presentation om hur hemsidan ska se ut. Via CSS har vi därför en mångfald av alternativ till att specificera våra HTML-koder med. Vi ska nu kika lite närmare på hur css fungerar och hur strukturen (syntaxen) för css ser ut.

• Syntax
• Grupperingar och globala värden
• Class-selector
• ID-selector

Hur fungerar CSS? Vad är syntax?

I CSS så finns det en ”regelordning” om hur man ska skriva sina csskoder för att få dem att fungera. Det är just det som kallas för syntax. Syntaxen är uppdelad i tre delar. I guiden skrivs dessa med något som kallas för short hand declaration groups.

Syntaxens tre delar ser ut så här:

selector {property: value;}

På svenska:

objekt/selektor {egenskap: värde;}

Om vi börjar med att granska vad en selektor innebär så är det ett utvalt HTML-element, bland annat body, font, p, eller ett divblock man vill lägga fokus på och definiera. Som ett första exempel ska vi använda HTML-elementet body.

body {property: value;}

Nästa del är property som betyder egenskap, i vårt fall hur egenskaperna för body ska definieras. Vi ska välja bakgrundsfärgen.

body {background-color: value;}

Så här långt har vi formaterat html-elementet body. Vi har också valt egenskapen bakgrundsfärg, fast vi har inte valt värdet på egenskapen, det vill säga vilken bakgrundsfärg vi vill ha. Nu gör vi det genom att lägga in en definition i value.

body {background-color: #333333;}

Ovanstående css-kod läses in av webbläsaren så att hela bodysektionen får bakgrundsfärgen #333333 – mörkgrå. Nu vill vi även definiera styckeindelningen, vår textfärg, vilken font och storlek vi vill ha på denna samt att den skall placeras i vänsterställt läge.

Återigen använder vi samma syntax, fast vi väljer en annan selektor, flera egenskaper och värden.

p {font-family:arial; font-size:12px; text-align:left; color:#fff;}

Som ren css-syntax ser ovanstående kod ut så här:

selector {property:value; property:value; property:value; property:value;}

Vi upptäcker alltså att man inte behöver skapa en ny selector för html-elements varje egenskap. Det går utmärkt att skriva in flera egenskaper för ett och samma HTML-element så länge egenskaperna är skilda åt med ett semicolon, samt att alla egenskaper och värden som definieras omsluts med klamrar.

Grupperingar och globala värden

Låt oss säga att du vill att alla rubriker på din hemsida ska ha samma färg – ett så kallat globalt värde, då kan man gruppera alla rubriker som en enda selector med gemensamma egenskaper och värden. Kika på följande exempel och alternativ.

Här har rubrikerna från h1 till h3 fått samma textfärg.

h1, h2, h3 {color:#000;}

Dock har de varje webbläsares specifika grundvärde i övrigt eftersom vi ännu inte har angett vare sig storlek eller utseende på fonten. Nu ska vi ytterligare lägga till några egenskaper. Fast vi vill inte ha globala värden för alla selektorer utan på en del och sedan fokusera på var och en av rubrikerna.

Det kan då se ut som följande:

h1, h2, h3 {color:#000; line-height:150%; text-align:left;}
Detta är ett globalt värde. Rubrikerna h1-h3 har samma egenskaper och värden.

h1, h2 {font-family:Times;}
Globalt värde för endast h1 och h2

h1 {font-size:24px;}

h2 {font-size:20px;}

h3 {font-family:arial; font-size:16px;}

Egenskaperna för varje element, om man däremot skulle ha skrivit ut alla dessa per rubrik, hade sett ut så här:

h1 {font-family:Times; line-height:150%; text-align:left;font-size:24px;}
h2 {font-family:Times; line-height:150%; text-align:left;font-size:20px;}
h3 {font-family:arial; line-height:150%; text-align:left;font-size:16px;}

När man ger ett HTML-element ett globalt värde som egenskap behöver man alltså inte upprepa detta. Ett tips är därför att fundera på vilka egenskaper varje HTML-element kan tänkas dela och ha som gemensamt globalt värde.

Kika på följande exempel:

h1, h2, h3, h4, h5, p, blockquote {text-align:left; line-height:150%;}

Här har vi angett att alla rubriker, alla paragrafer (stycken) samt blockcitat ska stå i vänsterställt läge och ha ett ”avstånd”, line-height, mellan varje rad som är 1 1/2 gånger högre än vad texten är. Hur högt detta avstånd blir har sedan att göra med hur stor fontstorlek vi ger dessa element.

Class selector

Ibland så kanske man vill definiera och styla vissa utvalda delar av ett visst element, då används något som kallas för Class Selector. Med en class selector kan man få samma HTML-element att se olika ut beroende på hur du vill presentera det.

En vanlig egenskap (property) som man formaterar med css är just om text eller bilder ska vara högerställda, vänsterställda, eller placerade i mitten. Vi ska granska följande fyra exempel:

p.right {text-align:right;}
p.left {text-align:left;}

img.alignright {float:right;}
img.alignleft {float:left;}

I de två första exemplen handlar det specifikt om paragrafer, det vill säga stycken, och att texten i dessa ska vara vänster respektive högerställda. Vi ser det i selectorerna p.right och p.left. HTML-koden för dem:

<p class="left">Vänsterställt stycke</p>

<p class="right">Högerställt stycke</p>

Globalt eller avgränsat?
Även om nedanstående två koder ger samma resultat så finns det faktiskt en viss skillnad mellan dem. I den nedre koden har nämligen alla stycken som omsluts med p-taggen ett globalt värde medan den övre html-koden används om man med class-attributet endast vill förändra en avgränsad del av innehållet.

Kika på skillnaden.

p.left {text-align:left;}
<p class="left">Vänsterställt stycke med class-attribut</p>
p {text-align:left;}
Här kommer den globalt formaterade texten utan class-attributet

Jag vill också här påpeka att den text som inte skrivs in som paragrafer kommer inte heller att formateras utan ställas i webbläsarens defaultläge, dvs i vänsterställd läge. HTML-koden för ett class-attribut ser ut så här:

class=" "

Beträffande bilderna så handlar det om samma regler. Den utvalda selektorn är här en bild – img.

img.alignright {float:right;}
img.alignleft {float:left;}

HTMLkoden för dem är:

<img class="alignleft" src="bilden.jpg" alt="" />
<img class="alignright" src="bilden.jpg" alt="" />

Man kan också använda sig av olika class-attribut utan att för den skull behöva koppla dessa till specifika HTMLelement (selektorer). De blir då allmänna class-attribut och du kan använda dem på de HTML-element som du vill ska definieras.

Låt oss kika på några exempel:

.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
.alignleft {float:left;}
.alignright {float:right;}

Väljer du att ange värdet right eller left måste du vara observant på om det inte redan finns en selektor med samma namn och värde fast med olika egenskaper. Titta på följande koder.

.left {float:left;} respektive .left {text-align:left;} är samma selector med samma värde (value) – left. Men egenskapen (property) skiljer sig eftersom den ena egenskapen är text-align medan den andra egenskapen är float.

Det innebär att om du inte ändrar namn på den ena selektoren så kan det i förlängningen bli ett problem i presentationen av dina HTMLelement, framförallt om du vill att ett element ska vara vänsterställt och inte ha värdet float.

En god idé är att namnge alla flytande element till exempelvis alignright respektive alignleft för att skilja dem åt från de element som har egenskapen text-align:left respektive text-align:right.

ID selector

Innan vi avslutar lektion 2 ska vi kika lite på vad som menas med en ID selector. Ett ID är ett unikt namn som bara får förekomma en gång per sida. Exempel på en ID selector är denna:

h1#logo {text-align:center; font-family:Times; font-size:24px; font-weight:bold; color:#999;}

Vi har en rubrik h1, och just denna rubrik vill vi använda som logo. En ID selector börjar alltid med teckenenheten #. ID selectorn är således #logo – inte h1. Vi har bara kopplat denna till rubriken.

Märk väl att de divblock som man ofta använder för att bygga en hemsidas struktur med är en ID selector så länge dessa börjar med teckenenheten #.

Vi har bland annat #header, #container, #footer och så vidare. Varje block kan i sin tur kopplas till specifika HTML-element likt exemplet h1#logo.

#header p {text-align:left; font-family:verdana; font-size:11px; color:#666;}

Ovanstående egenskaper formaterar bara paragraferna i #header. Eftersom vi specifikt kopplar dessa egenskaper till ID selektorn #header så prioriteras dessa värden före de globala värden som anges i selektorn p

p {text-align:left; font-family:arial; font-size:12px; color:#333;}

Texten i styckena som finns i #header kan alltså att se annorlunda ut jämfört med de övriga styckena på hemsidan.

Tips! Ha för vana att aldrig börja ett ID:s namn med en siffra eftersom det inte fungerar i Mozilla Firefox.

Visste du att du kan använda flera classer i samma HTML-kod? Låt oss säga att du vill ändra en av dina paragrafer till att ha en högerställd text som är kursiv, då är html-koden denna:

<p class="right italic">Hej och hå</p>

Och css-syntaxen för dessa två classer:

.right {text-align:right;}

.italic {font-style:italic;}

Ovanstående två classer är alltså inte kopplade till några specifika HTML-element utan man kan med fördel använda dem tillsammans eller en i taget på andra HTMLelement om man vill.

I lektion tre går vi igenom hur man kan formatera och lägga till olika stilar på en text.

Välkommen dit!