CSS (Cascading Style Sheets)

  • περιγράφει πως τα elements της HTML θα εμφανίζονται στην οθόνη, στο χαρτί κοκ
  • μπορεί να χρησιμοποιηθεί για πολλές ιστοσελίδες ταυτόχρονα.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Μία απλή Ιστοσελίδα</title>

<style>
body {
    background-color: #F23224;
}

h1 {
    color: yellow;
    text-align: left;
}

p {
    font-family: "Arial";
    font-size: 22px;
}
</style>
</head>
<body>

<h1>Αυτή είναι η επικεφαλίδα!</h1>
<p>Αυτή είναι η πρώτη παράγραφος.</p>
<p>Αυτή είναι η δεύτερη παράγραφος.</p>

</body>
</html>

Τι γίνεται αν θέλουμε δύο παράγραφοι να έχουν διαφορετική εμφάνιση; Έχουμε δύο επιλογές: class ή id

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Μία απλή Ιστοσελίδα</title>

<style>
.megala {
font-size:200%;
}
#prassino {
color:green;
}
.ypogramisi  {
text-decoration:underline;
}
.entona {
font-weight:bold;
}
</style>
</head>

<body>

<p class="megala">Πρώτη παράγραφος.</p>
<p id="prassino" class="megala">Δεύτερη παράγραφος.</p>
<p>Αυτή είναι η <span class="ypogramisi megala entona">τρίτη</span> παράγραφος σε αυτή την ιστοσελίδα.</p>

</body>
</html>

χχχχχχχχχχχχχχχχχχχχχχχχχχχχ    lecture 43 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Καλά site :

  • http://www.w3schools.com/css/css_intro.asp
  • http://pages.cs.aueb.gr/courses/epl131/files/CSS_notes.pdf (Ελληνικά)
  • http://www.wlearn.gr/index.php/css-84 (Ελληνικά)