Ένας τρόπος για να προσθέσετε CSS σε ένα έγγραφο HTML είναι μέσω της ενσωμάτωσης CSS (inline CSS). Αυτό σημαίνει ότι μπορείτε να προσθέσετε το CSS απευθείας μέσα στις ετικέτες HTML του εγγράφου.
Για παράδειγμα, μπορείτε να χρησιμοποιήσετε την ετικέτα <style> και να γράψετε τον CSS κώδικα μέσα σε αυτήν. Ο CSS κώδικας που ορίζετε εδώ θα ισχύει μόνο για το συγκεκριμένο έγγραφο HTML.
Ένα παράδειγμα ενσωμάτωσης CSS μέσα σε ένα έγγραφο HTML μπορεί να είναι το εξής:
<!DOCTYPE html> <html> <head> <title>Ενσωματωμένο CSS</title> </head> <body> <!-- Αυτό είναι μια κεφαλίδα επιπέδου 1 --> <h1 style="color: #333; text-align: center;">Καλώς ήρθατε!</h1> <!-- Αυτό είναι μια παράγραφος με κείμενο --> <p style="color: #666; line-height: 1.5;">Αυτό είναι ένα παράδειγμα ενσωματωμένου CSS.</p> </body> </html>
Στο παραπάνω παράδειγμα, ο CSS κώδικας ενσωματώνεται μέσα στις ετικέτες <h1> και <p>. Χρησιμοποιείται η ιδιότητα style και ο CSS κώδικας γράφεται μέσα στα εισαγωγικά. Ο CSS κώδικας που ορίζετε με αυτόν τον τρόπο θα εφαρμοστεί μόνο στα αντίστοιχα στοιχεία HTML του εγγράφου.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Ενσωματωμένο CSS</title>
<style>
/* Ενσωματωμένο CSS για το body */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
/* Ενσωματωμένο CSS για τον τίτλο h1 */
h1 {
color: #333;
text-align: center;
}
/* Ενσωματωμένο CSS για το παράγραφο p */
p {
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Καλώς ήρθατε!</h1>
<p>Αυτό είναι ένα παράδειγμα ενσωματωμένου CSS.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ο CSS κώδικας βρίσκεται μέσα στην ετικέτα <style> εντός της ενότητας <head> του HTML αρχείου. Οι κανόνες CSS που ορίζονται εδώ θα εφαρμοστούν στο σύνολο του εγγράφου HTML, όπως η χρωματική παλέτα για το κείμενο, η ευθυγράμμιση και το περιθώριο.
Η εξωτερική χρήση CSS περιλαμβάνει τη δημιουργία ενός ξεχωριστού αρχείου CSS με κανόνες, το οποίο στη συνέχεια συνδέεται με το αρχείο HTML χρησιμοποιώντας την ετικέτα <link>. Οι κανόνες CSS που ορίζονται στο εξωτερικό αρχείο θα εφαρμοστούν σε όλες τις σελίδες που συνδέονται με αυτό το αρχείο.
Προκειμένου να δημιουργήσουμε ένα αναλυτικό παράδειγμα εξωτερικού CSS, ακολουθούμε τα παρακάτω βήματα:
- Δημιουργούμε ένα νέο αρχείο με κατάληξη “.css” (π.χ., styles.css) στον ίδιο φάκελο με το αρχείο HTML μας.
- Ανοίγουμε το αρχείο CSS και ξεκινάμε να συνθέτουμε τους κανόνες CSS μέσα σε αυτό.
Για παράδειγμα, ας υποθέσουμε ότι θέλουμε να ορίσουμε κάποια στιλ για τα παραγράφους (p) και τα κεφαλαία (h1). Μπορούμε να το πετύχουμε με τον εξής τρόπο:
/* Αρχείο: styles.css */
/* Κανόνες για τους παραγράφους */
p {
color: #333; /* Χρώμα κειμένου */
line-height: 1.5; /* Ύψος γραμμής */
}
/* Κανόνες για τα κεφαλαία */
h1 {
color: #666; /* Χρώμα κειμένου */
text-align: center; /* Ευθυγράμμιση κειμένου */
}
Στο παραπάνω παράδειγμα, δημιουργήσαμε δύο κανόνες CSS. Ο πρώτος κανόνας εφαρμόζεται σε όλα τα παραγράφους (p) και ορίζει το χρώμα του κειμένου και το ύψος της γραμμής. Ο δεύτερος κανόνας εφαρμόζεται σε όλα τα κεφαλαία (h1) και ορίζει το χρώμα του κειμένου και την ευθυγρά
μμισή του στο κέντρο.
Αφού δημιουργήσουμε το αρχείο CSS, πρέπει να συνδέσουμε το αρχείο με το HTML μας. Για να το κάνουμε αυτό, προσθέτουμε την ετικέτα <link> στο <head> του αρχείου HTML μας:
<!DOCTYPE html> <html> <head> <title>Εξωτερικό CSS</title> <link rel="stylesheet" href="styles.css"> <!-- Σύνδεση του CSS αρχείου --> </head> <body> <h1>Καλώς ήρθατε!</h1> <p>Αυτό είναι ένα παράδειγμα εξωτερικού CSS.</p> </body> </html>
Με αυτόν τον τρόπο, οι κανόνες CSS που ορίστηκαν στο αρχείο styles.css θα εφαρμοστούν στα αντίστοιχα στοιχεία HTML στο αρχείο μας.
[adinserter block=”2″]
Ο τρόπος ενσωμάτωσης CSS μέσω της ιδιότητας στυλ (style attribute) επιτρέπει να προσθέσετε το CSS απευθείας στις ετικέτες HTML για να καθορίσετε συγκεκριμένα στυλ για τα στοιχεία.
Για την εφαρμογή στυλ μέσω της ιδιότητας στυλ, προσθέτετε την ιδιότητα “style” σε μια ετικέτα HTML και ορίζετε τα στυλ μέσα σε εισαγωγικά. Αυτό επιτρέπει την καθορισμένη εμφάνιση μόνο για το συγκεκριμένο στοιχείο.
Παράδειγμα χρήσης ενσωματωμένου CSS με τη χρήση της ιδιότητας στυλ:
<!DOCTYPE html> <html> <head> <title>Ενσωματωμένο CSS με τη χρήση της ιδιότητας στυλ</title> </head> <body> <h1 style="color: #333; text-align: center;">Καλώς ήρθατε!</h1> <p style="color: #666; line-height: 1.5;">Αυτό είναι ένα παράδειγμα ενσωματωμένου CSS με τη χρήση της ιδιότητας στυλ.</p> </body> </html>
Στο παραπάνω παράδειγμα, οι ιδιότητες “color”, “text-align” και “line-height” ορίζονται μέσα στο style attribute για να καθορίσουν το χρώμα κειμένου, τη στοίχιση και τον διάκενο γραμμών αντίστοιχα για τις ετικέτες h1 και p.
Αυτό σημαίνει ότι εάν έχετε ένα στοιχείο που έχει καθοριστεί σε διάφορα style sheets και έχετε καθορίσει την ίδια ιδιότητα σε διάφορα style sheets με διαφορετικές τιμές, η τιμή από το τελευταίο style sheet θα εφαρμοστεί στο στοιχείο.
Παράδειγμα:
<!DOCTYPE html> <html> <head> <!-- Προσθέτουμε εξωτερικά αρχεία CSS --> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> </head> <body> <!-- Εδώ βρίσκεται ο τίτλος της σελίδας --> <h1>Αυτός είναι ο τίτλος</h1> </body> </html>
Στο αρχείο styles1.css:
h1 {
color: blue;
}
Στο αρχείο styles2.css:
h1 {
color: red;
}
Σε αυτό το παράδειγμα, ο επιλογέας h1 έχει καθοριστεί με την ιδιότητα color σε διάφορα style sheets με διαφορετικές τιμές (μπλε στο styles1.css και κόκκινο στο styles2.css). Ωστόσο, επειδή το styles2.css είναι το τελευταίο style sheet που διαβάστηκε, η τιμή color: red θα χρησιμοποιηθεί και το στοιχείο <h1> θα έχει κόκκινο χρώμα.
[adinserter block=”3″]
Η συγκεκριμένη συμπεριφορά των ιδιοτήτων CSS επιτρέπει την καθοριστική προτεραιότητα των κανόνων που έχουν οριστεί σε διάφορα style sheets. Αυτό σας επιτρέπει να προσαρμόσετε την εμφάνιση των στοιχείων σύμφωνα με τις προτιμήσεις σας και να αντικαταστήσετε ή να επικαλύψετε κανόνες που έχουν καθοριστεί προηγουμένως.
Όταν υπάρχουν περισσότερα από ένα στυλ που έχουν οριστεί για ένα στοιχείο HTML, ισχύει η ακόλουθη σειρά προτεραιότητας:
- Ενσωματωμένο στυλ (μέσα στο ίδιο το στοιχείο HTML)
- Εξωτερικά και εσωτερικά style sheets (στην ενότητα head του HTML αρχείου)
- Προεπιλεγμένες τιμές του προγράμματος περιήγησης (προκαθορισμένες τιμές που ορίζονται από τον περιηγητή)
Έτσι, το ενσωματωμένο στυλ έχει την υψηλότερη προτεραιότητα και θα αντικαταστήσει τα εξωτερικά και εσωτερικά στυλ, καθώς και τις προεπιλεγμένες τιμές του προγράμματος περιήγησης.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<style>
/* Αυτό είναι ένα σχόλιο CSS και θα εφαρμοστεί σε όλες τις επικεφαλίδες h1 */
h1 {
color: blue; /* Ο τίτλος θα έχει μπλε χρώμα κειμένου */
}
</style>
</head>
<body>
<!-- Αυτό είναι ένα σχόλιο HTML και είναι ο ορατός τίτλος της σελίδας -->
<h1 style="color: red;">Αυτός είναι ο τίτλος</h1>
</body>
</html>
Σε αυτό το παράδειγμα, ο επιλογέας h1 έχει καθοριστεί με το εξωτερικό στυλ color: blue;, αλλά έχει επίσης καθοριστεί ένα ενσωματωμένο στυλ με την ιδιότητα color: red;. Ωστόσο, επειδή το ενσωματωμένο στυλ έχει υψηλότερη προτεραιότητα, η τιμή color: red; θα χρησιμοποιηθεί και το στοιχείο <h1> θα έχει κόκκινο χρώμα.
Αυτός ο κανόνας κατακερματισμού του CSS επιτρέπει την ευελιξία στον καθορισμό των στυλ και την ανάκριση των προτιμήσεων του προγραμματιστή.