background image

ΘΕΩΡΗΤΙΚΟ ΥΠΟΒΑΘΡΟ 

11 

 

2.3.2  CSS 

CSS σημαίνει (Cascading Style Sheets) και είναι η μορφοποίηση που μπορούμε να ορί-

σουμε μέσα στις σελίδες HTML [4]. 

 

Γράφοντας μια σελίδα HTML μπορούμε να ορίσουμε το μέγεθος, το χρώμα του 

κειμένου, καθώς και των άλλων στοιχείων της σελίδας όπως πίνακες, επικεφαλίδες, λί-

στες κτλ. Για να αλλάξουμε για παράδειγμα το χρώμα σε μια παράγραφο θα μπορούσαμε 

να βρούμε μέσα στον πηγαίο κώδικα το χρώμα και να το αλλάξουμε. Αυτό φαίνεται εύ-

κολο όταν έχουμε να επεξεργαστούμε μόνο μια σελίδα. Όμως ένας ιστότοπος αποτελείται 

από δεκάδες σελίδες τις οποίες θέλουμε να τις επεξεργαζόμαστε εύκολα και γρήγορα. 

Σκεφτείτε  για  παράδειγμα  πόσο  δύσκολο  είναι  να  αλλάξουμε  την  μορφή  μια  ετικέτας 

HTML η οποία επαναλαμβάνετε σε όλες τις σελίδες. Θα έπρεπε να ανοίξουμε μια-μια τις 

σελίδες να εντοπίσουμε την ετικέτα και να την επεξεργαστούμε, κάτι το οποίο είναι πολύ 

χρονοβόρο. 

 

Τα πλεονεκτήματα της CSS έναντι της μορφοποίησης μέσα στο HTML έγγραφο 

είναι πολλά. Με την χρήση CSS μπορούμε να ορίσουμε ένα στυλ μορφοποίησης όπως το 

χρώμα και το μέγεθος και έπειτα να το εφαρμόσουμε σε πολλά στοιχεία διαφορετικών 

αρχείων HTML. Με αυτό τον τρόπο δεν εξοικονομούμε μόνο χρόνο όταν θέλουμε να 

αλλάξουμε μαζικά το στυλ HTML αρχείων αλλά, επιτυγχάνεται και η ταχύτερη πλοή-

γηση αφού η  ανάγνωση του αρχείου μορφοποίησης  HTML  εκτελείται  μόνο μια φορά 

από τον φυλλομετρητή και στην συνέχεια αποθηκεύεται στην μνήμη cache. Επίσης, ε-

κτός από την ευκολία διαχείρισης ενός ιστότοπου άλλο ένα σημαντικό πλεονέκτημα της 

CSS είναι ο «καθαρότερος» κώδικας, χωρίς πολλές ιδιότητες στις ετικέτες οι οποίες τον 

κάνουν δυσανάγνωστο. 

 

Η CSS, λοιπόν, γράφεται και αποθηκεύεται σε ξεχωριστό αρχείο με την κατάληξη 

.css και συνδέεται με το αρχείο .html μέσω της ετικέτας <head>, όπου υπάρχει το στοι-

χείο <link> το οποίο ορίζει το που βρίσκεται το φύλλο στυλ το οποίο και θα διαμορφώσει 

την σελίδα. Η θέση του αρχείου CSS δίνεται από την τιμή που εχει το χαρακτηριστικό 

tag href. 

 

Τα έγγραφα της CSS διαθέτουν μια καλά καθορισμένη δομή που βασίζεται σε 

τρία δομικά στοιχεία: τον επιλογέα στυλ (CSS Selector), την ιδιότητα στυλ (Style Prop-

erty) και την τιμή της ιδιότητας στυλ (Style Property Value). Ο επιλογέας αποτελεί τον 

συνδετικό κρίκο με το στοιχείο της HTML. Οι ιδιότητες καθορίζουν τα επιλεγμένα χα-