Η CSS είναι μια γλώσσα που χρησιμοποιείται για να δώσουμε στυλ σε μια ιστοσελίδα.
Η CSS λειτουργεί συνδυάζοντας κανόνες με τα στοιχεία HTML. Αυτοί οι κανόνες καθορίζουν την εμφάνιση των στοιχείων σε μια ιστοσελίδα. Ένας κανόνας CSS αποτελείται από έναν επιλογέα και ένα σύνολο δηλώσεων. Ο επιλογέας καθορίζει ποια στοιχεία επηρεάζονται από τους κανόνες, ενώ οι δηλώσεις καθορίζουν τις ιδιότητες και τις τιμές μορφοποίησης για αυτά τα στοιχεία.
Η CSS αντιπροσωπεύει τα “Cascading Style Sheets” (Φύλλα Στυλ Κατακόρυφης Κύμανσης). Η CSS περιγράφει τον τρόπο με τον οποίο τα στοιχεία HTML πρέπει να εμφανίζονται στην οθόνη, το χαρτί ή σε άλλες μορφές εξόδου. Η χρήση της CSS εξοικονομεί χρόνο και προσπάθεια, καθώς μπορεί να ελέγχει την μορφή πολλών ιστοσελίδων ταυτόχρονα. Οι κανόνες στυλ CSS μπορούν να αποθηκευτούν σε εξωτερικά αρχεία CSS, προσφέροντας οργάνωση και ευελιξία στην ανάπτυξη ιστοσελίδων.
Η CSS χρησιμοποιείται για να ορίσετε το στυλ των ιστοσελίδων σας, συμπεριλαμβανομένου του σχεδιασμού, της διάταξης και της εμφάνισής τους για διάφορες συσκευές και οθόνες.
Χρησιμοποιώντας τη CSS, μπορείτε να επιλέξετε τα στοιχεία της ιστοσελίδας σας και να τους εφαρμόσετε στυλ που θα καθορίσουν την εμφάνισή τους. Αυτό περιλαμβάνει την επιλογή χρωμάτων, γραμματοσειρών, περιθωρίων, πλάτους, ύψους και πολλών άλλων πτυχών της εμφάνισης.
Ένα από τα σημαντικότερα πλεονεκτήματα της CSS είναι η δυνατότητα να διαχωρίζετε το περιεχόμενο της ιστοσελίδας από τη μορφοποίησή του. Αυτό σημαίνει ότι μπορείτε να αλλάξετε την εμφάνιση των στοιχείων χωρίς να αλλάξετε τον κώδικα HTML. Μπορείτε εύκολα να επαναχρησιμοποιήσετε στυλ για διάφορες σελίδες και να καθορίσετε διαφορετικά στυλ για διάφορες συσκευές, όπως υπολογιστές, τάμπλετ και κινητά τηλέφωνα.
Επιπλέον, η CSS προσφέρει προηγμένες δυνατότητες όπως η δυναμική αλλαγή του στυλ με βάση τις δράσεις του χρήστη, η προσθήκη μεταβάσεων και απαλών εφέ στα στοιχεία, και η προσαρμογή του στυλ για εκτύπωση.
Συνολικά, η CSS είναι ένα ισχυρό εργαλείο που σας επιτρέπει να δημιουργήσετε εντυπωσιακά στυλιστικά στοιχεία για τις ιστοσελίδες σας και να προσφέρετε μια ευχάριστη και εξατομικευμένη εμπειρία στους χρήστες σας.
[adinserter block=”2″]
Παρακάτω παραθέτω ένα παράδειγμα CSS:
/* Επιλέγουμε το στοιχείο με id "myElement" */
#myElement {
color: red;
font-size: 20px;
text-align: center;
}
/* Επιλέγουμε όλα τα στοιχεία <p> */
p {
color: blue;
font-size: 16px;
margin-bottom: 10px;
}
Σε αυτό το παράδειγμα, έχουμε δύο κανόνες CSS. Ο πρώτος κανόνας εφαρμόζεται σε ένα στοιχείο με το αναγνωριστικό (id) “myElement”. Οι δηλώσεις με το id “myElement” ορίζουν το χρώμα κειμένου σε κόκκινο, το μέγεθος γραμματοσειράς σε 20px και τον στοίχισμο κειμένου στο κέντρο.
Ο δεύτερος κανόνας εφαρμόζεται σε όλα τα στοιχεία <p>. Οι δηλώσεις με το στοιχείο <p> ορίζουν το χρώμα κειμένου σε μπλε, το μέγεθος γραμματοσειράς σε 16px και το κάτω περιθώριο σε 10px.
Αυτό το παράδειγμα δείχνει πώς μπορείτε να επιλέξετε στοιχεία με βάση το αναγνωριστικό (id) τους ή τον τύπο τους (όπως το <p>) και να εφαρμόσετε στυλ πάνω τους με τις αντίστοιχες δηλώσεις CSS.
Αυτό είναι ένα απλό παράδειγμα, αλλά η CSS παρέχει πολλές περισσότερες δυνατότητες για τον σχεδιασμό και την εμφάνιση των ιστοσελίδων.
Η CSS αντιμετώπισε ένα σημαντικό ζήτημα. Το HTML δεν είχε σχεδιαστεί ποτέ για να περιέχει ετικέτες για τη μορφοποίηση μιας ιστοσελίδας! Το HTML δημιουργήθηκε για να περιγράψει το περιεχόμενο μιας ιστοσελίδας, όπως:
<h1>Αυτό είναι ένας τίτλος</h1> <p>Αυτό είναι ένας παράγραφος.</p>
Όταν προστέθηκαν ετικέτες όπως <font> και χαρακτηριστικά χρώματος στην προδιαγραφή HTML 3.2, προέκυψε ένας εφιάλτης για τους web developers. Η ανάπτυξη μεγάλων ιστότοπων, όπου οι πληροφορίες γραμματοσειράς και χρώματος προστίθεντο σε κάθε σελίδα ξεχωριστά, έγινε μια μακρά και δαπανηρή διαδικασία. Για να αντιμετωπίσει αυτό το πρόβλημα, το World Wide Web Consortium (W3C) δημιούργησε την CSS. Η CSS αφαίρεσε τη μορφοποίηση του στυλ από τη σελίδα HTML.