3. Mera layout (Extern CSS mm.)

  • CSS i ett <style>-element (Embedded CSS)
  • CSS i en skilld fil (External CSS)
  • Hur man specificerar HTML-element: id- och class- attributen
  • Användning av <div>-element för layout

Som tidigare nämndes finns det tre sätt att använda CSS. Det första har vi redan sett, d.v.s. CSS i style-attribut inne i HTML-taggarna. Nu följer de två andra.

CSS i ett <style>-element (Embedded CSS)

Här flyttas CSS-koden till ett skillt <style>-element, som vanligen är i <head>-delen av dokumentet. Vi belyser med ett exempel:

Före flytten:

<html>
    <head>
    </head>
    
    <body>
        <h1 style="color: green;">Rubrik</h1>
        <p style="font-size:14pt;">Detta är ett stycke.
        Det har lite större storlek än standard-stycken.</p>
    </body>
</html>

Efter att vi flyttat all CSS till <style>-elementet:

<html>
    <head>
        <style>
        h1 {
            color: green;
        }
        p {
            font-size: 14pt;
        }
        </style>
    </head>
    
    <body>
        <h1>Rubrik</h1>
        <p>Detta är ett stycke.
        Det har lite större storlek än standard-stycken.</p>
    </body>
</html>

Pröva de två olika exemplen och se om de leder till samma resultat.

Som du märker ser koden för CSS lite annorlunda ut då den är i ett <style>-element:

h1 {
    color: green;
}

h1 kallas för ”selector”, och bestämmer alltså vilket/vilka element det handlar om. All css som berör elementet placeras innanför {}, och det är viktigt att använda : och ; på rätt sätt:

egenskap: värde ;

CSS i en skilld fil (External CSS)

Det tredje sättet att använda CSS går ut på att man gör en skilld fil som innehåller all CSS, och som man länkar till från HTML-filens <head>-section med hjälp av:

<link rel=stylesheet href="style.css" type="text/css">

href="style.css" är alltså själva länken till CSS-filen. I det här fallet finns en fil style.css i samma map som HTML-filen.

Om vi vill åstadkomma samma stil som i exemplet ovan (grön rubrik, större stycken) blir filerna:

index.html:

<html>
    <head>
        <link rel=stylesheet href="style.css" type="text/css">
    </head>
    
    <body>
        <h1>Rubrik</h1>
        <p>Detta är ett stycke.
        Det har lite större storlek än standard-stycken.</p>
    </body>
</html>

style.css:

h1 {
    color: green;
}
p {
    font-size: 14pt;
}

Pröva exemplet ovan och se du får samma resultat som tidigare.

Hur man specificerar HTML-element: id- och class- attributen

Då vi använder de två nya metoderna för CSS-uppstår ett problem: Nämligen hur man ska specificera bara vissa element. T.ex.

p {
    font-size: 16pt;
}

koden gör ALLA <p>-element till storlek 16!
Men vi kanske bara vill göra vissa stycken större.

Lösningen är att använda id eller class. Vi börjar med id.

Vi ger elementet vi vill modifiera ett id-attribut.

<p id="larger">Det här är ett stycke som ska vara
lite större än vanliga stycken.</p>

Du kan själv välja namnen på dina id:n. ”larger” är bara ett exempel.

Sedan modifierar vi vår CSS:

p#larger {
    font-size: 16pt;
}

vi har bytt ut selektorn p med p#larger. Det betyder att all CSS-kod inom { } bara gäller <p>-elementet med id larger!

Pröva exemplet. Hur gör du för att få bara en grön rubrik med extern CSS?

Vi kan åstadkomma samma sak med ett class-attribut:

<p class="larger">Det här är ett stycke som ska vara
lite större än vanliga stycken.</p>

CSS-koden blir då:

p.larger {
    font-size: 14pt;
}

D.v.s. för att specificera en class använder vi . istället för # i selektorn.

Vad är då skillnaden på id och class?

id: används då det bara finns ett element, med unikt id.
class: används då det finns flera element som har samma class.

Gör en extern CSS-fil till de sidor du arbetade med under del 2 av kursen. Lyckas du uppnå samma resultat?

Användning av <div>-element för layout

I modern webdesign används huvudsakligen <div>-element för positionering av element.
Om du undersöker källkoden för nästan vilken websida som helst kommer du att hitta en mängd <div>-element.

<div>-elementet är som en slags låda (box), som kan innehålla andra element, inklusive andra <div>ar.

För att positionera <div>-element kan man specificera t.ex. width, height, position (left, right, top, bottom), margin och padding.

Därtill kan man ändra utseendet med background och border etc.

Du kan arbeta vidare med <div>-element här.
html.net CSS-tutorial är ett utmärkt referensverk för de viktigaste CCS attributen.
Lektion 8 framåt handlar om layout och användning av <div>-element.
This entry was posted in Tutorial. Bookmark the permalink.

Comments are closed.