I den här artikeln lär du dig hur man kan använda id och class för att skilja olika delar på en webbsida från varandra. I den här texten nämns även CSS en del men det är inget som du behöver få full förståelse för ännu eftersom det tillhör en senare kurs.
Id och Class
Olika sätt att skilja områden från varandra
Id och class används till att namnge olika taggar för att på detta sätt kunna skilja dessa från varandra. Genom att tilldela ett utvalt element ett id eller en class så kan du enkelt sätta upp villkor i en separat CSS-fil som sedan kommer att styra hur innehållet i dessa områden kommer att formateras.
Så här fungerar id
Ett id används på större element, oftast till taggen <div> - som i sin tur används för att dela upp sidan i olika områden. Ett id är unikt och ett div-element med namnet "menu" får alltså inte förekomma på flera ställen på samma sida.
Vänstermenyn på den här sidan ligger i en div-tagg med namnet "navMenu". För att märka upp div element med ett id så har jag skrivit in denna HTML-kod:
<div id="menu"> Menyns innehåll </div>
Nu är det enkelt att skapa deklarationer (villkor) för detta element med CSS och innehållet kan sedan formatera innehållet precis som jag vill - ja nästan iallafall. Mer om detta i mina CSS-artiklar.
Så här fungerar class
Class använder du till formateringar som du kan tänkas vilja använda flera gånger på en webbsida. Det handlar ofta om små formateringar av texten som inte är alltför komplicerad, men som iallafall bör ligga i en separat CSS-fil för att städa upp koden så mycket som möjligt.
Den här "kommentar-formateringen" är av typen class eftersom jag vill kunna använda den flera gånger på samma sida om det skulle behövas.
Så här ser "koden" ut:
<p class="kommentar">Text</p>
Villkoren, det som bestämmer hur stycket ska se ut styrs i det här fallet av en extern stilmall i CSS. Mer om detta senare! För tillfället räcker det med att du vet hur man skiljer olika element/områden från varandra.
Sen då?
När du har skapat ditt id eller din klass så kan du skapa deklarationerna i CSS för att bestämma reglerna för utseendet. Det vill säga, om du vill gå händelserna i förväg. Bättre är att plöja igenom alla kapitel i tur och ordning.
