Ett mer flexibelt sätt att arbeta med CSS kan uppnås med ett par nya HTML-taggar, och två nya HTML-attribut. Taggarna heter <div> och <span>, attributen heter class och id.

<div>och span är taggar som egentligen inte gör något ensamma i sig själva, men som kan användas för att haka på attribut, vilka sedan kan påverka vad som än befinner sig mellan <div> och </div> eller mellan <span> och </span>. De absolut vanligaste attributen till <div> och <span> är id och class.

<div> (division=delning) och <span> skiljer båda ut delar av din HTML-kod så att den kan få särskilda egenskaper, men medan <div> bryter texten, så låter <span> texten prydligt flöda vidare. Man säger att <div> är en tagg på blocknivå (block-level), medan <span> är ett inline-element.

Det går alldeles utmärkt att placera en <div> i en annan <div>, en <span> i en <span>, eller en <span> i en <div>

<div> Hela den här texten är en del av samma div, <span>men bara den här delen ingår i en span</span> vilket inte detta gör </div>

<div> lägger alltså till en styckebrytning, vilket inte <span> gör. Vill du alltså lägga in någon av de två inuti ett stycke som inte skall brytas, skall du använda <span>, snarare än <div>.

Vi kommer ofta stöta på begreppen inline och block level, blocknivå, när vi talar om olika HTML-element (taggar).

Alla HTML-element som kan visas på en webbsida har någon av dessa grundläggande egenskaper, med vissa variationer.

Om vi börjar med block level-, eller blocknivå-element så är detta taggar som ger ett nytt stycke.

Ett blocknivåelement kan användas till att göra en egen ruta eller block, med hjälp av CSS. <div> är block level, liksom <p>, eller <h1>.

Ett inlineelement, däremot bryter inte stycket (eller ens raden), och kommer alltså bete sig annorlunda när man använder det med CSS.

Man kan med CSS dessutom ändra på blocknivåelement, så att de visas som inline eller tvärt om, göra om ett inline-element till block. Detta utnyttjas till exempel när man vill byga en liggande meny av en lista.

Listpunkter (<li>) visas normalt som egna block, men genom att skriva CSS som säger att display: inline; kommer de att visas utan radbrytningar, efter varandra på samma rad tills raden tar slut.

Uppgift: Använd css med <div> och <class>

1. Gör en ny mapp på servern
2. Döp den mappen till css_uppgift_1
3. Skapa i den nya mappen ett nytt html-dokument som heter index.html
4. Skapa i den nya mappen ett nytt css-dokument som heter stilmall.css
5. Skapa i HTML-dokumentet tre <div>-ar
6. Ge <div>-arna var sitt id
7. Den första <div>-en ska vara 100% bred och ha ljusgul bakgrund
8. Den andra ska vara 800px bred och ha ljusgrön bakgrund
9. Den tredje ska vara 100% bred och ha rosa bakgrund
10. I den första ska det finnas en <h1>-rubrik (valfri text)
11. I den andra ska det finnas flera <p> med en <h2> överst. Du kan använda markeringstext härifrån om du vill
12. I texten ovan ska du markera tre ord genom att lägga dem i var sin <span> med klassnamnet markerat. Dessa ska markeras med gul bakgrund
13. I den sista <div>-en lägger du in en <p> med texten "Det här är den sista diven"
14. Alla divar ska ha margin:20px och en 2 pixlars kantlinje
15. Själva sidan ska ha ljusblå bakgrund och en bakgrundsbild du väljer själv
16. Skapa på din indexsida/landing page en länk till css_uppgift_1 så att den blir lätt att hitta

Alla CSS-egenskaper du kan styra som inte finns i materialet på webbem.se kan du hitta i listan här