Övning - CSS selectors

Många ändringar på en webbsida går att göra genom att bara ändra CSS. Inte HTML. HTML kan oftast vara skapad från något verktyg automatiskt som tex WordPress. I de fallen är det mycket enklare att bara ändra på CSS.

För att klara att göra ändringarna då behöven du behärska CSS selectors.

Gör följande övningar

  1. Högerklicka på denna sidan och välj Visa källa
  2. Du ser då HTML-koden för denna sidan. Markera all HTML och kopiera.
  3. Öppna Brackets och klistra in HTMLen i ett nytt dokument som du sparar som css-selector-ovning.html
  4. Skapa ett nytt dokument i Brackets som du sparar som din-style.css. I samma mapp som HTML-filen.
  5. Uppgiften är nu att göra alla ändringar genom att endast ändra CSS:en i din-style.css. Du får inte göra ändringar i HTML-filen.

Lycka till och ha så kul :)

Byt färg denna texten.

Byt färg på alla länkar (från standard blå) till lime.
Gör så att bakgrundsfärgen på länken blir rosa när man håller musen över länken.

Länk 1

Gör så att dessa 3 textrader blir med stora bokstäver.
Gör så att alla grå rutor får grön border-color.
Byt till olika typsnitt för alla uppgiftsbeskrivningar.

Gör textfärgen på "Ettan" röd och "Femman" grön

Ändra bakgrundsfärgen på XXX utan att ändra på något annat
Ändra sedan typsnittet på YYY utan att ändra något annat

XXX

YYY

Gör så att rutan Vänster är 35% och vänsterjusterad och rutan Höger är 35% och högerjusterad
Gör sidhuvud och sidfot 100% breda och över respektive under höger och vänster-rutorna

Sidhuvud
Vänster
Höger
Sidfot