Τι είναι τα CSS;

CSS σημαίνει Cascading Style Sheets. Και τι σημαίνει αυτό; Ας το πάρουμε από την αρχή.

Η γνωστή σε όλους μας γλώσσα προγραμματισμού ιστοσελίδων και εφαρμογών, η HTML, χρησιμοποιείται για την δημιουργία και την περιγραφή στοιχείων σε μια ιστοσελίδα. Όταν λοιπόν εμείς διαβάζουμε ένα κείμενο, όπως αυτό που διαβάζεται αυτήν την στιγμή, o browser μας, δεν το “διαβάζει” όπως και εμείς. Συνήθως τα κείμενα που βρίσκονται σε μια ιστοσελίδα, είναι περιτρυγυρισμέμα σε paragraph tags. Τα Tags είναι ο τρόπος που χρησιμοποιείται για να περιγράψουμε αντικείμενα. Έτσι, ότι βρίσκεται ανάμεσα σε tags, παίρνει και τις αντίστοιχες ιδιότητες.

Αν λοιπόν το κείμενο “Lorem ipsum dolor sit amet, consectetur adipiscing elit.” το γράψουμε <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>, αυτό θα πάρει τις ιδιότητες της παραγράφου, ενώ αν το γράψουμε <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> θα γίνει bold.

Ωραία ως εδώ. Τι γίνεται όμως όταν θέλουμε αυτό το κείμενο να έχει μεγαλύτερο μέγεθος από κάποιο άλλο στοιχείο paragraph στην ιστοσελίδα μας; H ακόμα χειρότερα άμα θέλουμε να έχουμε 8 διαφορετικά είδη παραγράφων και τίτλων; Εδώ έρχονται και συμπληρώνουν τα CSS. Μέσα από τους selectors (επιλογέας) μπορούμε να “στοχεύσουμε ” στοιχεία στην HTML σελίδα, και να τους δώσουμε στυλ.

Σύνταξη – Δομή

Για να στοχεύσουμε λοιπόν τα διάφορα στοιχεία στην σελίδα μας, πρέπει να γνωρίζουμε την δομή και την σύνταξη μιας CSS εντολής. Ας δούμε καλύτερα σε ένα γράφιμα

Το παραπάνω παράδειγμα, “στοχεύει” όλα τα στοιχεία H1 στην ιστοσελίδα μας. H1 είναι ο μεγαλύτερος σε μέγεθος τίτλος σε ένα κείμενο. Αρχίζοντας λοιπόν, σαν selector, χρησιμοποιούμε το όνομα του tag που θέλουμε να αλλάξουμε. Αφήνουμε ένα κενό, και  ανοίγουμε αγκύλες. Ότι περιέχεται μέσα στις αγκύλες είναι η δήλωση μας . Χρησιμοποιόντας την ιδιότητα (property) color στοχεύουμε το χρώμα του κειμένου. Αμέσως μετά την ιδιότητα βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή μας. Για να κλείσουμε την πρώτη δήλωση, χρησιμοποιούμε το ελληνικό ερωτηματικό (semicolon). Στην δεύτερη δήλωση, χρησιμοποιούμε την ιδιότητα font-size, η οποία αλλάζει το μέγεθος του κειμένου. Βάζουμε άνω και κάτω τελείες και δίνουμε την τιμή που θέλουμε να έχει σε pixels. Κλείνουμε με ελληνικό ερωτηματικό, και με την ανάποδη αγκύλη.

Χρησιμοποιόντας λοιπόν τα CSS μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας, και να τους δώσουμε ζωή. Δείτε τον κώδικα ζωντανά μέσω του w3scholls.com χρησιμοποιόντας τον σύνδεσμο που ακολουθεί

Id και Class

Επειδή τα tags της HTML είναι περιορισμένα, τα CSS μας δίνουν την δυνατότητα να δηλώσουμε τα δικά μας μοναδικά ή μη στοιχεία, και να τους δώσουμε στύλ. Αυτό το κάνουμε χρησιμοποιόντας μέσα στα division tags της HTML (τα γνωστά divs) , ID και CLASS. Πως το κάνουμε αυτό; Ας δούμε ένα γράφιμα.

Στα παραπάνω παραδείγματα, βλέπουμε πως μπορούμε να “τυλίξουμε” την παράγραφο μας μέσα σε divs, και να επιλέξουμε ακριβώς αυτό που θέλουμε για να του δώσουμε στύλ. Στην πρώτη περίπτωση μπορεί να θέλουμε να βάλουμε το κείμενο στο κέντρο αλλά να μην θέλουμε το ίδιο για όλα τα <p> tags της σελίδας μας. Έτσι γράφουμε

.test { color: black; text-align:center;}

Αυτό θα επιλέξει όλο το div και θα μετακινίσει το κείμενο του στο κέντρο, χωρίς να επιρεάσει άλλα paragraphs στην σελίδα.

Αν θέλουμε να επιλέξουμε την παράγραφο που υπάρχει μέσα στο div, γράφουμε

.test p { color: black; text-align:left;}

Γενικότερα, όταν θέλουμε να επιλέξουμε στοιχεία μέσα σε divs, γράφουμε αναλυτικά όλο το “μονοπάτι” μέχρι να φτάσουμε σε αυτά. Ας δούμε για παράδειγμα το 3 κώδικα στο γράφιμα παραπάνω. Έχουμε ένα paragraph μέσα σε ένα div μέσα σε ένα id. Για να επιλέξουμε και να δώσουμε στυλ μόνο στην παράγραφο, γράφουμε

#test .test p { color:white; }

Παρατηρήστε ότι έχουμε το ίδιο όνομα στο class και στο id μας. Αυτό δεν πειράζει καθόλου. Τα ID και τα Classes είναι διαφορετικά στοιχεία και έτσι επιτρέπεται να έχουν το ίδιο όνομα.

ΠΡΟΣΟΧΗ: Το σωστό είναι όταν χρησιμοποιούμε ID να μην εμφανίζουμε το ίδιο στοιχείο πάνω από μια φορά στην σελίδα μας. Τα ID δηλώνουν μοναδικά στοιχεία. Το αντίθετο συμβαίνει με τα Classes. Μπουρούμε να έχουμε απεριόριστα αντίγραφα του class μέσα στην σελίδα μας.

Cascading

Και τι πάει να πεί Cascading; Είναι αναφορά στο φαινόμενο του καταράχτη, και ουσιαστικά δείχνει την κληρονομικότητα που έχουν τα στοιχεία των CSS. Και πως εφαρμόζεται αυτό;

Στο τρίτο παράδειγμα που γράψαμε παραπάνω, αν γράψουμε

#test .test p { color:white; }

θα “στοχεύσουμε” την παράγραφο κατευθείαν, και θα της δώσουμε στύλ συγκεκριμένα. Αν όμως δώσουμε στύλ στο ID τι θα συμβεί;

#test { color:white; }

Ακριβώς το ίδο. Όλα τα στοιχεία που περιέχονται μέσα στο ID αυτό θα κληρονομίσουν την ιδιότητα να έχουν λευκό χρώμα στα γράμματα.

Στο επόμενο μέρος…

Αφού κάναμε μια εισαγωγή στα CSS, στο επόμενο μέρος θα δούμε πιο αναλυτικά πράγματα που μπορούμε να κάνουμε με τις επιλογές, τα Ids και τα Classes, και θα ξεκινήσουμε να δίνουμε στύλ σε στοιχεία. Μέχρι τότε, περιμένουμε να ακούσουμε τις απόψεις σας και τις πρακτικές σας πάνω σε θέματα χρήσης των CSS.