NemProgrammering.dk logo
nordicway webhotel

Sådan anvender du CSS | 3 metoder

CSS kursus | Lær CSS for begyndere
WordPress hjemmeside hjælp

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

I denne video skal vi se på tre forskellige måder, hvorpå du kan anvende CSS på din hjemmeside. Vi skal kigge på følgende 3 muligheder:

1 - Inline styling
2 – Styling via eksternt style sheet
3 – Styling via internt style sheet

Der er fordele og ulemper ved dem all tre, og det vil også vi forklare meget mere om i denne video.

Øvelser:
1 - Gør som vist i videoen. Herefter, så prøv at style alle tre overskrifter via det eksterne style sheet.
2 - Opret et nyt stylesheet. Link dette til din side. Du har nu to style sheets. Lav et paragraf-tag, hvori du skriver "Dette skal være rødt". Style dette tag med "p { color: red;}" via det nye style sheet. Virker det? Er din paragraf skrevet med rødt?

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, inline styling, ekstern style sheet og intern style sheet

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
  <title>Lektion 2</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Lektion2.css">
  <style>
    h3 {
      font-size: 70px;
    }
  </style>
</head>
<body>
  <h1 style="font-size:50px;">Inline</h1>
  <h2 style="font-size:12px;">Ekstern</h2>
  <h3>Intern</h3>
</body>
</html>

Her har du kildekoden

h2 {
  font-size: 60px;
}

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Gitte    05-02-2020

Hej Jeg har leget med jeres gratis html-kursus og CSS. Men jeg kan simpelthen ikke få lov at bestemme hvor på min html-side de forskellige tekststykker havner. Jeg har tidligere leget med stylesheets, hvor jeg kunne definere på px, hvor ting blev placeret, men jeg kan simpelthen ikke huske det og jeg kan ikke gennemskue det i jeres kursus heller... help? Mit CSS (eksternt) ser sådan ud og jeg er total begynder... body{ background-image: url(bggd3.jpg); background-repeat: no-repeat; } h1 { font-size: 50px; color: black; font-family: sans-serif; float: top; /*Dette er Stylingen af overskriften på siderne*/ } h2 { font-size: 20px; color: black; float:left; /*Dette er Stylingen af brødteksten på siderne*/ } h3 { font-size: 18px; color: red; float:right; /*Dette er Stylingen af overskrift 2 på siderne*/ }

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    28-09-2016

Hej Silas, Ja det burde bestemt være muligt. du kan jo prøve at lave en ny mappe kalde den HTML og kopiere alle dine projekter indunder her. Hvis det ikke virker kan du altid slette det igen, da du jo stadig har projekterne liggende et andet sted. Så rådet er bare at prøve, men husk at kopiere og ikke slet, så du altid har dine gamle projekter liggende der, hvor de lå før. Mvh.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Silas    24-09-2016

Hej Nemprogrammering Jeg er gået i gang med jeres HTML-kursus og er nu kommet til en video, der kræver, at man kan CSS. Da jeg bruger netbeans til begge serier, vil jeg helst ikke blande mine HTML-projekter med mine CSS-projekter. Jeg har allerede 6 HTML-projekter og tænkte på, om det var muligt at samle disse i én stor overmappe med navnet "HTML". Håber på svar så snart som mulig så jeg kan komme videre med jeres fantastiske videoer! Mvh.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Stephanie     18-11-2015

Hej :) Når jeg skal lave en lektion 2-mappe, trykker jeg på "site root" og tilføjer en folder, men så kommer problemet - Så kommer der denne frem: No source folders in project; perhaps it has been deleted? Men jeg synes ikke jeg har slettet noget? Ellers ved jeg ikke, hvordan jeg laver en nummer 2 mappe? :)

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    18-03-2015

Hej HP, Prøv at lægge mærke til den url der er i browseren når jeg viser filen. Der er ikke noget localhost i. Det er der i din. Det vrker til at du trykker "run" når du vil se din fil. Gør istedet det at du finder filen i din mappe og træk den derefter over i din browser. Hjælper det? Mvh. Thomas

kommentar på NemProgrammering.dk - lav din egen hjemmeside
HP Jensen    17-03-2015

Har stor fornøjelse af jeres videoer, har et problem, min styling laver i css går ikke ind og ændrer noget når jeg prøver at browse ændringerne, jeg får fejlkode... har prøvet at kopiere jeres opsætninger, men det hjælper heller ikke, får samme fejlkode,(har prøvet at google en løsning - forgæves) først får du lige fejlkoden: Failed to load resource: net::ERR_EMPTY_RESPONSE (09:59:05:475 | error, network) at http://localhost:8383/begynderCSS/css/css også det jeg har skrevet i html: <html> <head> <title>Lektion 3</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/css"> </head> <body> <h1 style="font-size: 50px;">1 - Inline</h1> <h2>2 - Ekstern style sheet</h2> <h3>3 - Internt style sheet</h3> </body> </html>