Υποενότητα 3.2: Εισαγωγή CSS
External style sheet
Ένα εξωτερικό φύλλο στυλ (external style sheet) είναι ένα ξεχωριστό αρχείο που αποθηκεύεται με την επέκταση .css
. Μπορεί να παραχθεί με τον ίδιο επεξεργαστή κώδικα που χρησιμοποιείται για το html.
Ένα εξωτερικό φύλλο στυλ μπορεί να χρησιμοποιηθεί σε πολλαπλές σελίδες html.
Προκειμένου τα στυλ να εφαρμοστούν στα HTML αρχεία, θα πρέπει να αναφέρουμε το φύλλο στυλ μέσα στο <link>
στοιχείο που θα τοποθετηθεί στην περιοχή head
aτου εγγράφου html.
Η σύνταξη που χρησιμοποιείται είναι:
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="https://example.com/css/thestyle.css">
Το χαρακτηριστικό rel
(attribute) καθορίζει τη σχέση μεταξύ του τρέχοντος και του συνδεδεμένου εγγράφου. Το σχετικό φύλλο rel
με την τιμή "stylesheet"
ενημερώνει την τρέχουσα σελίδα ότι θα εισαχθεί ένα φύλλο στυλ.
Το χαρακτηριστικό type
(attribute) προσδιορίζει το είδος του αρχείου. Το χαρακτηριστικό type
(attribute) με τιμή ="text/css"
ορίζει ότι το περιεχόμενο του εγγράφου θα είναι CSS.
Το χαρακτηριστικό href
περιέχει τη διεύθυνση url
στην οποία μπορεί να βρεθεί το αρχείο css..
Σημείωση!
Είναι καλή πρακτική η αποθήκευση του αρχείου .css
σε ξεχωριστό φάκελο με όνομα css
.
Παράδειγμα
Αυτό είναι ένα απλό αρχείο HTML:
Εισάγουμε σε αυτό το αρχείο HTML ένα εξωτερικό φύλλο στυλ (external style sheet):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style - CSS</title>
<!-- This is an external style sheet-->
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/Core/Swiss">
</head>
<body>
<h2>This is a Heading 2</h2>
<h4>This is a Heading 4</h4>
<p>This is lorem ipsum paragraph: <br>
Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
</p>
<ul>
<li>The first list item</li>
<li>The second list item </li>
<li>The third list item!</li>
</ul>
<a href="https://www.w3schools.com/ target="_blank"">This a link</a>
</body>
</html>
Το style sheet αυτό θα δημιουργήσει μια σελίδα που εμφανίζεται ως: