Η CSS (Cascading Style Sheets) αναφέρεται σε μια γλώσσα προγραμματισμού που χρησιμοποιείται για την παρουσίαση ενός έγγραφου HTML ή XML. Η CSS δίνει τη δυνατότητα στους προγραμματιστές να αλλάξουν την εμφάνιση της ιστοσελίδας, όπως τα χρώματα, οι γραμματοσειρές, οι διαστάσεις, η διάταξη και άλλα πολλά.
Μια σημαντική λειτουργία της CSS είναι η δυνατότητά της να ελέγχει τη διάταξη και τη μορφοποίηση πολλών ιστοσελίδων με μία μόνο αρχείο CSS, κάτι που κάνει την συντήρηση των ιστοσελίδων πιο εύκολη και αποτελεσματική.
Η CSS χρησιμοποιεί κανόνες για να καθορίσει τη μορφή ενός εγγράφου HTML ή XML. Οι κανόνες CSS αναφέρονται σε ένα στοιχείο HTML ή XML και καθορίζουν ποια ιδιότητα θα εφαρμοστεί σε αυτό. Μερικά παραδείγματα ιδιοτήτων CSS περιλαμβάνουν τα χρώματα, τα περιθώρια, τις γραμματοσειρές και τα φόντα.
Η CSS είναι μια πολύ χρήσιμη και δημοφιλής τεχνολογία στη διαδικτυακή ανάπτυξη και συμβάλλει στη βελτίωση της εμπειρίας χρήστη στην περιήγηση του χρήστη στο διαδίκτυο. Με τη βοήθεια της CSS, οι ιστοσελίδες μπορούν να γίνουν πιο ελκυστικές, πιο λειτουργικές και πιο ευανάγνωστες.
Οι κανόνες CSS μπορούν να εφαρμοστούν στα στοιχεία HTML στην ίδια σελίδα ή σε άλλα αρχεία HTML, κάνοντας την ανάπτυξη ιστοσελίδων πιο ευέλικτη. Η CSS χρησιμοποιεί επίσης διάφορες τεχνικές όπως την κληρονομικότητα και τη σύνθεση, που βοηθούν στη διατήρηση καθαρού και οργανωμένου κώδικα.
Οι CSS κανόνες μπορούν να προστεθούν στο εσωτερικό των ετικετών HTML χρησιμοποιώντας την ετικέτα <style>, ή να τοποθετηθούν σε ένα εξωτερικό αρχείο CSS και να συνδεθούν με το αρχείο HTML με τη χρήση της ετικέτας <link>.
Τέλος, είναι σημαντικό να αναφέρουμε ότι η CSS υποστηρίζει διάφορες μορφές μονάδων μέτρησης, όπως τα pixel, τα em, τα rem και τα percent, που βοηθούν στην καλύτερη προσαρμογή των στοιχείων HTML στη συσκευή του χρήστη και το μέγεθος της οθόνης του.
[adinserter block=”2″]
Η CSS μπορεί να προστεθεί στα έγγραφα HTML με 3 τρόπους:
Inline – χρησιμοποιώντας το attribute style μέσα σε στοιχεία HTML
Internal – χρησιμοποιώντας ένα στοιχείο <style> στην ενότητα <head>
External – χρησιμοποιώντας ένα στοιχείο <link> για να συνδέσετε με ένα εξωτερικό αρχείο CSS
Ο πιο συνηθισμένος τρόπος για την προσθήκη CSS είναι να διατηρείτε τα στυλ σε εξωτερικά αρχεία CSS. Ωστόσο, σε αυτό το μάθημα θα χρησιμοποιήσουμε εσωτερικά και inline στυλ, γιατί αυτό είναι πιο εύκολο να επιδειχθεί και ευκολότερο για εσάς να το δοκιμάσετε μόνοι σας.
Ένα inline CSS χρησιμοποιείται για να εφαρμόσει ένα μοναδικό στυλ σε ένα μόνο στοιχείο HTML.
Ένα inline CSS χρησιμοποιεί το attribute style ενός στοιχείου HTML.
Το παρακάτω παράδειγμα ορίζει το χρώμα κειμένου του στοιχείου <h1> σε μπλε και το χρώμα κειμένου του στοιχείου <p> σε κόκκινο:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue">This is a heading</h1>
<p style="color: red">This is a paragraph.</p>
</body>
</html>
Ένα εσωτερικό CSS χρησιμοποιείται για να ορίσει ένα στυλ για μια μόνο σελίδα HTML.
Ένα εσωτερικό CSS καθορίζεται στην ενότητα <head> ενός HTML, μέσα σε ένα στοιχείο <style>.
Το παρακάτω παράδειγμα ορίζει το χρώμα κειμένου ΟΛΩΝ των στοιχείων <h1> (σε αυτήν τη σελίδα) σε μπλε, και το χρώμα κειμένου ΟΛΩΝ των στοιχείων <p> σε κόκκινο. Επιπλέον, η σελίδα θα εμφανίζεται με χρώμα φόντου “powderblue”:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: blue;
}
p {
color: red;
}
body {
background-color: powderblue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ένα εξωτερικό style sheet χρησιμοποιείται για να ορίσει το στυλ για πολλές σελίδες HTML.
Για να χρησιμοποιήσετε ένα εξωτερικό style sheet, πρέπει να προσθέσετε έναν σύνδεσμο σε αυτό στην ενότητα <head> κάθε σελίδας HTML:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, το εξωτερικό style sheet είναι αποθηκευμένο σε ένα αρχείο με όνομα “style.css”. Με αυτόν τον τρόπο, όλες οι σελίδες HTML που συνδέονται με αυτό το style sheet θα εμφανίζονται με το ίδιο στυλ.
Το εξωτερικό style sheet μπορεί να γραφεί σε οποιοδήποτε επεξεργαστή κειμένου. Το αρχείο δεν πρέπει να περιέχει κώδικα HTML και πρέπει να αποθηκεύεται με κατάληξη .css.
[adinserter block=”3″]
Εδώ είναι πως μοιάζει το αρχείο “styles.css”:
/* Set text color for all <h1> elements */
h1 {
color: blue;
}
/* Set text color and background color for all <p> elements */
p {
color: red;
background-color: powderblue;
}
Στο παραπάνω παράδειγμα, ορίζονται οι κανόνες για το πως θα εμφανίζονται οι σελίδες HTML που θα συνδέονται με αυτό το style sheet. Εδώ, όλοι οι τίτλοι <h1> θα έχουν κείμενο χρώματος μπλε, ενώ όλα τα κείμενα <p> θα έχουν κείμενο χρώματος κόκκινο και φόντο χρώματος powderblue.
Εδώ, θα δείξουμε μερικά από τα πιο συνηθισμένα CSS ιδιότητες. Θα μάθετε περισσότερα για αυτές αργότερα.
Η ιδιότητα color του CSS ορίζει το χρώμα του κειμένου που θα χρησιμοποιηθεί.
Η ιδιότητα font-family του CSS ορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί.
Η ιδιότητα font-size του CSS ορίζει το μέγεθος του κειμένου που θα χρησιμοποιηθεί.
Παρακάτω έχουμε ένα παράδειγμα χρήσης των παραπάνω CSS ιδιοτήτων:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
body {
color: navy;
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: maroon;
font-family: "Times New Roman", serif;
font-size: 32px;
}
p {
color: black;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is a paragraph with some text.</p>
<p>This is another paragraph with some more text.</p>
</body>
</html>
Σε αυτό το παράδειγμα, ορίζουμε τα εξής:
- Χρώμα κειμένου για το σώμα της σελίδας είναι το navy
- Γραμματοσειρά του κειμένου του σώματος είναι το Arial, sans-serif
- Μέγεθος κειμένου του σώματος είναι 16px
- Χρώμα κειμένου του τίτλου h1 είναι το maroon
- Γραμματοσειρά του τίτλου h1 είναι το “Times New Roman”, serif
- Μέγεθος κειμένου του τίτλου h1 είναι 32px
- Χρώμα κειμένου των παραγράφων είναι το μαύρο
- Μέγεθος κειμένου των παραγράφων είναι 20px
Αυτό το παράδειγμα δείχνει πώς μπορούμε να προσαρμόσουμε το στυλ της σελίδας μας με τη χρήση του CSS.
Η ιδιότητα CSS border καθορίζει ένα περίγραμμα γύρω από ένα στοιχείο HTML.
Παράδειγμα χρήσης για να καθοριστεί ένα περίγραμμα γύρω από ένα κουμπί με το κείμενο “Πατήστε με”:
<!DOCTYPE html>
<html>
<head>
<style>
button {
border: 2px solid black;
background-color: white;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button>Πατήστε με</button>
</body>
</html>
[adinserter block=”4″]
Στο παραπάνω παράδειγμα, έχουμε ένα κουμπί το οποίο έχει ένα περίγραμμα πάχους 2px και χρώματος μαύρο. Το κείμενο είναι μαύρο και ο φόντος λευκός. Επίσης, έχουμε καθορίσει το μέγεθος του περιθωρίου, τη στοίβαση και την αντιστοίχιση του κειμένου, το μέγεθος γραμματοσειράς και τη θέση του στο παράθυρο.
Το CSS padding property χρησιμοποιείται για να προσθέσετε padding σε ένα HTML στοιχείο. Το padding είναι ο χώρος μεταξύ του περιεχομένου του στοιχείου και του περιγράμματος του στοιχείου (border).
Το παρακάτω παράδειγμα δείχνει πώς να ορίσετε το padding για ένα στοιχείο:
<!DOCTYPE html>
<html>
<head>
<style>
/* Ορίζουμε το padding σε 50px */
div {
padding: 50px;
}
</style>
</head>
<body>
<div>
<p>Κείμενο μέσα σε ένα div element.</p>
</div>
</body>
</html>
Στο παραπάνω παράδειγμα, το padding στο div element έχει οριστεί σε 50 pixels. Αυτό σημαίνει ότι έχουμε έναν κενό χώρο 50 pixels από το περιεχόμενο του div element έως τα περιθώρια του στοιχείου.
Η ιδιότητα CSS margin ορίζει ένα περιθώριο (χώρο) γύρω από ένα στοιχείο HTML, το οποίο δημιουργεί ένα κενό ανάμεσα σε αυτό και τα γειτονικά στοιχεία.
Εδώ είναι ένα αναλυτικό παράδειγμα που δείχνει πώς μπορείτε να χρησιμοποιήσετε την ιδιότητα CSS margin για να προσθέσετε ένα περιθώριο γύρω από ένα κείμενο:
<!DOCTYPE html>
<html>
<head>
<style>
/* Ορίζουμε ένα περιθώριο 20px στο επάνω και κάτω μέρος, και 50px στα αριστερά και δεξιά */
p {
margin: 20px 50px;
}
</style>
</head>
<body>
<!-- Το παρακάτω κείμενο θα έχει ένα περιθώριο 20px στο επάνω και κάτω μέρος, και 50px στα αριστερά και δεξιά -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at lorem
nec augue mattis facilisis. Suspendisse potenti.
</p>
</body>
</html>
Ένα εξωτερικό style sheet μπορεί να αναφερθεί με μια πλήρη διεύθυνση URL ή με μια διαδρομή που είναι σχετική με την τρέχουσα ιστοσελίδα.
Για παράδειγμα, ας υποθέσουμε ότι έχουμε δημιουργήσει ένα αρχείο CSS με το όνομα “styles.css” στον φάκελο “css” στον ίδιο κατάλογο με την HTML σελίδα που θέλουμε να το χρησιμοποιήσουμε. Η σύνταξη για να συνδέσουμε την HTML σελίδα με αυτό το style sheet είναι η εξής:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<!-- Το περιεχόμενο της σελίδας εδώ -->
</body>
</html>
Στο παραπάνω παράδειγμα, το <link> στοιχείο βρίσκεται μέσα στο <head> στοιχείο της σελίδας HTML. Η href ιδιότητα καθορίζει τη διαδρομή για το αρχείο CSS που θέλουμε να συνδέσουμε. Η διαδρομή είναι σχετική με την τοποθεσία της σελίδας HTML, οπότε χρησιμοποιούμε το “css/styles.css” για να δείξουμε ότι το αρχείο CSS βρίσκεται στον φάκελο “css”.
Χρησιμοποιήστε το HTML style attribute για inline styling
Χρησιμοποιήστε το HTML <style> element για να ορίσετε το internal CSS
Χρησιμοποιήστε το HTML <link> element για να αναφερθείτε σε ένα εξωτερικό αρχείο CSS
Χρησιμοποιήστε το HTML <head> element για να αποθηκεύετε τα στοιχεία <style> και <link>
Χρησιμοποιήστε την ιδιότητα CSS color για χρώματα κειμένου
Χρησιμοποιήστε την ιδιότητα CSS font-family για γραμματοσειρές κειμένου
Χρησιμοποιήστε την ιδιότητα CSS font-size για μεγέθη κειμένου
Χρησιμοποιήστε την ιδιότητα CSS border για περιγράμματα
Χρησιμοποιήστε την ιδιότητα CSS padding για χώρο εντός του περιγράμματος
Χρησιμοποιήστε την ιδιότητα CSS margin για χώρο έξω από το περίγραμμα