Gör egna stilmallskoder

Hej hörrni! Idag blir det ett skriftligt tips som senare kan komma att kompletteras med video om så önskas. Detta tips handlar om hur du gör egna stilmallskoder som du sedan kan styra din kodmall med.

Det finns två typer av css-koder; de som är återkommande, och de som bara finns med en gång. Exempel för det som bara finns med en gång: content (alltså inläggen, den vanligtvis vita bakgrunden bakom inläggen, alltså det vita som finns bakom denna text), det finns bara en gång. Det finns inte två content. Det som bara finns med en gång har en hashtag (#) framför sig i stilmallen och styrs utav div id-taggar i kodmallen. Exempel på återkommande: länkar de finns inte bara med en gång, utan dessa kan ju finnas på flera ställen; i menyn, i inläggen, i headern, i kommentarerna - de är återkommande. Det som finns med flera gånger har en punkt (.) framför sig i stilmallen och styrs utav div class-taggar i kodmallen.

När du sedan ska styra en text eller något annat med en css-kod i kodmallen så kan du göra många olika koder, men för de återkommande gäller class och för de som bara finns med en gång gäller id. Vanligtvis använder vi oss utav div, men man kan också lägga in section id eller liknande. Det pratar jag om i detta tips.

Tillbaka till CSS - om det är en kod som ska vara återkommande så ska den se ut som följande:
.exempel {
color: #000000;
font-family: georgia, arial, tahoma;
font-size: 10px; }

Vad säger denna kod? (i kronologisk ordning)
Jo, den säger till kodmallen att allt som styrs av denna kod ska vara svart text, ha typsnittet georgia (om georgia inte är kompatibelt på läsarens dator, så blir det arial istället, funkar inte det blir det tahoma) och vara i storleken 10px. Det finns massor av fler saker man kan styra via, men jag kan inte ta upp alla, som ni säkert förstår. Det som gör att detta är en återkommande kod är punkten innan ordet exempel i första raden.

Om det är en kod som bara finns en gång i kodmallen så ska den se ut som följande:
#exempel {
background: #ffffff;
width: 200px;
height: 700px;
}

Vad säger denna kod? (i kronologisk ordning)
Denna kod säger att det som ska styras av koden ska ha en bakgrund som är vit, vara 200px bred, 700px hög. Det finns massor av fler saker man kan styra via, men jag kan inte ta upp alla, som ni säkert förstår. Det som gör att detta är en kod som bara ska finnas en gång är hashtagen/fyrkanten innan ordet exempel i första raden.

Du kan alltså lägga till sådana här stycken i din stilmall när du vill och döpa dem till vad du vill. Ett exempel på vad jag har för "lösa koder" är till exempel hur jag styr min profiltext (under profilbilden här till vänster). och denna kod ser ut såhär:

.profiltext {
border-right: 6px solid #fff;
font-family: tahoma;
font-size: 9px;
text-align:center;
font-weight: normal;
color: #c0c0c0;
padding: 0px 8px 0px 8px;
margin: 0px 0px 0px 0px;
border-bottom: 0px dotted #e4dede;
margin-top: -20px;
}

Bakgrunder

Sanna tipsar:
Letar du efter något speciellt? Försök tänka ut nyckelord på det du letar efter. Om du till exempel letar efter hur man bakgrund med övergång från en färg till en annan så kan nyckelord vara "övergång". Tryck på F-tangenten och Control-tangenten (för PC) eller Command-tangenten (för MAC), då dyker en ruta upp, antingen längst ner på webbläsaren, eller högst upp i fönstret (höger eller vänster), där du kan söka på ditt nyckelord. Då blir det garanterat lättare för dig att hitta det du söker efter! Lycka till!


» Bakgrund med mönster på ena sidan och färg på andra
» Bakgrund med övergång från en färg till en annan
» Levande, enfärgad bakgrund