Τρόποι εισαγωγής CSS
Υπάρχουν τρεις τρόποι εισαγωγής CSS. Είναι τα:
- inline styles
- internal style sheets
- external style sheets
Inline Style
Γίνεται χρήση της ιδιότητας style για τον καθορισμό του στυλ συγκεκριμένου στοιχείου. Π.χ. για να κάνουμε έντονη τη γραφή σε μία παράγραφο μπορούμε να γράψουμε:
<p style="font-weight:bold; color:red;">Inline style για χρήση έντονης γραφής και χαρακτήρων με κόκκινο χρώμα στην παράγραφο.</p>
Χρήση inline style
Μερικές φορές είναι βολικός ο συγκεκριμένος τρόπος εισαγωγής, ωστόσο δεν ενδείκνυται προς χρήση λόγω του ότι υπάρχει πιθανότητα να γίνει δυσανάγνωστος ο κώδικας με τη χρήση html και css μαζί.
Internal Style Sheet
Χρησιμοποιείται μέσα στο αρχείο html και δηλώνεται μέσα στο <head>. Το παραπάνω παράδειγμα, θα μπορούσε να γραφεί ως εξής:
<head>
<style type="text/css">
p#test {
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<p id="test">Internal stylesheet για χρήση έντονης γραφής και χαρακτήρων με κόκκινο χρώμα στην παράγραφο.</p>
</body>
External Style Sheet
Ο ιδανικότερος τρόπος εισαγωγής κανόνων CSS, αφού είναι αρκετές οι δηλώσεις που πρέπει να γράφει κανείς για δημιουργήσει την επιθυμητή διάταξη σε μία σελίδα. Οι δηλώσεις γίνονται όπως και στο internal stylesheet με τη διαφορά ότι είναι γραμμένες σε ξεχωριστό εξωτερικό αρχείο με κατάληξη .css. Έστω ότι δημιουργούμε το αρχείο styles.css και γράφουμε μέσα τον παραπάνω κανόνα. Τότε για να συνδέσουμε το αρχείο html με το styles.css γράφουμε:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<p id="test">External stylesheet για χρήση έντονης γραφής και χαρακτήρων με κόκκινο χρώμα στην παράγραφο.</p>
</body>