Εισαγωγή στα CSS (Tutorial)

CSS… ακούγεται σαν κανένα τρομερό οπλικό σύστημα του στρατού. Βέβαια τι δουλειά έχει τέτοιο tutorial μέσα στο CPUsers και όπως σωστά μαντέψατε τα CSS είναι κάτι από τον κόσμο τον υπολογιστών. Μπορεί να μην είναι τρομερό οπλικό σύστημα αλλά σίγουρα είναι τρομερός βοηθός και σύμμαχος στην κατασκευή σύγχρονων, όμορφων και πάνω από όλα καλά οργανωμένων ιστοσελίδων.

Ας αφήσουμε όμως τα πολλά λόγια και ας μπούμε στο ψητό. Τα CSS (που σημαίνει Cascading Style Sheets) είναι μια σύγχρονη γλώσσα που συμμετέχει στην κατασκευή ιστοσελίδων. Όταν λέμε γλώσσα μην τρομάζετε και νομίζετε ότι μιλάω για καμιά κανονική γλώσσα προγραμματισμού. Πρόκειται απλά για να πακέτο απλών και πολύ κατανοητών εντολών που αναλαμβάνουν να ντύσουνε τις ιστοσελίδες μας με χρώματα, πλάγια γράμματα, εικόνες και ότι άλλο φανταστείτε που έχει να κάνει με το τι βλέπουμε σε μια ιστοσελίδα. Άρα…CSS = γλώσσα (ή πακέτο απλών εντολών) που αναλαμβάνει να ντύσει τη σελίδα μας στο δικό μας γούστο. Για να σας δώσω μια ιδέα, αρκεί να γράψετε την (ας πούμε) εντολή “background-color:red” για να δώσετε στην ιστοσελίδα σας ένα κόκκινο φόντο. Τόσο απλές και κατανοητές είναι αυτές οι «εντολές»!

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

Για να διαβάζετε αυτή τη γραμμή μάλλον τηρείτε τα minimum requirements και οι επιλογές σας είναι 2:

• Πάτε στην επόμενη σελίδα που αρχίζει το tutorial γιατί σε αυτή τη σελίδα βιώνετε την τρομερή πολυλογία μου!
• Παραμένετε σε αυτή τη σελίδα αφού νιώθω το χρέος να σας πρήξω λίγο ακόμη γιατί πρέπει να μάθετε και να χρησιμοποιήσετε τα CSS αν πρόκειται να φτιάξετε ιστοσελίδες.

Είστε ακόμη σε αυτή τη σελίδα άρα ας δούμε τα πλεονεκτήματα των CSS. Έστω ότι έχετε μια σελίδα με 10 πίνακες όπου ο καθένας έχει borders με συγκεκριμένο μέγεθος, χρώμα, στυλ κτλ. Να τονίσω ότι και οι 10 πίνακες έχουν ίδιες ακριβώς ιδιότητες ως προς την εμφάνιση τους. Άρα τι κάνετε σε αυτή την περίπτωση; Φτιάχνετε και τους 10 πίνακες και μετά γράφετε τις εντολές για να ορίσετε τα borders και τις ιδιότητες του πρώτου. Επειδή όμως ο χρόνος είναι χρήμα, κάνετε και ένα copy paste τις εντολές αυτές και στους άλλους 9 πίνακες και έγινε η δουλειά. Το θέμα είναι ότι είστε αναποφάσιστοι ως προς τα χρώματα και το στυλ και θέλετε να δοκιμάσετε διάφορα. Εδώ έρχονται τα προβλήματα γιατί κάθε φορά πρέπει να αλλάζετε τις εντολές από όλους τους πίνακες (οι πίνακες έχουν όλοι τις ίδιες ιδιότητες). Δεν θα ήταν ωραία ο κάθε πίνακας να έχει property που να λέει «Φίλε μου browser κοίτα σε εκείνο το μέρος και ντύσε με ανάλογα». Άρα έχεις ένα μέρος κοινό με εντολές σχετικά με το «ντύσιμο» του πίνακα και όλοι οι πίνακες «τραβάνε» από αυτό το μέρος πληροφορίες για το πώς να εμφανιστούν. Άρα τώρα που θέλετε να κάνετε δοκιμές με τα χρώματα, αρκεί να αλλάξετε τα χρώματα μόνο στο ένα κοινό μέρος και όλοι οι πίνακες αυτόματα θα πάρουν αυτό το χρώμα! Στην περίπτωση μας έχουμε 4 πίνακες. Φανταστείτε να έχουμε ένα site με πολλές ιστοσελίδες, που έχουν πολλούς πίνακες, κείμενο κτλ και όλα αυτά πρέπει να τα αλλάξετε με το χέρι. Μιλάμε για διαδικασία πολύ χρονοβόρα. Καλά δεν θα ήταν όλα αυτά τα στοιχεία σε κάθε σελίδα που μοιράζονται κοινές ιδιότητες, να τραβάνε τις πληροφορίες για αυτές τις ιδιότητες από ένα κοινό μέρος και εσείς όταν θέλετε να αλλάξετε κάτι, να αλλάζετε μόνο εκείνο το μέρος; Αυτά ακριβώς μπορούν να κάνουν τα CSS

Για την ακρίβεια τα CSS σας γλυτώνουν από κόπο και χρόνο όταν κάνετε το design μιας ιστοσελίδας, σας δίνει μια πολύ καλύτερα οργανωμένη ιστοσελίδα (σε επίπεδο κώδικα), σας δίνει τη δυνατότητα να κάνετε εύκολα αλλαγές στην ιστοσελίδα αφού πειράζετε κάθε φορά ένα συγκεκριμένο μέρος με ιδιότητες όπως τις λέμε (οι εντολές που ανέφερα πριν) των CSS και γενικά σταματάνε όλοι οι μπελάδες σας όσο έχει να κάνει με τον τομέα της εμφάνισης μια ιστοσελίδας!

Τώρα ας πάμε στην επόμενη σελίδα και ας μπούμε επιτέλους στο ψητό!


Επόμενη σελίδα: Ο πρώτος μας κώδικας CSS! - Επιλογέας κλάσεων