Τι είναι η CSS;

Χωρίς CSS, μια ιστοσελίδα θα ήταν απλό κείμενο σε άσπρο φόντο. Η CSS είναι αυτή που της δίνει χρώματα, μεγέθη, αποστάσεις και διάταξη στην οθόνη.

Πώς λειτουργεί

Η CSS αποτελείται από κανόνες: ένας επιλογέας λέει σε ποια στοιχεία της HTML αναφέρεται και οι δηλώσεις λένε τι αλλάζει. Για παράδειγμα: h1 { color: navy; font-size: 2rem; } κάνει όλους τους κύριους τίτλους μπλε και μεγαλύτερους. Το «cascading» (διαδοχικό) σημαίνει ότι όταν πολλοί κανόνες αφορούν το ίδιο στοιχείο, υπάρχουν κανόνες προτεραιότητας που αποφασίζουν ποιος κερδίζει.

Γιατί μετράει

Επιτρέπει να αλλάξεις την εμφάνιση ολόκληρου του site από ένα σημείο και να προσαρμόσεις τη σελίδα σε διαφορετικές οθόνες, π.χ. κινητό και υπολογιστή, με τα media queries. Σύγχρονα εργαλεία διάταξης όπως τα Flexbox και Grid κάνουν εύκολες διατάξεις που παλιότερα ήθελαν περίπλοκα κόλπα.

Παραδείγματα

• Αλλαγή χρώματος και γραμματοσειράς σε όλες τις παραγράφους.
• Διάταξη σε δύο στήλες στον υπολογιστή και σε μία στο κινητό.
• Εφέ όταν περνάς το ποντίκι πάνω από ένα κουμπί.

Τι να προσέχεις

Με την ανάπτυξη ενός site οι κανόνες πολλαπλασιάζονται και μπορούν να συγκρούονται, οπότε μια αλλαγή σε ένα σημείο χαλά κάτι αλλού. Βοηθά η καθαρή οργάνωση και τα σαφή ονόματα κλάσεων.