Inline CSS

Så här använder du inline CSS

Med inline CSS menas att du skriver CSS-deklarationerna direkt i XHTML-taggen för att skapa en formatering. Detta görs genom att du använder dig av kommandot style. När du skriver in CSS lokalt så åsidosätter du andra formateringar som exempelvis är satta i din stilmall (tas upp i ett senare kapitel) eller i din webbläsares originalinställningar.

Så här skriver du inline CSS

Låt oss börja med koden för ett helt vanligt och icke-stajlat stycke.

<p>Ett kort exempel med lokal CSS</p>

Detta skriver ut "Ett kort exempel med lokal CSS" helt utan krusiduller.

Låt säga att du vill ha en gul bakgrund och fet blå text med en 2px svart ram runt stycket, samt 2px padding enligt nedan.

Ett kort exempel med inbakad CSS

Koden för detta är:

<p style="background-color: #FFCC33; color: #0066CC; font-weight:bold; border:solid 2px; border-color: #000000; padding: 2px"> Ett kort exempel med inbakad CSS </p>

Lägg märke till att all lokal CSS läggs till i öppningstaggen. Det gäller vid all CSS formatering lokalt.

De deklarationer som har använts är:

  • Background-color: Sätter en bakgrundsfärg på elementet. [Färgkoder]
  • Color: Används vanligtvis till att färgsätta texten, men kan också färga en kantlinje om du inte sätter upp egna regler för kantlinjen.
  • Font-weight: Används för att bestämma vilken grovlek texten ska ha.
  • Border: Används för att sätta en kantlinje.
  • Border-color: Används för att färga kantlinjen.
  • Padding: Lär du dig senare och förklaras här samt med boxmodellen.

Nästa artikel: Webbsida med stilmall

Valid XHTML 1.0 Strict Valid CSS!