Τι είναι CSS
CSS σημαίνει Cascading Style Sheets και είναι στυλ που μπορούμε να ορίσουμε για τις HTML σελίδες. Με τα στυλ ορίζουμε το χρώμα, το μέγεθος της γραμματοσειράς, την γραφή (bold, underline, κτλ.), το χρώμα του φοντου, τις διαστάσεις, την τιμή padding και μια σειρά από άλλες ιδιότητες των στοιχείων μιας ιστοσελίδας.
Τι είναι στοιχείο της σελίδας;
Στοιχείο είναι ένα οποιοδήποτε μέρος της HTML σελίδας, όπως: μια εικόνα, μια παράγραφος, μια λίστα, μια επιλογή μιας λίστας, μια επικεφαλίδα, ένα κείμενο ή μια λέξη που βρίσκεται μέσα σε ετικέτες διαμόρφωσης κτλ. Την λέξη στοιχείο θα την συναντήσετε πολύ συχνά σ' αυτήν την Σειρά Μαθημάτων, καθώς τα στυλ CSS εφαρμόζονται στα στοιχεία της σελίδας.
Γιατί να χρησιμοποιήσουμε CSS;
Η χρήση CSS κάνει πολύ εύκολη την διαχείριση της εμφάνισης των σελίδων μας. Για παράδειγμα, αν σε μια ιστοσελίδα, χωρίς χρήση CSS, θέλω να αλλάξω το χρώμα του φόντου σε όλες τις επικεφαλίδες όλων των πινάκων θα πρέπει να πηγαίνω σε κάθε μια επικεφαλίδα και να ορίζω το χρώμα που επιθυμώ αλλάζοντας κάθε φορά την τιμή της ιδιότητας bgcolor των ετικετών <th>. Ενώ σε μια σελίδα με χρήση CSS θα χρειαστεί να αλλάξω το χρώμα αυτό μια μόνο φορά και αυτό θα εφαρμοστεί για όλες τις επικεφαλίδες των πινάκων της σελίδας. Παρόμοια μπορώ να ορίσω στυλ, όχι μόνο για στοιχεία μιας σελίδας, αλλά για στοιχεία όλων των σελίδων του Site μου.
Φανταστείτε να μπορείτε να αλλάζετε το στυλ του οριζόντιου μενού του Site σας, το οποίο επαναλαμβάνεται σε όλες τις σελίδες, με μόνο μια κίνηση. Δεν είναι φανταστικό;
Σήμερα υπάρχουν πολύ λίγες ιστοσελίδες που δεν χρησιμοποιούν CSS. Η χρήση των στυλ κάνει την ζωή των Web designers πολύ πιο εύκολη δημιουργώντας έτσι Sites τα οποία μπορούν να διαχειρίζονται εύκολα και γρήγορα
Φανταστείτε να μπορείτε να αλλάζετε το στυλ του οριζόντιου μενού του Site σας, το οποίο επαναλαμβάνεται σε όλες τις σελίδες, με μόνο μια κίνηση. Δεν είναι φανταστικό;
Σήμερα υπάρχουν πολύ λίγες ιστοσελίδες που δεν χρησιμοποιούν CSS. Η χρήση των στυλ κάνει την ζωή των Web designers πολύ πιο εύκολη δημιουργώντας έτσι Sites τα οποία μπορούν να διαχειρίζονται εύκολα και γρήγορα
Δείτε πως δουλεύει η CSS
Δείτε ένα μικρό demo πως μπορούμε να εμφανίσουμε την ίδια σελίδα χρησιμοποιώντας διαφορετικά CSS στυλ
Δοκίμασε το
Δοκίμασε το