HTML és CSS összekapcsolása – HTML: link CSS

  • Reading time:8 perc alatt olvasható

HTML és CSS összekapcsolása – hogyan kezdjük?

Háromféleképpen adhatunk hozzá CSS stílust a HTML dokumentumhoz, a cikkben  a leggyakoribb esettel kezdjük, aztán mutatunk példákat a ritkábban alkalmazott megoldásokra is. 

 

HTML és CSS összekapcsolása

Külső stíluslap hozzáadása – External stylesheet 

A külső CCS  hozzáadásának az előnye, hogy az egész weboldal stílusát meg lehet változtatni egyetlen fájl hozzáadásával.    Minden HTML oldalhoz szükséges külső stíluslapot megadni, a head részben, a <link> elemen belül: 


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="external">
</head>

 

 

Ehhez a külső CSS file így néz ki: 


body {  
    background-color: #f3a8ff;
}
h1 {
    color: #5e4e61;
    margin-left: 20px;
}

 

 

Külső stíluslapot bármilyen kódszerkesztőben írhatunk, ami fontos, hogy .css kiterjesztésben legyen elmentve. 

Belső stíluslap – Internal CSS

Belső stíluslapot akkor érdemes használni, amikor egy HTML aloldalnak más a stílusa, mint a weboldal egészének.    A belső stíluslapot a <style> elemen belül kell megadni, a HTML kód head részében.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>

 

Inline CSS – Egy adott HTML elemre vonatkozó formázás

Ezt a megoldás akkor merül fel, ha egy HTML elemet szeretnénk formázni, nem egy oldalt.  A kiválasztott elemen belül a style attribútum segítségével adhatunk hozzá formázást, bármelyik CSS tulajdonságot beírhatjuk így az elemen belülre.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:salmon;">Ez egy lazacszínű címsor</h1>
<p style="color:olive;">Ez pedig egy zöld színű bekezdés.</p>
</body>
</html>

 

 

Az inline stílus felülírja a külső CSS dokumentumban, vagy a belső stíluslapon megadott tulajdonságokat. A szabályok sorrendje a következő:

  1. Inline stílus (a HTML elemen belül) 
  2. Külső és belső stíluslapok (a head szekcióban)
  3. A böngészö alapbeállításai

Ha kíváncsi vagy további oktatóvideóinkra is, látogass el Youtube csatornánkra, ahol számtalan videót találsz a programozás alapjairól.

A CodeBerry Programozóiskola “Programozási oktatóanyagok” sorozatában olyan kiegészítő tananyagokat találsz az egyes programnyelvekhez, melyek segítségével gyorsan és egyszerűen sajátíthatod el a programozás alapjait.

HTML és CSS:

JavaScript:

Java:

Segédanyagok:

Szeretnél online megtanulni programozni? Gyere, és próbáld ki az első 25 leckénket ingyen a CodeBerry Programozóiskolában!