NemProgrammering.dk logo
NemProgrammering.dk Trustpilot

Sådan anvender du CSS | 3 metoder

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops . Læs mere om vores ydelser her!

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

<!-- HTML filen: -->        
        
<!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="css.css">
        <link rel="stylesheet" type="text/css" href="css.css2">
        <style>
            h3 {
                font-size: 70px;
            }
        </style>
    </head>
    <body>
        <h1 style="font-size: 50px;">1 - Inline</h1>
        <h2 style="color:#FF0000;">2 - Eksternt style sheet</h2>
        <h3>3 - Internt style sheet</h3>
    </body>
</html>
        

Her har du kildekoden

/* CSS filen */

h2 {
    font-size: 60px;
}         
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

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

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

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    2016-09-24

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     2015-11-18

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    2015-03-18

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    2015-03-17

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>


Forum stats

  • 1145 Antal brugere
  • 1610 Antal emner
  • 8067 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside

Nyheder

  • Lær, hvordan du kommer til tops i Google og får flere kunder med vores nye SEO kursus for begyndere. Læs mere her!
  • Du kan nu lære avanceret WordPress her på siden. Lær at tilpasse dit tema samt udvikle dit eget plugin! Lœs mere...
  • Nu kan du også lære at bruge Photoshop fra bunden! Se med her: Photoshop kursus
  • Du kan ikke drive et velfungerende udviklingsmiljø uden hurtigt bredbånd. Se vores artikel om Billig Bredbånd
  • Vil du blive bedre til Google Sheets? Så kan du med fordel se vores nye Google Sheets kursus!