CSS 3 - Klasser

Gruppera element

Det är ofta som du vill gruppera element på din sida. Exempelvis har jag grupperat länkarna på toppen av sidan tillsammans. Sammanfattningen i början/till vänster är en grupp. Länkarna i sammanfattningen är en grupp. Mina olika stycken i texten är också grupperade. Där syns gruppering på bakgrunden. Vi kan till exempel tydligt se att övningarna i botten är en grupp.

Det finns ett par olika sätt att gruppera med HTML:

<div>: Ett allmänt grupperingsblock som tidigare var det enda som fanns tillgängligt. Används när ingetav de andra blocken passar.
<article>: Innehåller information som hade kunnat stå sig utan resterande innehåll på sidan.
<section>: Grupperar info som är en delmängd av sidan. Exempelvis från rubriken: "Gruppera element" till "Ett exempel"
<nav>: Grupperar länkar för att navigera, exempelvis dem i toppen på den här sidan.
<aside>: Grupperar innehåll som inte riktigt är nödvändigt för innehållet. Exempelvis sammanfattningen på den här sidan.
<header>: Samlar informationen i toppen på sidan. Där sitter tillexempel sidans namn och länkarna till de andra sidorna.
<footer>: Botten på sidan. Här brukar kontaktuppgifter och sånt ligga.

Ett exempel

Du kan ta den här sidan som exempel. Den bygger på en tydlig semantisk uppdelning av innehållet.

body

header

section

aside

nav

section

main

article

section

article

section

I bilden ovan kan du se hur de olika elementen ligger inuti varandra. Och det ser ungefär likadant ut när du kodar hemsidan.

<body>

    <header>	

		<!-- Här kan du ha sidans banner -->

		<section>

        	<a href="index.html">Webbutveckling</a>

		</section>

        <nav>

            <!-- Här ligger länkarna -->

        </nav>

    </header>

    <aside>

        <!-- Detta är sidokolumnen -->

        <nav>

            <!-- Här har jag navigering på sidan -->

		</nav>

		<section>

			<!-- Här brukar jag sammanfatta sidan -->

		</section>

    </aside>

	<main> <!-- Huvudinnehållet -->

		<article>

			<!-- Nu börjar sidan -->

			<section>

				<h2>Gruppera element</h2>

			</section>

			<section>

				<h3>Ett exempel</h3>

			</section>

		</article>

		<article>

			<section>

				<h2>Övningar</h2>

			</section>

		</article>

	</main> <!-- Huvudinnehållet slutar -->

	<footer>

		<!-- Här har vi infon i botten -->

	</footer>

</body>

Koden blir lite som om du hade flyttat i bilden tidigare så att allt hamnade under varandra.

ID och klasser

För att göra skillnad på olika element du använder så kan du tilldela dem ett ID eller en klass. Båda fungerar ungefär likadant tillsammans med CSS men ett ID fungerar bara på ett element medan en klass gör att du kan ändra egenskaper på flera element samtidigt.

ID

Vi har pratat om ID tidigare när vi gjorde länkar som flyttade oss på samma sida. Då gav vi ett element på sidan ett ID så här och nådde det så här:

<p id="coolatexten">Text</p>

<a href="#coolaetxten">Länk till rubrik</a>

Om vi vill ändra på bara just den rubrikens CSS-egenskaper så skriver vi så här i vår CSS-kod:

#coolatexten{
	background-color: green;
}

Vi gör alltså på samma sätt som i HTML-koden, vi markerar det med en #.

Text

Klasser

När vi vill tilldela ett element en klass i vår HTML-kod skriver vi så här:

<p class="minklass">Text</p>

I vår CSS-kod kan vi nu justera vad som ska hända med den klassen så här:

.minklass{
	letter-spacing: 1em;
}

Text

Övningar

Utgå från filen Dijkstras.html.

Styckena har inga <p>-taggar. Fixa det
Varje rubrik ska vara starten på en <section>, lägg till det
I algoritm-stycket så finns en numrerad lista. Gör den snygg.
Överst på sidan finns två länkar. De ska ligga i en <nav>
Alla <section> ska ligga i en och samma <article>
Kodexemplena borde ligga i elementet <code>
Använd CSS för att göra sidan snygg.