Välkommen till lektion sju i din HTML-kurs! Hittills har vi fokuserat på att bygga grunden av webbsidor med HTML, men kanske har du märkt att sidorna vi skapat har varit lite tråkiga. Text, rubriker, tabeller och bilder är alla viktiga, men hur får vi våra sidor att verkligen se fantastiska ut? Svaret är CSS (Cascading Style Sheets). I denna lektion ska vi introducera dig till CSS och hur du kan använda det för att ge liv åt dina webbsidor.
Vad är CSS?
CSS står för Cascading Style Sheets och är språket som används för att styla HTML-innehåll. Med CSS kan du bestämma färger, typsnitt, layouter, avstånd och mycket mer. Tänk på HTML som skelettet av en webbsida och CSS som kläderna och designen som gör skelettet till en välklädd person med personlighet.
CSS gör att vi kan separera innehåll (HTML) från presentationen (styling), vilket gör det lättare att hantera och underhålla webbsidor. Du kan skriva CSS direkt i din HTML-kod, eller använda externa stilark för att göra det mer organiserat.
Hur man använder CSS
Det finns tre huvudsakliga sätt att använda CSS för att styla en webbsida:
- Inline CSS: Används direkt i HTML-taggarna med attributet
style. Det är snabbt, men inte särskilt effektivt när det gäller att hantera större projekt.<p style="color: blue; font-size: 16px;">Detta är en blå paragraf med en specifik storlek.</p> - Intern CSS: Läggs i ett
<style>-element i<head>-delen av HTML-dokumentet. Detta används om du vill ha CSS som gäller för hela sidan men inte behöva skapa en extern fil.<head> <style> body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: green; } </style> </head> - Extern CSS: Skrivet i en separat
.css-fil som länkas till HTML-dokumentet. Detta är det mest organiserade sättet och rekommenderas för större projekt.<head> <link rel="stylesheet" href="styles.css"> </head>Och i dinstyles.css-fil:body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: green; }
CSS-syntax och selektorer
För att styla HTML med CSS använder vi selektorer för att välja vilka HTML-element vi vill påverka, och sedan definierar vi vilka egenskaper och värden vi vill använda.
Här är grundläggande CSS-syntax:
selector {
property: value;
}- Selektor: Det HTML-element vi vill styla, t.ex.
h1,p, ellerdiv. - Egenskap: Det vi vill ändra, t.ex.
color(färg),font-size(teckenstorlek) ellermargin(marginal). - Värde: Den specifika inställningen vi vill ha för egenskapen, t.ex.
blueeller20px.
Exempel på CSS-selektorer
- Elementselektorer: Använder elementnamnet för att styla alla instanser av det elementet.
p { color: red; }Detta kommer att göra alla stycken (<p>) röda. - ID-selektorer: Använder ett specifikt ID för att styla ett enskilt element. ID:n anges med
#-tecknet.<p id="unikt">Detta stycke är unikt.</p>#unikt { font-weight: bold; } - Klass-selektorer: Använder klasser för att styla flera element på samma sätt. Klasser anges med
.-tecknet.<p class="viktig">Detta är viktigt.</p> <p class="viktig">Detta är också viktigt.</p>.viktig { color: blue; }
Styling av en webbsida – Ett exempel
Låt oss nu prova att kombinera våra kunskaper och styla en enkel webbsida. Skapa en HTML-sida med ett tillhörande CSS-dokument och ge sidan ett fräscht utseende.
HTML-kod
<!DOCTYPE html>
<html>
<head>
<title>Min stiliga webbsida</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Välkommen till min fantastiska webbsida</h1>
<nav>
<ul>
<li><a href="#">Hem</a></li>
<li><a href="#">Om mig</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Om mig</h2>
<p>Jag är en webbutvecklare med en passion för att skapa vackra och funktionella webbsidor.</p>
</section>
<article>
<h2>Senaste projekt</h2>
<p>Jag har nyligen arbetat med flera spännande projekt inom webbutveckling.</p>
</article>
</main>
<footer>
<p>Kontakt: info@fantastiskwebbsida.com</p>
</footer>
</body>
</html>CSS-kod (styles.css)
body {
background-color: #e8f5e9;
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background-color: #4caf50;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
h2 {
color: #388e3c;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}Den här kombinationen av HTML och CSS skapar en ren och tilltalande webbsida med en grön header, ett behagligt ljusgrönt bakgrundsfärgschema, och tydliga sektioner för innehållet. Det är fantastiskt hur lite CSS kan göra en sida mer engagerande och lättare att använda!
Praktisk övning: Skapa en stilren portfolio
Nu är det din tur! Skapa en portfolio-webbsida där du använder både HTML och CSS för att presentera dig själv och dina färdigheter. Följ dessa steg:
- Skapa en HTML-fil som innehåller en header, main-sektion med information om dig, och en footer.
- Lägg till en CSS-fil där du stylar bakgrundsfärgen, textfärger, marginaler och padding för att skapa en ren och professionell design.
- Använd klasser och ID:n för att styla specifika element.
Kom ihåg att CSS är det som verkligen gör att dina sidor sticker ut, och det är en konst att hitta rätt balans mellan funktionalitet och estetik.
Sammanfattning
I denna lektion har vi introducerat dig till CSS – verktyget som gör dina webbsidor vackra och engagerande. Vi har tittat på olika sätt att använda CSS: inline, internt och externt. Vi har också lärt oss hur man använder selektorer för att styla olika delar av en webbsida och hur man kombiner
