Hjælpeværktøj til CSS
Flere browsere (fx Chrome og Safari) kommer med uundværlige hjælpeværktøjer til at redigere direkte i siders HTML og CSS. Chrome Dev Tools er en af disse værktøjer. På en vilkårlig side du ser i Google Chrome, aktiverer du hjælpeværktøjet ved at trykke Ctrl-Shift-I eller ved at højreklikke på et HTML element i siden og klikke på "Inspect Element".
Vi tager udgangspunkt i jeres blog. Højreklik på overskriften "Seneste Blog Indlæg" og klik på "Inspect Element".
Dev Tools viser sig nederst i vinduet. Til venstre er HTMLen og til højre er CSSen for overskriften. Ved at bevæger musen hen over CSS reglerne får du mulighed for at ændre i reglerne og slå dem til og fra.
Der eksisterer en regl for h1,h2,og h3 tags. Lad os ændre fonten, farven, og karaterbredden for denne. Bemærk: programmet prøver selv at færdiggøre CSS egenskaberne og deres værdier når du begynder at taste.
Når du er færdig med at foretage ændringer kan du enten kopiere dine ændringer ind i dit stylesheet, eller du kan gemme det direkte fra værktøjet. Dette gøres ved at klikke på style.css i reglen og herefter højreklikke og klik på 'gem som', og overskriv style.css i dit blog bibliotek.
