Η σύνταξη της CSS περιλαμβάνει έναν επιλογέα (selector) και ένα μπλοκ δηλώσεων (declaration block) για κάθε κανόνα CSS.
Ο επιλογέας (selector) καθορίζει τα στοιχεία στα οποία θα εφαρμοστούν οι δηλώσεις. Μπορεί να πρόκειται για το όνομα ενός στοιχείου HTML, ένα αναγνωριστικό (id), μια κλάση ή μια σύνθετη επιλογή (π.χ. συγκεκριμένο παιδί ενός στοιχείου).
Το μπλοκ δηλώσεων (declaration block) περικλείεται με αγκύλες {} και περιέχει μια σειρά από δηλώσεις. Κάθε δήλωση αποτελείται από ένα όνομα ιδιότητας (property) και μια τιμή (value). Οι δηλώσεις χωρίζονται μεταξύ τους με ένα ελληνικό ερωτηματικό (;).
Παρακάτω έχουμε ένα αναλυτικό παράδειγμα με τη σύνταξη της CSS:
/* Ορισμός του επιλογέα */
h1 {
/* Μπλοκ δηλώσεων */
color: blue; /* Δήλωση: ιδιότητα - τιμή */
font-size: 24px;
text-align: center;
}
/* Επιπλέον επιλογέας */
p {
color: red;
font-size: 16px;
}
/* Σύνθετος επιλογέας */
.container div {
background-color: gray;
}
/* Πολλές δηλώσεις */
a {
font-weight: bold;
text-decoration: none;
color: purple;
}
Στο παραπάνω παράδειγμα, ο ορισμός του επιλογέα h1 σημαίνει ότι όλες οι ετικέτες <h1> στο HTML θα έχουν τις ακόλουθες δηλώσεις: χρώμα κειμένου μπλε, μέγεθος γραμματοσειράς 24px και στοίχιση κειμένου στο κέντρο.
Ο επιλογέας p καθορίζει ότι όλες οι ετικέτες <p> θα έχουν το χρώμα κειμένου κόκκινο και μέγεθος γραμματοσειράς 16px.
Ο σύνθετος επιλογέας .container div επηρεάζει όλα τα στοιχεία <div> που βρίσκονται μέσα σε ένα στοιχείο με κλάση “container” και ορίζει ότι θα έχουν φόντο γκρι.
Τέλος, ο επιλογέας a ορίζει ότι όλες οι ετικέτες <a> (συνδέσμους) θα έχουν έντονη γραφή, χωρίς διακοσμητική γραμμή και μωβ χρώμα.
Αυτό είναι ένα απλό παράδειγμα για να επιδείξει τη χρήση της σύνταξης της CSS. Μπορείτε να προσαρμόσετε τις δηλώσεις στυλ σύμφωνα με τις ανάγκες σας και την επιθυμητή εμφάνιση των ιστοσελίδων σας.