Artikel med header och footer
Vi skall nu skapa en artikel som vi lägger inuti main-elementet.
Det kan se ut så här när vi är klara.
Låt se hur vi jobbar oss fram mot slutresultatet.
Stylen som sker i denna del tänker jag placera i filen article.css och i figure.css som båda importeras in i style.css.
Elementet article
För att göra det lite roligare så tänker jag fylla ut innehållet med mer text. Följande är den html-kod som jag tänker använda och det är en kort presentation av mig själv.
HTML-kod för en artikel om mig.
<div class="wrap"> <main class="main"> <article class="article"> <header> <h1>Om Mig Själv</h1> <p class="author">Skriven av Mikael Roos, uppdaterad <time datetime="2025-05-19">2025-05-19</time>.</p> </header>
<p>Så, en presentation är en bra början. Skriv några ord om dig själv. Jag börjar.</p>
<figure class="figure right"> <img src="img/me.png" width="300" alt="Bild på mig"> <figcaption>Mikael Roos pratar gärna med ankan.</figcaption> </figure>
<p>Mitt namn är Mikael Roos. Född och uppvuxen i Bankeryd, Småland, strax utanför Jönköping, i ett villaområde som byggdes upp samtidigt som vi flyttade in där. Jag gillade landhockey och har spelat bandy och hockey samt gått bowlinggymnasiet i Nässjö. Jag har varit städare, diskare, kallskänka, servitör och kock. På ett bananskal landade jag i Ronneby när jag började högskolan 1990, när jag slutade fann jag min fru, barn och så vidare.</p>
<p>Programmering har alltid intresserat mig sedan 13-årsåldern och min första dator var en Spectravideo 328 med bandspelare. Numer är jag en allätare och använder både Windows, Linux och Mac.</p>
<p>Om jag skall nämna någon hobby, förutom webbprogrammering, så får det bli att bära sten på sommarstugetomten, och det finns sten så det räcker och blir över.</p>
<p>Till och från får jag för mig att börja på lite hobbies, ett år satsade jag på pokerspel, ett annat år var det geocaching och sedan turfing. De senaste hobbyarna är jakt, skogsbruk och lantbruk tillsammans med intelligenta hem samt att förstå grunderna för hur aktiemarknaden fungerar. Det finns så mycket skojiga saker att lära sig!</p>
<p>Vi syns och hörs!</p>
<footer class="byline">
<figure class="figure left"> <img src="https://mikaelroos.se/img/mos-tjaro.webp" alt="Bild på mig" width="100px"> <figcaption>Mikael Roos</figcaption> </figure>
<p><strong>Mikael Roos</strong> undervisar och skriver om programmering, databaser och webbprogrammering samt utmaningen med att undervisa på distans och campus. Mikael driver eget företag inom programmering och på kvällarna jobbar han med sina hobbyprojekt.</p>
</footer>
</article> </main> </div>Jag har valt att inte använda en aside i detta exemplet, så det html-elementet är borttaget.
Så här ser min sida ut, innan jag börjar styla.
Elementet <article> är ett semantiskt HTML-element som används för att definiera självständigt, fristående innehåll. Innehållet i ett artikel ska kunna stå för sig självt och vara meningsfullt även utanför sitt sammanhang, till exempel om det publiceras på en annan sida. En artikel kan ha både en header och en footer.
Style till artikeln och dess header
Man vill ha en trevlig style till en artikel som gör den både attraktiv och lättläst. Låt oss börja med att ge style till själva artikeln samt till dess header.
Vi börjar med stilen till själva artikel-elementet.
/** * General styles for the article. */.article { background-color: #fdfdfd; /* Light background for better readability */ border: 1px solid #ddd; /* Subtle border to separate it from other content */ border-radius: 8px; /* Rounded corners for a modern look */ padding: 1.5rem; /* Space around the content */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for a floating effect */}Nu kan vi lägga till stil för artikelns header.
/** * Styling the header section. */.article header { border-bottom: 2px solid #ccc; /* Divider line for better visual structure */ padding-bottom: 0.5rem; /* Space between the header and the content below */ margin-bottom: 1rem; /* Space below the header */}
/** * Styling the article title. */.article h1 { font-size: 1.8rem; /* Larger font size for the title */ color: #333; /* Darker color for contrast */ margin: 0; /* Removes default margin */}
/** * Styling the author information. */.article .author { font-size: 0.9rem; /* Smaller font size for secondary information */ color: #555; /* Gray color for subtlety */ margin-top: 0.5rem; /* Space above the author line */}Om vi lägger till ovan style så kan sidan se ut så här.
Stil inuti artikeln
Inuti artikeln kan man styla texten för att göra den läsbar och tilltalande. Här är en variant för att ge mer “luft” i sidan, även kallat “white space”, genom att öka mellanrummet mellan raderna.
/** * Styling the paragraphs. */.article p { line-height: 1.6; /* Improved readability with increased line spacing */ margin-bottom: 1rem; /* Space between paragraphs */}Om vi tittar noggrant så ser vi att avståndet mellan raderna har ökat vilket kan ge en effekt av att texten blir lättare att läsa.
Stil för elementet figure
När det gäller bilden och bildtexten så kräver den extra uppmärksamhet för styling. Jag tänker placera den i en egen stylesheet figure.css för att det skall bli enklare att underhålla den.
Så här kan stylen för en figure se ut, där man stylar bild och bildtext samt möjliggör att man kan låta bilden flyta till höger (eller vänster) i förhållande till texten.
/** * Styling the figure element. */.figure { margin: 1rem; /* Space around the figure */}
.figure img { max-width: 100%; /* Ensures images are responsive */ display: block; /* Removes inline spacing below the image */}
.figure figcaption { font-size: 0.9rem; /* Smaller font for captions */ color: #777; /* Lighter gray for less emphasis */ text-align: center; /* Centers the caption below the image */ margin-top: 0.5rem; /* Space above the caption */}
.figure.right { float: right; /* Aligns the figure to the right side of its container, allowing text to wrap around it */ margin-right: 0; /* Remove space to the right of the figure */}Nu har bilden fått viss style och den flyter till höger i förhållande till texten.
Nu har vi bara footern kvar.
Stil för en byline till artikeln i footern
Den footer som finns till artikeln innehåller en “byline” som ger information om artikelns författare. Låt oss styla den så den framträder tydligare.
/** * Styling the footer section. */.article .byline { border-top: 2px solid #ccc; /* Divider line for separation */ padding-top: 1rem; /* Space above the footer content */ margin-top: 1rem; /* Space below the footer content */ display: flex; /* Flexbox for layout */ align-items: center; /* Aligns content vertically */ gap: 1rem; /* Space between the image and text */}
/* Styling the image in the footer */.article .byline img { border-radius: 50%; /* Circular image */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow for a polished look */}
/* Styling the footer text */.article .byline p { margin: 0; /* Removes default margin */ font-size: 1rem; /* Slightly larger font for clarity */ color: #444; /* Neutral dark text */}Till slut så har vi stylat hela artikeln och nu även en byline.
Då har vi jobbat igenom hela stylen till en artikel och dess olika delar.