Σύνταξη κανόνων CSS
Ο κανόνας CSS χωρίζεται σε δύο μέρη: τον selector (επιλογέας) και οι δηλώσεις που σχετίζονται με το selector.
Ο selector μπορεί να είναι κάποιο html tag (π.χ. h1, p, img κλπ). Υπάρχουν ακόμα οι id και class selector. Ο id selector χρησιμοποιείται για να ορίσουμε ένα στυλ σε ένα μοναδικό html στοιχείο. Κάθε στοιχείο μπορεί να έχει την ιδιότητα id για να το ξεχωρίζουμε από τα υπόλοιπα. Για τη χρήση του id selector, προσθέτουμε το σύμβολο # και την τιμή του id του στοιχείου. Με αυτό τον τρόπο, αν για παράδειγμα έχουμε μία παράγραφο με id=”paragraph”, ο επιλογέας του στοιχείου θα είναι #paragraph.
Η διαφορά του class selector σε σχέση με τον id selector είναι ότι το στυλ ορίζεται σε παραπάνω από ένα στοιχεία. Τα στοιχεία αυτά χρησιμοποιούν την ιδιότητα class με την ίδια τιμή το καθένα. Π.χ. αν έχουμε ένα σύνολο από φωτογραφίες στις οποίες θέλουμε να ορίσουμε ένα συγκεκριμένο στυλ, αντί να έχουμε ξεχωριστό id για την καθεμία και να γράφουμε τους πολλούς κανόνες CSS για κάθε id ξεχωριστά, μπορούμε να δηλώσουμε ότι ανήκουν στην ίδια κλάση (π.χ. class='image') και με έναν κανόνα να χρησιμοποιήσουμε το ίδιο στυλ σε όλες. Ο class selector αντί για #, παίρνει μπροστά την τελεία. Στο παράδειγμά μας, θα είναι ο .image.
Μπορούμε, επίσης, να συνδυάσουμε ένα html στοιχείο με το id ή την κλάση του. Π.χ. το p.bold θα εφαρμόσει το στυλ που θέλουμε μόνο στις παραγράφουμε με κλάση bold και όχι σε τυχόν άλλα στοιχεία της ίδιας κλάσης.
Οι δηλώσεις αποτελούνται από ζεύγη property – value. Το property είναι το χαρακτηριστικό που θέλουμε να αλλάξουμε (π.χ. color, font-weight, width κλπ) και το value η τιμή που θέλουμε να δώσουμε στο κάθε χαρακτηριστικό. Η σύνταξη ενός κανόνα CSS έχει τη γενική μορφή:
selector { property1: value1; property2:value }
Για να είναι ο κώδικας πιο ευανάγνωστος, μπορούμε να γράψουμε το παραπάνω σε περισσότερες γραμμές:
selector {
property1: value1;
property2: value2;
}
Επίσης, υπάρχει η δυνατότητα προσθήκης σχολίων που μπορεί να μας βοηθήσουν στην επεξεργασία του κώδικα σε μεταγενέστερη ημερομήνια. Κάθε σχόλιο ξεκινάει με /* και τελειώνει */. Π.χ.
/* Εισαγωγή σχολίου */
selector {
property1: value1;
property2: value2;
}