Previous
Next

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:

Just 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  αυτό θα δημιουργήσει μια σελίδα που εμφανίζεται ως:

HTML + CSS result

Previous
Next