What is CSS?

CSS  είναι η συντομογραφία του Cascading Style Sheet και είναι η κύρια γλώσσα που χρησιμοποιείται για την εμφάνιση και την μορφοποίηση των ιστοσελίδων στο ίντερνετ και των εγγράφων σήμανσης (π.χ. HTML και XML) γενικά.

Μια γλώσσα σήμανσης όπως η HTML αρχικά σχεδιάστηκε για την παροχή πληροφοριών σχετικά με την μορφοποίηση και την εμφάνιση της, αλλά σύντομα έγινε σαφές πως θα ήταν πιο λογικό να τα διαχωρήσει αυτά σε δύο διαφορετικά επίπεδα: Στο περιεχόμενο του εγγράφου (Document Content) και στην παρουσίαση του εγγράφου (Document Presentation), με την CSS να αναπληρώνει το κενό του δεύτερου. Για αυτό ιστορικά η HTML έχει εττικέτες (tags) όπως το font, με μοναδικό σκοπό να προσαρμόσει την οικογένεια, το χρώμα και το μέγεθος μιας γραμματοσειράς, μια εργασία που ολοκληρωτικά γίνεται από την CSS. Αυτό επιτρέπει στον προγραμματιστή να χρησιμοποιεί ξανά και ξανά κανόνες μορφοποίησης σε πολλά σημεία μέσα στο ίδιο έγγραφο αλλά και σε πολλά έγγραφα ταυτόχρονα. Δείτε ένα παράδειγμα για να αποδείξω τον ισχυρισμό μου, και μην ανησυχείτε εάν δεν είναι απόλυτα ξεκάθαρο σε εσάς τι ακριβώς κάνει καθώς όλες του οι πτυχές θα επεξηγηθούν κατά την διάρκει αυτού του οδήγου εκμάθησης:

Παλιότερος τρόπος μορφοποίησης κειμένου, με την χρήση μόνο της HMTL:

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

Ένας πιο μοντέρνος τρόπος προσέγγισης με CSS:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Προσέξτε πως απλά ξαναχρησιμοποιώ το ίδιο σετ κανόνων σε πολλαπλές ετικέτες της HTML. Αυτό είναι ήδη ένα πλεονέκτημα όταν χρησιμοποιείται τρεις φορές, όπως στο παράδειγμα, αλλά δεν τελειώνει εκεί - βάλτε τον κώδικα CSS σε ένα εξωτερικό αρχείο (περισσότερα γι'αυτό αργότερα) και μπορείτε να χρησιμοποιείτε τους ίδιους κανόνες μορφοποίησης σε ολόκληρο το website σας. Και αν αποφασίζατε ότι το επισημασμένο κείμενο (highlight) θα έπρεπε να είναι κόκκινο αντί για μπλε ; Με την πρώτη προσέγγιση θα έπρεπε να επεξεργαστούμε μια μια τις ετικέτες που περιέχεται οπουδήποτε το έχουμε χρησιμοποιήσει, ενώ με την CSS απλά αλλάζουμε την εντολή ".highlight".

Σύνοψη

Η CSS σας επιτρέπει να εφαρμόζετε εύκολα κανόνες μορφοποίησης και διάταξης σε στοιχεία (elements) της HTML και μετά να ξαναχρησιμοποιείτε αυτούς τους κανόνες σε πολλά στοιχεία ακόμα και σε σελίδες. Σε αυτήν την παρουσίαση, είδαμε κάποιον κώδικα CSS, αλλά δεν αναλύσαμε το πως λειτουργεί και γιατί εμφανίζεται έτσι - αυτό θα είναι το αντικείμενο που θα μας απασχολήσει στα παρακάτω κεφάλαια, όπου θα ξεκινήσουμε από το μηδέν και θα τα εξηγήσουμε όλα λεπτομερώς.