Η CSS ελέγχει πώς φαίνεται η ιστοσελίδα σου. Χρώματα, γραμματοσειρές, αποστάσεις, διάταξη: όλα είναι CSS. Μάθε τι είναι, πώς λειτουργεί και γιατί μετράει για το brand σου.
Έχεις επισκεφτεί ποτέ δύο ιστοσελίδες με σχεδόν το ίδιο περιεχόμενο που φαίνονται εντελώς διαφορετικές; Η μία είναι προσεγμένη, καθαρή και εύκολη στην ανάγνωση. Η άλλη φαίνεται ακατάστατη, παλιομοδίτικη και δύσκολη στην πλοήγηση. Το περιεχόμενο μπορεί να είναι πανομοιότυπο. Αυτό που τις κάνει να φαίνονται τόσο διαφορετικές είναι η CSS.
Στο προηγούμενο κεφάλαιο έμαθες ότι η HTML δίνει δομή σε μια ιστοσελίδα. Λέει στον browser τι είναι το καθετί: τίτλος, παράγραφος, εικόνα, κουμπί. Αλλά η HTML από μόνη της δεν έχει στυλ. Χωρίς CSS, κάθε ιστοσελίδα θα έμοιαζε με απλό έγγραφο κειμένου. Η CSS είναι αυτή που μετατρέπει τη δομή σε οπτική εμπειρία.
Τι είναι η CSS;
Η CSS σημαίνει Cascading Style Sheets. Είναι μια γλώσσα που ελέγχει την οπτική παρουσίαση μιας ιστοσελίδας. Ενώ η HTML λέει «αυτός είναι τίτλος», η CSS λέει «αυτός ο τίτλος να είναι σκούρο μπλε, ύψους 32 pixels και να χρησιμοποιεί αυτή τη συγκεκριμένη γραμματοσειρά». Ενώ η HTML λέει «αυτό είναι κουμπί», η CSS λέει «αυτό το κουμπί να είναι πράσινο, με στρογγυλεμένες γωνίες και να απέχει 20 pixels από το κείμενο από πάνω».
Κάθε οπτική απόφαση που βλέπεις σε μια ιστοσελίδα, χρώματα, γραμματοσειρές, μεγέθη, αποστάσεις, διατάξεις, εφέ όταν περνάς το ποντίκι, φόντα, προέρχεται από την CSS. Είναι το επίπεδο σχεδιασμού του web.
Πώς λειτουργεί η CSS;
Η CSS λειτουργεί στοχεύοντας στοιχεία HTML και εφαρμόζοντας σε αυτά κανόνες στυλ. Λες στην CSS ποιο στοιχείο να διαμορφώσει και μετά περιγράφεις πώς πρέπει να φαίνεται. Αυτοί οι κανόνες γράφονται σε ξεχωριστό αρχείο που φορτώνει ο browser μαζί με την HTML. Όταν ο browser διαβάζει και τα δύο αρχεία μαζί, εφαρμόζει τα στυλ στα αντίστοιχα στοιχεία και εμφανίζει την ολοκληρωμένη σελίδα.
Το «cascading» στο όνομα αναφέρεται στον τρόπο που η CSS χειρίζεται τις συγκρούσεις. Αν πολλοί κανόνες στυλ ισχύουν για το ίδιο στοιχείο, η CSS ακολουθεί συγκεκριμένη σειρά προτεραιότητας για να αποφασίσει ποιος κανόνας επικρατεί. Οι πιο συγκεκριμένοι κανόνες υπερισχύουν των πιο γενικών. Αυτό το σύστημα δίνει στους σχεδιαστές ακριβή έλεγχο για το πώς φαίνεται κάθε στοιχείο σε όλη την ιστοσελίδα.
Τύποι CSS
Η CSS μπορεί να γραφτεί με τρεις διαφορετικούς τρόπους. Ο καθένας δουλεύει, αλλά δεν ταιριάζουν εξίσου σε κάθε περίπτωση.
1. Inline CSS
Η inline CSS γράφεται απευθείας πάνω σε ένα στοιχείο HTML. Επηρεάζει μόνο αυτό το στοιχείο και υπερισχύει κάθε άλλου στυλ που εφαρμόζεται σε αυτό. Είναι χρήσιμη για γρήγορες, μεμονωμένες αλλαγές, αλλά γίνεται πρόβλημα σε μεγάλη κλίμακα. Αν θέλεις να αλλάξεις ένα χρώμα που χρησιμοποιείται σε 50 στοιχεία, πρέπει να το αλλάξεις σε 50 σημεία αντί για ένα.
2. Internal CSS
Η internal CSS γράφεται μέσα σε tag style στο ίδιο το αρχείο HTML, συνήθως κοντά στην κορυφή της σελίδας. Ισχύει μόνο για αυτή τη σελίδα. Είναι εντάξει για μεμονωμένες σελίδες ή μικρά έργα, αλλά για ολόκληρη ιστοσελίδα σημαίνει ότι επαναλαμβάνεις τα ίδια στυλ σε κάθε σελίδα. Αν αλλάξεις ένα πράγμα, πρέπει να ενημερώσεις κάθε αρχείο ξεχωριστά.
3. External CSS
Η external CSS βρίσκεται σε ξεχωριστό αρχείο που συνδέεται με τις σελίδες HTML σου. Είναι η τυπική προσέγγιση για κάθε πραγματική ιστοσελίδα. Ορίζεις όλα τα στυλ σου μία φορά σε ένα αρχείο και κάθε σελίδα που συνδέεται με αυτό κληρονομεί αυτά τα στυλ. Αλλάζεις ένα χρώμα ή μια γραμματοσειρά σε ένα σημείο και ενημερώνεται παντού αμέσως. Είναι πιο καθαρή, φορτώνει πιο γρήγορα και είναι πολύ πιο εύκολη στη συντήρηση. Σχεδόν κάθε καλοφτιαγμένη ιστοσελίδα χρησιμοποιεί external CSS ως θεμέλιο.
Τι ελέγχει η CSS στην ιστοσελίδα σου
Η CSS αγγίζει σχεδόν κάθε οπτική πλευρά της ιστοσελίδας σου. Αυτές είναι οι κύριες περιοχές που χειρίζεται.
Χρώματα και φόντα
Κάθε χρώμα στην ιστοσελίδα σου, χρώμα κειμένου, χρώμα φόντου, χρώμα κουμπιού, χρώμα περιγράμματος, ορίζεται μέσω CSS. Τα χρώματα του brand σου εφαρμόζονται συνεπώς σε όλη την ιστοσελίδα, αφού τα ορίζεις μία φορά στην CSS και τα ξαναχρησιμοποιείς παντού.
Τυπογραφία
Η γραμματοσειρά της ιστοσελίδας σου, το μέγεθος των τίτλων και του κειμένου, η απόσταση ανάμεσα στις γραμμές, αν το κείμενο είναι έντονο ή πλάγιο: όλα αυτά είναι CSS. Η καλή τυπογραφία κάνει το περιεχόμενο πιο εύκολο στην ανάγνωση και ενισχύει την ταυτότητα του brand σου.
Διάταξη και αποστάσεις
Πώς οργανώνονται οι στήλες, πόσος χώρος υπάρχει ανάμεσα στις ενότητες, πόσο πλατιά είναι η περιοχή περιεχομένου, πού εμφανίζεται η πλαϊνή στήλη: όλα τα ελέγχει η CSS. Οι κανόνες διάταξης ορίζουν τη συνολική δομή κάθε σελίδας πέρα από όσα προσφέρει η HTML.
Responsive συμπεριφορά
Η CSS είναι επίσης αυτή που κάνει τον responsive σχεδιασμό να δουλεύει. Τα media queries στην CSS λένε στον browser να εφαρμόσει διαφορετικά στυλ ανάλογα με το μέγεθος της οθόνης. Σε υπολογιστή, το περιεχόμενο μπορεί να εμφανίζεται σε τρεις στήλες. Σε κινητό, η CSS προσαρμόζει αυτές τις στήλες ώστε να στοιβάζονται κάθετα και να χωράνε όλα στη μικρότερη οθόνη.
Κινήσεις και εφέ
Εφέ όταν περνάς το ποντίκι πάνω από κουμπιά, ομαλές μεταβάσεις ανάμεσα σε ενότητες, περιεχόμενο που εμφανίζεται σταδιακά καθώς κυλάς: όλα αυτά είναι CSS. Προσθέτουν κίνηση και φινίρισμα στην εμπειρία, χωρίς να χρειάζεται JavaScript.
Τι σημαίνει αυτό για την ιστοσελίδα σου ως ιδιοκτήτη brand
Δεν χρειάζεται να γράφεις CSS για να έχεις καλοσχεδιασμένη ιστοσελίδα. Οι δημιουργοί ιστοσελίδων την αναλαμβάνουν για σένα. Όταν διαλέγεις ένα πρότυπο, επιλέγεις τα χρώματα του brand σου και ορίζεις τις γραμματοσειρές σου, η πλατφόρμα μεταφράζει αυτές τις επιλογές σε κανόνες CSS στο παρασκήνιο. Κάθε αλλαγή που κάνεις στον οπτικό επεξεργαστή παράγει CSS που διαβάζει και εφαρμόζει ο browser.
Αυτό που μετράει για σένα είναι η CSS που παράγει η πλατφόρμα σου να είναι καθαρή και αποδοτική. Η βαριά ή φουσκωμένη CSS επιβραδύνει το πόσο γρήγορα φορτώνουν οι σελίδες σου. Η καλογραμμένη CSS κρατά την ιστοσελίδα σου γρήγορη και συνεπή σε κάθε σελίδα. Ο δημιουργός ιστοσελίδων του WEMASY παράγει αυτόματα βελτιστοποιημένη CSS, ώστε οι σχεδιαστικές σου επιλογές να εφαρμόζονται καθαρά, χωρίς να προσθέτουν περιττό βάρος στις σελίδες σου. Για να καταλάβεις πώς συνδέεται αυτό με την απόδοση, διάβασε τι είναι η ταχύτητα ιστοσελίδας και γιατί μετράει.
Συχνές ερωτήσεις
Πρέπει να μάθω CSS για να φτιάξω ιστοσελίδα;
Όχι. Ένας δημιουργός ιστοσελίδων σου επιτρέπει να ελέγχεις την εμφάνιση και την αίσθηση της ιστοσελίδας σου μέσα από οπτικό επεξεργαστή. Την CSS την γράφει η πλατφόρμα για σένα. Τα βασικά της CSS είναι χρήσιμα αν θέλεις να καταλάβεις γιατί τα πράγματα φαίνονται όπως φαίνονται, αλλά δεν χρειάζεται να γράψεις ούτε μία γραμμή για να φτιάξεις επαγγελματική ιστοσελίδα με τον δημιουργό ιστοσελίδων του WEMASY.
Ποια είναι η διαφορά ανάμεσα στην CSS και στην HTML;
Η HTML ορίζει τη δομή μιας ιστοσελίδας, δηλαδή τι είναι κάθε κομμάτι περιεχομένου. Η CSS ορίζει πώς φαίνεται. Η HTML δημιουργεί έναν τίτλο. Η CSS κάνει αυτόν τον τίτλο συγκεκριμένου χρώματος, μεγέθους και γραμματοσειράς. Δουλεύουν μαζί: η HTML δίνει τα στοιχεία, η CSS τους δίνει στυλ.
Μπορεί η CSS να επηρεάσει την ταχύτητα της ιστοσελίδας;
Ναι. Τα μεγάλα, αναποτελεσματικά αρχεία CSS προσθέτουν βάρος σε κάθε φόρτωση σελίδας. Η CSS που δεν είναι βελτιστοποιημένη μπορεί επίσης να εμποδίζει τον browser να εμφανίσει τη σελίδα μέχρι να τελειώσει την ανάγνωση όλων των στυλ, κάτι που καθυστερεί το πόσο γρήγορα βλέπουν οι επισκέπτες το περιεχόμενό σου. Η καθαρή, ελάχιστη CSS φορτώνει πιο γρήγορα. Γι' αυτό μετράει να χτίζεις σε καλογραμμένη πλατφόρμα για την ταχύτητα της ιστοσελίδας.
Τι είναι ένα CSS framework;
Ένα CSS framework είναι μια έτοιμη συλλογή κανόνων CSS που χρησιμοποιούν οι προγραμματιστές ως αφετηρία, αντί να γράφουν τα πάντα από το μηδέν. Επιταχύνει την ανάπτυξη και προσφέρει συνεπή, δοκιμασμένα στυλ από την αρχή. Οι περισσότεροι δημιουργοί ιστοσελίδων χρησιμοποιούν εσωτερικά ένα CSS framework, ώστε τα πρότυπα που παράγουν να είναι ήδη καλά δομημένα και αξιόπιστα.
Μπορείς να χρησιμοποιήσεις CSS για να φαίνεται καλή η ιστοσελίδα σου και σε υπολογιστή και σε κινητό;
Ναι, και αυτή είναι στην πραγματικότητα μία από τις πιο σημαντικές δουλειές της CSS. Με τα media queries, η CSS εφαρμόζει διαφορετικά στυλ ανάλογα με το μέγεθος της οθόνης. Σε φαρδιά οθόνη υπολογιστή, το περιεχόμενο μπορεί να εμφανίζεται σε πολλές στήλες με μεγάλες εικόνες. Σε κινητό, οι ίδιες στήλες στοιβάζονται κάθετα, τα μεγέθη γραμματοσειράς προσαρμόζονται και οι αποστάσεις στενεύουν ώστε να χωράνε στη μικρότερη οθόνη. Έτσι λειτουργεί ο responsive σχεδιασμός, και όλα γίνονται μέσω CSS, χωρίς να χρειάζεσαι ξεχωριστή έκδοση της ιστοσελίδας για κινητά.
Τι συμβαίνει αν η CSS δεν φορτώσει σε μια σελίδα;
Αν το αρχείο CSS δεν φορτώσει, η σελίδα θα εμφανιστεί ακόμα, αλλά χωρίς κανένα στυλ. Θα βλέπεις απλό κείμενο και εικόνες χωρίς χρώματα, γραμματοσειρές ή διάταξη. Όλα θα στοιβάζονται κάθετα με τη σειρά που εμφανίζονται στην HTML. Φαίνεται χαλασμένη, αλλά το περιεχόμενο τεχνικά υπάρχει ακόμα. Αυτό είναι σπάνιο σε καλά συντηρημένες πλατφόρμες, αλλά θυμίζει πόση οπτική δουλειά κάνει αθόρυβα η CSS σε κάθε σελίδα.