CSS σημαίνει Cascading Style Sheets και είναι στυλ που μπορούμε να ορίσουμε για τις HTML σελίδες. Με τα στυλ ορίζουμε το χρώμα, το μέγεθος της γραμματοσειράς, την γραφή (bold, underline, κτλ.), το χρώμα του φοντου, τις διαστάσεις, την τιμή padding και μια σειρά από άλλες ιδιότητες των στοιχείων μιας ιστοσελίδας.
Με τη χρήση φύλλων CSS μπορούμε πολύ εύκολα να διαχειριστούμε την εμφάνισης μιας ιστοσελίδας.
Για παράδειγμα, αν σε μια ιστοσελίδα, χωρίς χρήση CSS, θέλω να αλλάξω το χρώμα του φόντου σε όλες τις επικεφαλίδες όλων των πινάκων θα πρέπει να πηγαίνω σε κάθε μια επικεφαλίδα και να ορίζω το χρώμα που επιθυμώ αλλάζοντας κάθε φορά την τιμή της ιδιότητας bgcolor των ετικετών <th>. Ενώ σε μια σελίδα με χρήση CSS θα χρειαστεί να αλλάξω το χρώμα αυτό μια μόνο φορά και αυτό θα εφαρμοστεί για όλες τις επικεφαλίδες των πινάκων της σελίδας. Παρόμοια μπορώ να ορίσω στυλ, όχι μόνο για στοιχεία μιας σελίδας, αλλά για στοιχεία όλων των σελίδων του Site μου.
Δείτε ένα μικρό demo πως μπορούμε να εμφανίσουμε την ίδια σελίδα χρησιμοποιώντας διαφορετικά CSS στυλ. (Πηγή https://www.wlearn.gr/)
Η χρήση ενός συνόλου κανόνων CSS γίνεται συνήθως με σύνδεση του αντίστοιχου αρχείου με επέκταση .css μέσα στο έγγραφο HTML με έναν από τους παρακάτω τρόπους:
• με την παρακάτω ετικέτα link, μέσα στην ετικέτα head <link rel=′′stylesheet′′ media=′′screen′′ href=′′to-styl-mou.css′′>
• με ενσωμάτωση των κανόνων στο έγγραφο HTML με την ετικέτα style <style> h1 { color: red; } </style>
Οι κανόνες μορφοποίησης CSS συντάσσονται σε μορφή απλού κειμένου και αποτελούνται από έναν «επιλογέα» και κανόνες (μέσα σε αγκύλες) που διαχωρίζονται από το ελληνικό ερωτηματικό «;» και αποτελούνται από ζεύγη ονομάτων και τιμών χωρισμένα με άνω κάτω τελεία «:».
P { color: green; border-bottom: 1px solid black; padding: 10px; }
Το παραπάνω παράδειγμα καθορίζει ότι όλες οι παράγραφοι (P) θα έχουν χρώμα κειμένου πράσινο, κάτω περίγραμμα πάχους 1 pixel και περιθώριο 10 px από κάθε πλευρά της παραγράφου.
