Σήμερα θα κάνουμε ένα tutorial πάνω στα CSS.Ένα tutorial που θα ξεκινάει τα CSS από μηδενική βάση.Αυτό το βοήθημα είναι αποκλειστικά για αρχάριους στα CSS και σκοπό έχει να μυήσει τους αρχάριους στον κόσμο των Cascading Style Sheets…Το μόνο που χρειάζεται για να ακολουθήσετε το tutorial αυτό είναι να έχετε μία μικρή γνώση html..Χωρίς πολλά πολλά,ξεκινάμε άμεσα το css tutorial 🙂 🙂
Μία μικρή αναφορά στο παρελθόν.Εποχή πριν τα CSS.
Θα ξεκινήσουμε με μία μικρή αναφορά στο παρελθόν γιατί από κει ξεκινάνε όλα..Πριν από κάποια χρόνια οι web designers όταν έπρεπε να δημιουργήσουν μία ιστοσελίδα χρησιμοποιούσαν τη γνωστή σε όλους μας html.Για παράδειγμα, όταν είχαν να δημιουργήσουν μία παράγραφο έγραφαν :
[html]</p>
<p style="text-align: justify">
Τα περιεχόμενα της παραγράφου πάνε εδώ..
</p>
[/html]
Όταν θέλανε να δημιουργήσουν τίτλους,επικεφαλίδες,υποκεφαλίδες έγραφαν:
[html]
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
κλπ.
[/html]
Όλα καλά μέχρι εδώ.Τι γινόταν όμως όταν χρειαζόταν να δώσουν κάποιο στυλ σε ένα html στοιχείο από τα παραπάνω;Για παράδειγμα τι γινόταν εάν ήθελαν να έχουν ένα τίτλο με έντονα (bold);Για να λυθεί αυτό έγραφαν:
[html]
<h1><b>This is heading 1</b></h1>
[/html]
Οτιδήποτε βρισκόταν ανάμεσα στα ‘b’ tags γινόταν bold-δηλαδή έντονο.Φυσικά αντίστοιχες ενέργειες συνέβαιναν εάν ήθελαν να αλλάξουν τη γραμματοσειρά σε μια παράγραφο ή ακόμα και μία λέξη ,να δώσουν διαφορετικό χρώμα σε μία λέξη και πολλά άλλα..Και ποιο είναι το πρόβλημα με όλα αυτά;
Ποιο είναι το βασικό πρόβλημα που ανάγκασε τη δημιουργία των CSS κανόνων;
Το βασικό πρόβλημα που υπήρξε ήταν το εξής…Φανταστείτε να έχουμε δημιουργήσει μία ιστοσελίδα η οποία να αποτελείται από πολλές σελίδες.Κάθε σελίδα έχει 3-5 παραγράφους και πρέπει οι δύο πρώτες παράγραφοι να έχουν διαφορετικό στυλ από τις δύο επόμενες,η τελευταία παράγραφος να έχει κάποια άλλα χαρακτηριστικά και όλα αυτά να επαναλαμβάνονται μέσα στις υπόλοιπες σελίδες της ιστοσελίδας μας.Καταλαβαίνετε τι θα συμβεί;;Θα πρέπει σε κάθε παράγραφο,σε κάθε σελίδα όλες τις πληροφορίες για το στυλ της κάθε παραγράφου να τις επαναλαμβάνουμε σε κάθε σελίδα.Αυτό είναι απλά…ΆΒΟΛΟ..
Η λύση του προβλήματος με CSS
Το παραπάνω πρόβλημα λύθηκε όταν πριν λίγα χρόνια το World Wide Web Consortium ανακοίνωσε ότι όλες οι πληροφορίες στυλ και μορφοποίησης θα τοποθετούνται σε ένα εξωτερικό αρχείο το οποίο θα έχει κατάληξη “.css” και θα μπορούμε να το καλούμε μέσα στα head tags της ιστοσελίδας μας.Δηλαδή Εάν έχουμε την ιστοσελίδα μας, για παράδειγμα index.html και το αρχείο styles.css στον ίδιο φάκελο τότε ανάμεσα στα head tags της σελίδας καλούμε ως εξής το CSS αρχείο :
[html]
<head>
….
<link rel="stylesheet" href="styles.css"/>
…
</head
[/html]
Και οτιδήποτε έχετε γράψει στο αρχείο αυτό εφαρμόζεται στα στην ιστοσελίδα σας.
Σύνταξη CSS.
Αφού είδαμε και πώς καλούμε σε ένα html αρχείο τα CSS μπορούμε να δούμε λίγο τη σύνταξη.
Τα CSS αρχεία μπορούμε να τα δημιουργήσουμε με το notepad αλλά προσωπικά πιστεύω ότι καλό είναι να χρησιμοποιούμε πάντα ένα html editor γιατί μπορούμε να βρίσκουμε τα λάθη μας γρηγορότερα και όχι μόνο.
Η βασική σύνταξη είναι η εξής:
Απ ότι βλέπετε στην παραπάνω εικόνα ,ένα block κώδικα CSS ξεκινάει με τον επιλογέα όπου επιλέγει σε ποιο html element θα εφαρμόσουμε τις εντολές CSS.Στη δική μας περίπτωση έχουμε επιλέξει να εφαρμόσουμε τις CSS εντολές μας σε όλα τα ‘p’ html στοιχεία της σελίδας μας δηλαδή στις παραγράφους.Βλέπουμε ότι όλες οι εντολές CSS βρίσκονται ανάμεσα σε αγκύλες και κάθε εντολή ακολουθείται από το ‘;’ το οποίο επισημαίνει το τέλος της κάθε εντολής.
Όσον αφορά τώρα τις ιδιότητες και τις τιμές που παίρνουν αυτές η αλήθεια είναι ότι υπάρχουν πάρα πολλές ιδιότητες και δεν γίνεται να τις αναφέρουμε όλες..Στην εικόνα βλέπουμε ότι η παράγραφοι μας θα έχουν χρώμα γραμματοσειράς “#dddddd” και η γραμματοσειρά θα είναι της οικογενείας “Kalinga”.Ας το δούμε σε παράδειγμα.
Πίνακας με τις CSS ιδιότητες
Δείτε εδώ ένα πίνακα με τις CSS properties
Πρώτο Παράδειγμα CSS
Θα δημιουργήσουμε δύο παραγράφους και εν συνεχεία θα εφαρμόσουμε css πάνω σε αυτές.O html κώδικας είναι:
[html]
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla orci, vehicula ac ultrices veng
risus vel risus consectetur sodales. Phasellus commodo,
velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc sit amet ante. Quisque
pellentesque ligula vel massa placerat eget malesuada ipsum feugiat. Suspendisse consectetur adipiscing
velit in dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna. Mauris eget erat at lacus mattis.
</p>
[/html]
Ας το δούμε λίγο χωρίς css.
Τώρα θα εφαρμόσουμε CSS.Στο αρχείο “styles.css” γράφουμε:
[css]
p{
/*Χρώμα γραμματοσειράς*/
color:#555555;
/*Ορισμός γραμματοσειράς*/
font-family:Kalinga;
/*Μέγεθος γραμματοσειράς*/
font-size:14px;
/*Πόσο έντονη γραμματοσειρά.Τιμές 100-900*/
font-weight:800;}
[/css]
Έχουμε γράψει και σχόλια στον κώδικά μας.Ας τρέξουμε λίγο τη σελίδα μας..Θα δούμε στον browser το εξής:
Είδατε ποσό διαφορετικό φαίνεται το αποτέλεσμα..Θέλετε να δώσουμε και ένα συγκεκριμένο πλάτος στην κάθε παράγραφο και να κάνουμε το κείμενο να είναι aligned αριστερά;Ας προσθέσουμε 2 εντολές στο αρχείο CSS.
[css highlight=”6,7″]
p{
color:#555555;
font-family:Kalinga;
font-size:14px;
font-weight:800;
width:400px;
text-align:left;}
[/css]
Με τις τελευταίες δύο εντολές κάνουμε τις παραγράφους μας να είναι 400px σε πλάτος και η στοίχιση του κειμένου είναι στα αριστερά.
Με το ίδιο τρόπο ακριβώς μπορούμε να δώσουμε στυλ και σε άλλα html στοιχεία,όπως divs, img, a,h1,h2…h6,p και πολλά άλλα.
Δεύτερο παράδειγμα CSS-Χρήση του id
Ας φανταστούμε το εξής.Έστω ότι θέλουμε να δώσουμε διαφορετικά στυλ σε ίδια html στοιχεία σε μία σελίδα.Δηλαδή εάν έχουμε 5 παραγράφους και εμείς θέλουμε στη μία να εφαρμόζεται διαφορετικό css στυλ από ότι στις υπόλοιπες.Τι κάνουμε τότε…;Τότε θα αναφερθούμε στο id του συγκεκριμένου html στοιχείου.Τι είναι το ‘id΄ ενός html στοιχείου:
Κάθε html στοιχείο εκτός από το html tag που το αντιπροσωπεύει έχει και κάποια “χαρακτηριστικά” τα οποία ονομάζονται html attributes.Κάποια από αυτά είναι:”id”, “class”, “title”, “alt” κλπ..Στα CSS πολλές φορές χρησιμοποιούμε το id ενός στοιχείου ώστε να ξέρουμε που θα εφαρμοστεί το στυλ που ορίζουμε .
Ας κάνουμε ένα δεύτερο παράδειγμα.Θα έχουμε 3 παραγράφους.Στις δύο θα εφαρμόσουμε CSS στυλ για τις παραγράφους γενικότερα,όπως πάνω, ενώ στη τρίτη θα χρησιμοποιήσουμε το id της και θα τις εφαρμόσουμε στυλ που θα ορίζει κόκκινη γραμματοσειρά.Το id το ονομάζουμε όπως θέλουμε.
Ας δούμε λίγο τον html κώδικα:
[html]
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla orci, vehicula ac ultrices veng
risus vel risus consectetur sodales. Phasellus commodo,
velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc sit amet ante. Quisque
pellentesque ligula vel massa placerat eget malesuada ipsum feugiat. Suspendisse consectetur adipiscing
velit in dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna. Mauris eget erat at lacus mattis.
</p>
<p id="diffPar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.
</p>
[/html]
Ας δούμε το CSS τώρα που θα εφαρμόσουμε και ύστερα θα σας εξηγήσουμε κάτι πολύ σημαντικό…!
[css]
p{
color:#555555;
font-family:Kalinga;
font-size:14px;
font-weight:800;
}
/*Το id εδώ είναι ίδιο με αυτό που ορίζουμε στον html κώδικα.Το id στα CSS ορίζεται ξεκινώντας πάντα με "#" */
#diffPar{
color:red;
}
[/css]
Ας δούμε ένα στιγμιότυπο..
Παρατηρείτε ότι η τελευταία παράγραφος έχει κόκκινο χρώμα;;;Άρα βλέπουμε πώς λειτουργεί το id στην εφαρμογή των CSS.Κάπου εδώ πρέπει να τονίσουμε κάτι πολύ σημαντικό!!!!
Σημαντική παρατήρηση!!!
Παρατηρήστε το εξής:Η παράγραφος με τα κόκκινα γράμματα, δεν είναι ολόιδια κατά τα άλλα με τις άλλες δύο παραγράφους;To μόνο που άλλαξε ήταν το χρώμα της γραμματοσειράς.Άρα λοιπόν η παράγραφος με το id=”diffPar” ουσιαστικά “κληρονομεί” όλα το css στυλ που εφαρμόζουμε στο στοιχείο ‘p’ και το μόνο που αλλάζει είναι το χρώμα γραμματοσειράς..Άρα λοιπόν βγάζουμε το εξής συμπέρασμα.Εάν δημιουργήσουμε css κώδικα για κάποιο html στοιχείο όπως p,h1,h2,a κλπ τότε όλα τα στοιχεία του ίδιου τύπου κληρονομούν αυτό το CSS.Έτσι έγινε και με το παραπάνω παράδειγμά μας.Με τη χρήση του id ναι μεν κληρονομήσαμε το css που είχε οριστεί για την παράγραφο γενικότερα αλλά αλλάξαμε το χρώμα της γραμματοσειράς..Να το θυμάστε αυτό με την κληρονομικότητα.Είναι πολύ σημαντικό.
Τρίτο παράδειγμα CSS.Χρήση του class.
Όπως είπαμε παραπάνω κάθε html στοιχείο έχει κάποια html attibutes.Ένα από αυτά είναι και το “class”.To class το χρησιμοποιούμε στα CSS με τον ίδιο τρόπο που χρησιμοποιούμε το “id” εκτός από μία μεγάλη διαφορά..Με το “id” μπορούμε να εφαρμόσουμε στυλ μόνο σε ΕΝΑ html στοιχείο, σε αυτό που θα έχει το αντίστοιχο id.Δεν γίνεται 2 στοιχεία να έχουν το ίδιο id…Με το “class” μπορούμε να εφαρμόσουμε CSS στυλ σε περισσότερα από ένα html στοιχεία..
Ας δούμε ένα παράδειγμα.Θα έχουμε 3 παραγράφους.Θα ορίσω css στυλ για μία παράγραφο που θα έχει ένα id και για 2 παραγράφους που θα έχουν μία κοινή κλάση (class).
Ας δούμε λίγο τον html κώδικα.
[html]
<p class="classPar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.
</p>
<p class="classPar" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla orci, vehicula ac ultrices veng risus vel risus consectetur sodales. Phasellus commodo,
velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc sit amet ante. Quisque
pellentesque ligula vel massa placerat eget malesuada ipsum feugiat. Suspendisse consectetur adipiscing
velit in dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna. Mauris eget erat at lacus mattis.
</p>
<p id="diffPar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.
</p>
[/html]
Ας δούμε και το css….
[css]
/*Η παρακάτω εντολή εφαρμόζεται στο html στοιχείο με id=diffPar*/
#diffPar{
color:red;
}
/*Oι παρακάτω γραμμές κώδικα εφαρμόζονται στα στοιχεία που έχουν κλάση "classPar".Στα CSS η κλάση δηλώνεται πάντα με την ‘.’*/
.classPar{
color:blue;
font-family:Calibri;
font-size:14px;
/*Το πλάτος θα είναι 500px*/
width:500px;
}
[/css]
Ας δούμε ένα στιγμιότυπο!!
Επίλογος CSS Tutorial
Στο σημερινό css tutorial είδαμε αρκετά πραγματάκια που θα βοηθήσουν ακόμα και τους πολύ άπειρους να ξεκινήσουν από κάπου.Θα κάνουμε εννοείται και άλλα tutorials σαν και αυτό ,για πολύ αρχάριους..
Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!
Φιλε Άκη θα ακολουθησω πιστά τις οδηγίες σου κ πιστεύω να τα καταφερω κι εγω να φτιάξω την δική μου ιστοσελίδα όπως εσύ..
Συνέχισε Φίλε…Ωραία η δουλειά σου….
Βοηθάει πολύ