Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα, CSS µπορεί να ρυθµίσει την εµφάνιση των γραµµατοσειρών, τα χρώµατα, τα περιθώρια, τις γραµµές, το ύψος, το πλάτος, τις εικόνες φόντου, την θέση εµφάνισης στην web σελίδα και πολλά άλλα πράγµατα. Η γλώσσα HTML µπορεί να είναι χρησιµοποιείται για να ορίσουµε την διάταξη των αντικειµένων µιας ιστοσελίδας αλλά τα φύλλα CSS προσφέρουν περισσότερες επιλογές και είναι πιο ακριβή και εξελιγµένα. Σήµερα τα φύλλα CSS υποστηρίζονται από όλους τους browsers. Η γλώσσα HTML χρησιµοποιείται για να δώσουµε δοµή στο περιεχόµενο, αλλά τα φύλλα CSS χρησιµοποιούνται για τη µορφοποίηση σε ήδη δοµηµένο περιεχόµενο. Ποια είναι η διαφορά µεταξύ CSS και HTML; Αρχικά η γλώσσα HTML χρησιµοποιήθηκε µόνο για να προσδώσει δοµή στο κείµενο. Ο συγγραφέας θα µπορούσε να βάλει σήµανση σ ένα κείµενό του, πχ να δηλώσει ότι «αυτό είναι ένας τίτλος» ή «αυτό είναι µια παράγραφος" µε τη χρήση HTML tags όπως <h1> και <p> κλπ. Καθώς το Web απέκτησε δηµοτικότητα, οι σχεδιαστές άρχισαν να αναζητούν δυνατότητες για να προσθέσουν διάταξη στα ηλεκτρονικά έγγραφα. Για να καλυφθεί αυτή η ζήτηση, οι παραγωγοί του προγράµµατος περιήγησης (κυρίως η Netscape και η Microsoft) εφεύραν νέες ετικέτες HTML, όπως για παράδειγµα <font> η οποία διέφερε στον ορισµό από την αρχική HTML ετικέτα (tag) και όχι τη δοµή. Αυτό οδήγησε επίσης σε µια κατάσταση όπου οι αρχικές ετικέτες δοµής, όπως είναι πχ η ετικέτα <table> χρησιµοποιείτο περισσότερο στις σελίδες προκειµένου να προσδιορίσει την εµφάνιση και όχι για να προσθέσει δοµή σε κείµενο. Επίσης σε άλλες περιπτώσεις νέες ετικέτες διάταξης, όπως είναι πχ η <blink> υποστηρίζονταν µόνο από το ένα πρόγραµµα περιήγησης και όχι από όλα. Η γλώσσα CSS εφευρέθηκε για να διορθωθεί αυτή η κατάσταση, παρέχοντας στους σχεδιαστές ιστοσελίδων εξελιγµένες δυνατότητες διάταξης οι οποίες να υποστηρίζονται από όλους τους browsers. Την ίδια στιγµή, ο διαχωρισµός της µορφής παρουσίασης των εγγράφων από το περιεχόµενο των εγγράφων, κάνει συντήρηση του δικτυακού τόπου είναι πολύ πιο εύκολη. Ποια οφέλη δίνει η CSS; Η CSS ήταν µια επανάσταση στον κόσµο του web design. Τα συγκεκριµένα οφέλη των φύλλων CSS είναι: Επιτρέπει τον έλεγχο της διάταξης πολλών εγγράφων από ένα µόνο φύλλο στυλ. Κάνει πιο ακριβή τον έλεγχο της διάταξης. Εφαρµόζει διαφορετική διάταξη σε διαφορετικούς τύπους µέσων µαζικής ενηµέρωσης (οθόνη, εκτύπωση, κλπ.). Χρησιµοποιεί πολλές προηγµένες και εξελιγµένες τεχνικές.
Στη συνέχεια θα δούµε πώς µπορούµε να χρησιµοποιούµε επικαλυπτόµενα φύλλα στυλ (για συντοµία CSS) για να αναλάβει τον έλεγχο του στυλ των web σελίδων, όπως είναι για παράδειγµα τα χρώµατα και το µέγεθος των γραµµατοσειρών, το πλάτος και τα χρώµατα των γραµµών, καθώς και το κενό χώρο µεταξύ αντικειµένων µιας σελίδας. Για παράδειγµα, µπορείτε να καθορίσετε ότι το φόντο της σελίδας είναι ένα κρεµ χρώµα, το περιεχόµενο όλων των στοιχείων των διαφόρων παραγράφων (<p>) να εµφανίζονται µε γκρι χρησιµοποιώντας τη γραµµατοσειρά Arial, και ότι όλα οι τίτλοι πρώτου επιπέδου (<h1> ) θα πρέπει να είναι κόκκινοι και µε την Times New Roman γραµµατοσειρά. Θα πρέπει στη συνέχεια να δούµε : Τι κάνει ένας κανόνας CSS Πώς τοποθετούµε CSS κανόνες µέσα σε µια web σελίδα και πώς την συνδέουµε µε ένα εξωτερικό έγγραφο CSS Πώς ελέγχονται οι ιδιότητες παρουσίασης και οι αντίστοιχες τιµές τους των διαφόρων στοιχείων µέσα στο web έγγραφό. Πώς ελέγχεται η παρουσίαση του κειµένου µε τη χρήση CSS Πώς τα φύλλα CSS βασίζονται σε ένα µοντέλο κουτί (box model), και πώς να ορίζονται διαφορετικές ιδιότητες για αυτά τα κουτιά (όπως πχ το πλάτος και το στυλ των box borders) Παρακάτω παρουσιάζεται για παράδειγµα ένας κανόνας CSS ο οποίος εφαρµόζεται σε διαφορετικά στοιχεία (σε αυτό το παράδειγµα εφαρµόζεται στα στοιχεία: <h1>, <h2> και <h3>). Ένα κόµµα διαχωρίζει το όνοµα του κάθε στοιχείου για το οποίο θα ισχύει αυτός ο κανόνας. Ο κανόνας ορίζει ένα αριθµό ιδιοτήτων για αυτά τα στοιχεία. Κάθε ζεύγος ιδιότητας-τιµή διαχωρίζεται µε ένα ερωτηµατικό από το επόµενο ζεύγος ιδιότητας-τιµή. Όπως φαίνεται όλα τα ζεύγη ιδιότητα-τιµή παραµένουν µέσα στα άγκιστρα: h1, h2, h3 { font-weight:bold; font-family:arial; color:#000000; background-color:#ffffff;} Στον παραπάνω κανόνα υπάρχουν τρία στοιχεία επικεφαλίδας (<h1>, <h2> και <h3>), και ο κανόνας αυτός λέει ότι, όταν χρησιµοποιούνται αυτές οι ετικέτες το κείµενο θα γραφτεί µε µια έντονη γραµµατοσειρά Arial, µε µαύρο χρώµα και µε λευκό φόντο. Ένα Βασικό Παράδειγµα Ας δούµε τώρα ένα παράδειγµα που δείχνει πώς ένα σύνολο από κανόνες CSS µπορούν να αλλάξουν την εµφάνιση µιας XHTML σελίδας. Οι CSS κανόνες µπορεί να βρίσκονται µέσα σε µια σελίδα XHTML, αλλά σε αυτό το παράδειγµα όλοι οι κανόνες CSS θα αποθηκευθούν σε ένα ξεχωριστό αρχείο, και στην σελίδα XHTML θα υπάρχει ένας µόνο σύνδεσµος που θα συσχετίζει το αρχείο αυτό µε το αντίστοιχο φύλλο στυλ (style sheet). Το παρακάτω Σχήµα 1 δείχνει µια σελίδα XHTML η οποία έχει µορφοποιηθεί µε κανόνες CSS. Και στη συνέχεια παρουσιάζεται ο κώδικας για τη σελίδα η οποία εµφανίζεται στην Εικόνα 1 (excer9.html). Η web σελίδα παρουσιάζει ή αλλιώς περιέχει έναν τίτλο, µια παράγραφο, και έναν Πίνακα. Μέσα στο <head> υπάρχει το στοιχείο είναι <link> το οποίο λέει στο πρόγραµµα περιήγησης που βρίσκεται το φύλλο στυλ το οποίο και θα διαµορφώσει αυτή την σελίδα. Η θέση του φύλλου στυλ δίνεται από την τιµή που έχει το χαρακτηριστικό tag href.
Εικόνα 1 Μορφοποιηµένη σελίδα µε χρήση κανόνων CSS Επίσης, να επισηµανθεί ότι µερικά από τα στοιχεία <td> (δηλαδή τα κελιά του πίνακα) φέρουν ένα χαρακτηριστικό κλάσης της οποίας η τιµή δηλώνεται µε το όνοµα code. Αυτό χρησιµοποιείται στο έγγραφο για να διακρίνει τα κελιά του πίνακα που µορφοποιούνται µε άλλο τρόπο. <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns= http://www.w3.org/1999/xhtml lang= en > <head> <title> CSS Example </title> <link rel="stylesheet" type="text/css" href="ex9.css" /> </head> <body> <h1> Basic CSS fonts Properties </h1> <p> The following table shows you the basic CSS font properties that allow you to change the appearance of text in your documents. </p> <table> <th> Property </th> <th> Purpose </th> </tr> <td class="code"> font-family </td> <td> Specifies the font used. </td> </tr> <td class="code"> font-size </td> <td> Specifies the size of the font used. </td> </tr> <td class="code"> font-style </td> <td> Specifies whether the font should be normal, italic or oblique. </td>
</tr> </tr> </table> </body> </html> <td class="code"> font-weight </td> <td> Specifies whether the font should be normal, bold, bolder, or lighter </td> Έχοντας δηµιουργήσει ένα XHTML φύλλο στη συνέχει µπορούµε να δηµιουργήσουµε ένα φύλλο στυλ CSS στο ίδιο επεξεργαστή που χρησιµοποιούµε και έτσι να ολοκληρώσουµε την εµφάνιση της XHTML σελίδας. Το αρχείο διαµόρφωσης (CSS style) αποθηκεύεται µε την επέκταση αρχείου *. CSS. Έστω ότι το φύλλο στυλ ή αρχείο το οποίο χρησιµοποιεί διάφορους κανόνες CSS για αυτό το παράδειγµα, έχει το όνοµα ex9.css. Στην συνέχεια θα αναλύσουµε τι κάνει κάθε στοιχείο του παρόντος style sheet. /* Style sheet for excer9.html */ body { color:#6495ed; background-color:blue #dddddd; font-family:arial,verdana,sans-serif;} h1{font-size:18pt;} p{font-size:12pt;} table { background-color:#efefef; border-style:solid; /*dashed, dotted */ border-width:3px; border-color:#999999;} th { background-color:#aaaaaa; font-weight:bold; padding:8px;} td{padding:5px;} td.code { color:red; font-family:courier, courier-new, serif; font-weight:bold;} Η πρώτη σειρά είναι στην ουσία ένα σχόλιο το οποίο αγνοείται από το σύστηµα. Οτιδήποτε µεταξύ των tags: /* και */ θα αγνοηθεί από το πρόγραµµα περιήγησης και, συνεπώς, δεν θα έχουν επίδραση στην εµφάνιση της σελίδας: /* Style sheet for excer9.html */ Μετά το σχόλιο, ο πρώτος κανόνας αφορά το <body> στοιχείο. Με τον κανόνα αυτόν δηλώνεται ότι το προεπιλεγµένο χρώµα του κάθε κειµένου της σελίδας καθώς και οι γραµµές που χρησιµοποιούνται στη σελίδα θα είναι µαύρο (#000000) και επίσης δηλώνεται ότι το φόντο της σελίδας θα πρέπει να είναι λευκό (#ffffff). Τα χρώµατα που χρησιµοποιούνται εδώ δηλώνονται µε δεκαεξαδικό κώδικα. Επίσης στον ίδιο κανόνα του body, δηλώνεται ότι η γραµµατοσειρά που χρησιµοποιείται σε ολόκληρο το έγγραφο θα πρέπει να είναι Arial. Αν όµως η γραµµατοσειρά Arial δεν
είναι διαθέσιµη, τότε θα χρησιµοποιηθεί αντί η Verdana. Και αν δεν υπάρχει ούτε αυτή τότε θα χρησιµοποιηθεί η προεπιλεγµένη γραµµατοσειρά που έχει το σύστηµα. body { color: #000000; background-color:#ffffff; font-family:arial, verdana, sans-serif; } Οι επόµενοι δύο κανόνες προσδιορίζουν απλώς το µέγεθος των περιεχοµένων του <h1> και <p> στοιχεία, αντίστοιχα: h1 {font-size:18pt;} p {font-size:12pt;} Στη συνέχεια, παρουσιάζονται µερικές ρυθµίσεις οι οποίες αφορούν την εµφάνιση του πίνακα. Με το στοιχείο background-color, δίνουµε στο φόντο ένα ανοιχτό γκρι χρώµα. Στη συνέχεια, µε την δήλωση border-style θα δηλώσουµε solid περίγραµµα για τον πίνακα. Στη δήλωση border-style η οποία δηλώνει τον τύπο της γραµµής του περιγράµµατος µπορεί να χρησιµοποιηθούν τρεις τιµές (solid, dashed ή dotted). Με την τιµή solid δηλώνουµε ότι έχουµε σταθερή γραµµή, µε την dashed έχουµε διακεκοµµένη γραµµή ή γραµµή µε τελείες όταν δηλώνεται η µεταβλητή αυτή ως dotted. Η δήλωση border-width λέει ότι το πάχος της γραµµής πρέπει να είναι 1 pixel. Και τέλος η ιδιότητα border-color ορίζει ότι το χρώµα της γραµµής του περιγράµµατος θα πρέπει να είναι ανοιχτό γκρι: table { background-color:#efefef; border-style:solid; border-width:1px; border-color:#999999;} Με τον επόµενο κανόνα th προσδιορίζονται οι επικεφαλίδες του πίνακα. Και συγκεκριµένα µε την πρώτη δήλωση προσδιορίζεται το χρώµα του φόντου καθώς επίσης µε την δεύτερη δήλωση (font-weight) ότι το κείµενο θα πρέπει να εµφανίζεται µε έντονα (bold) γράµµατα, και τέλος µε την δήλωση padding καθορίζεται ότι το χώρος µεταξύ του περιγράµµατος του κελιού του πίνακα και του κειµένου, θα πρέπει να υπάρχουν 5 pixels. th { background-color:#cccccc; font-weight:bold; padding:5px;} Το κάθε κελί δεδοµένων του πίνακα έχει επίσης συµπλήρωµα (padding) 5 pixels (όπως και οι τίτλοι του πίνακα). Η προσθήκη αυτού του κενού ή συµπληρώµατος καθιστά το κείµενο πολύ πιο εύκολο να διαβαστεί, και χωρίς αυτό το κείµενο σε µία στήλη θα µπορούσε να τρέξει µέχρι το κείµενο της διπλανής ή γειτονικής στήλης: td {padding:5px;} Στην Εικόνα 1 ας παρατηρήσουµε ότι τα κελιά τα οποία περιέχουν τα ονόµατα των CSS ιδιοτήτων είναι σε µια γραµµατοσειρά Courier. Αν κοιτάξετε τα αντίστοιχα κελιά πίνακα στο έγγραφο XHTML, κουβαλούσαν ένα χαρακτηριστικό κλάσης του οποίου η τιµή ήταν code. Από µόνο του, το χαρακτηριστικό της κλάσης δεν αλλάζει την εµφάνιση του εγγράφου, αλλά το χαρακτηριστικό κλάσης σας επιτρέπει να συσχετίζονται κανόνες CSS µε στοιχεία των οποίων το χαρακτηριστικό της κλάσης έχει µια συγκεκριµένη τιµή. Ως εκ τούτου, ο παρακάτω κανόνας ισχύει µόνο για κελιά δεδοµένων <td> που φέρουν ένα χαρακτηριστικό κλάσης του οποίου η τιµή είναι code, και όχι για όλα τα <td> κελιά:
td.code { font-family:courier, courier-new, serif; font-weight:bold;} Όταν θέλετε να δηλώσετε ένα στοιχείο (attribute) του οποίου το χαρακτηριστικό της κλάσης έχει µια συγκεκριµένη τιµή, τότε βάζετε το όνοµα του στοιχείου (attribute- εν προκειµένω td), ακολουθεί τελεία και τέλος γράφουµε την τιµή της κλάσης µε συµβολικό όνοµα (στην προκειµένη περίπτωση συµβολικό όνοµα code). Το παραπάνω παράδειγµα που παρουσιάσαµε εδώ σας παρέχει µια εικόνα του πώς χρησιµοποιείται και πως εργάζεται ένα CSS φύλλο. Με δεδοµένο ότι έχει γίνει αντιληπτό του πως εργάζονται τα φύλλα CSS, στη συνέχεια θα πρέπει να ξεκαθαρίσουµε τα εξής: Τις διάφορες ιδιότητες που µπορούµε να χρησιµοποιήσουµε για να ελέγξουµε την εµφάνιση των διαφόρων στοιχείων µιας XHTML σελίδας καθώς επίσης και τις τιµές που µπορεί να πάρει το κάθε στοιχείο. Οι διαφορετικές ιδιότητες µπορούν να οµαδοποιηθούν για λόγους ευκολότερης µελέτης. Για παράδειγµα, όλες οι ιδιότητες που επηρεάζουν την εµφάνιση των γραµµατοσειρών να είναι σε µία οµάδα, και εκείνες που επηρεάζουν τα περιγράµµατα σε µια άλλη οµάδα και ούτω καθεξής. Τους διαφόρους επιλογείς που µας επιτρέπουν να καθορίζουµε σε ποια στοιχεία εφαρµόζονται αυτές οι ιδιότητες. Το παραπάνω παράδειγµα, χρησιµοποίησε µερικές µόνο από τις µεθόδους τις οποίες µπορείτε να χρησιµοποιήσετε για να δείξετε ποια στοιχεία ελέγχονται από ποιους κανόνες στυλ. Πώς αντιµετωπίζει ένα φύλλο CSS κάθε στοιχείο σε µια ιστοσελίδα και το πώς αυτό επηρεάζει την τρόπο µε τον οποίο θα παρουσιάσει τις ιστοσελίδες. Πέρα από το πώς χρησιµοποιούµε τους κανόνες CSS στα διάφορα έγγραφά µας, ιδιαίτερο ενδιαφέρον έχει να γίνουν αντιληπτές οι µονάδες µέτρησης που χρησιµοποιούνται σε φύλλα CSS (όπως pixels, και ποσοστά). Επίσης θα πρέπει να γίνει κατανοητό και µια άλλη πολύ ισχυρή έννοια που αφορά το πώς εφαρµόζονται οι κανόνες CSS και η οποία ονοµάζεται κληρονοµικότητα. Κληρονοµικότητα (Inheritance) Ένα από τα ισχυρά χαρακτηριστικά των CSS είναι ότι, όταν µια ιδιότητα έχει εφαρµοστεί σε ένα στοιχείο, τότε µπορεί αυτή η ιδιότητα θα να κληρονοµείται στα στοιχεία του διαδόχου (δηλ. στοιχεία που περιέχονται µέσα στο στοιχείο στο οποίο δηλώθηκαν οι κανόνες). Για παράδειγµα, όταν η γραµµατοσειρά µε οικογενειακό χαρακτηριστικό είχαν δηλωθεί για το <body> όπως το στοιχείο στο προηγούµενο παράδειγµα, εφαρµόζεται σε όλα τα στοιχεία στο εσωτερικό του <body> στοιχείο. Αυτό σας γλυτώνει από την επανάληψη των ίδιων κανόνων για κάθε στοιχείο που έχει µια ιστοσελίδα. Εάν ένας άλλος κανόνας είναι πιο συγκεκριµένος ως προς το ποια ιδιότητα θα εφαρµόζεται σε κάθε στοιχείο, και πότε θα υπερισχύουν οι ιδιότητες που συνδέονται µε το στοιχείο <body> ή πότε οποιοδήποτε άλλη ιδιότητα που περιέχεται σε αυτό το ίδιο το html έγγραφο. Στο προηγούµενο παράδειγµα, οι περισσότερες εµφανίσεις κειµένου ήταν µε γραµµατοσειρά Arial, όπως ορίζεται στον κανόνα ορίζεται στο στοιχείο <body>. Όµως σε µερικά κελιά του πίνακα χρησιµοποιείται η γραµµατοσειρά Courier. Τα κελιά του πίνακα που έχουν διαφορετική εµφάνιση, οφείλεται στο ότι τα κελιά έχουν µια class ιδιότητα της οποίας η τιµή είναι code. Και αυτό δηλώνεται στο XHTML κείµενο µε την παρακάτω δήλωση:
<td class= code > font-size </td> Here you can see the rule associated with these elements: td.code { font-family:courier, courier-new, serif; font-weight:bold;} Ο κανόνας αυτός υπερισχύει από έναν αντίστοιχο κανόνα ο οποίος δηλώνεται στο στοιχείο <body>, επειδή ο επιλογέας είναι πιο ειδικός. Ο τρόπος µε τον οποίο κληρονοµούνται οι ιδιότητες σε απαλλάσσει από τον κόπο να γράψεις κανόνες και όλα τα στοιχεία της xhtml σελίδας και έτσι δηµιουργείται ένα πιο συµπαγές φύλλο στυλ. Που γράφονται οι κανόνες CSS Στο παράδειγµα που παρουσιάζεται εδώ οι κανόνες CSS τοποθετούνται σε ένα ξεχωριστό αρχείο - εξωτερικό φύλλο στυλ µε δικό του όνοµα. Επίσης κανόνες CSS µπορεί να εµφανιστούν σε δύο σηµεία µέσα στο έγγραφο XHTML: Μέσα σε ένα tag µε όνοµα <style>, το οποίο βρίσκεται στο εσωτερικό του <head> ενός εγγράφου. Ως τιµή του χαρακτηριστικού style σε κάθε στοιχείο που µπορεί να φέρει το χαρακτηριστικό στυλ Όταν οι κανόνες του στυλ εµπεριέχονται µέσα σε ένα <style>, τότε αναφέρονται και σαν είναι αναφέρεται ως ένα internal style sheet. <head> <title> Internal Style sheet </title> <style type= text/css > body { color:#000000; background-color:#ffffff; font-family:arial, verdana, sans-serif; } h1 {font-size:18pt;} p {font-size:12pt;} </style> </head> Οι ιδιότητες του style οι οποίες χρησιµοποιούνται για στοιχεία µιας XHTML σελίδας, είναι γνωστές και ως inline style rules. Για παράδειγµα: <td style= font-family:courier; padding:5px; border-style:solid; border-width:1px; border-color:#000000; > Εδώ µπορείτε να δείτε ότι µαζί µε κάθε ιδιότητα του style προστίθεται και µια τιµή της ιδιότητας. Θα πρέπει ακόµα να διαχωρίζουν κάθε ιδιότητα από την τιµή της µε χρήση της άνω και κάτω τελείας και κάθε ζεύγος ιδιότητα-τιµή διαχωρίζεται µε ένα ερωτηµατικό. Ωστόσο, δεν υπάρχει καµία ανάγκη για ένα επιλογέα (selector) εδώ (επειδή το style εφαρµόζεται άµεσα και αυτόµατα στο στοιχείο που φέρει τις ιδιότητες του style), και γι αυτό δεν υπάρχουν άγκιστρα.
Το στοιχείο διασύνδεσης (< link > Element) Το tag <link> χρησιµοποιείται στις σελίδες web για να δηλώσει τη σύνδεση µεταξύ δύο εγγράφων. Για παράδειγµα, µπορεί να χρησιµοποιηθεί σε µια ιστοσελίδα XHTML για να προσδιορίσει την χρήση ενός φύλλου στυλ που πρέπει να χρησιµοποιηθεί για να προσδώσει διαµόρφωση σε html σελίδα. Επίσης είναι δυνατόν να δείτε να χρησιµοποιείται το στοιχείο <link> να χρησιµοποιείται σε XHTML σελίδες και για άλλους σκοπούς. Για παράδειγµα, να χρησιµοποιείται προκειµένου να δηλώσει ένα RSS feed το οποίο αντιστοιχεί στην συγκεκριµένη web σελίδα. Αυτός ο τρόπος διασύνδεσης είναι πολύ διαφορετικό είδος απ ότι ο σύνδεσµος που δηµιουργείται µε την χρήση του στοιχείου <a> επειδή τα δύο αυτά έγγραφα συνδέονται αυτόµατα - και ο χρήστης δεν χρειάζεται να κάνει κάτι το ιδιαίτερο πχ να ενεργοποιήσει αυτή την σύνδεση ή οτιδήποτε άλλο. Το στοιχείο <link> είναι πάντα ένα κενό στοιχείο, και όταν χρησιµοποιείται µε φύλλα στυλ θα πρέπει να φέρουν τρία χαρακτηριστικά: type, rel, και href. Εδώ είναι ένα παράδειγµα του στοιχείου <link> που χρησιµοποιείται σε µια σελίδα XHTML και το οποίο δείχνει ότι η παρούσα σελίδα θα πρέπει να διαµορφωθεί από ένα αρχείο CSS που ονοµάζεται interface.css, το οποίο βρίσκεται µέσα σε έναν κατάλογο που ονοµάζεται CSS: <link rel= stylesheet type= text/css href=../css/interface.css /> Εκτός από τις βασικές ιδιότητες, το στοιχείο <link> µπορεί επίσης να λάβει τα ακόλουθα χαρακτηριστικά: charset dir href href lang media rel rev κλπ. Α.Σ. ( linuxinside)