Πώς να δημιουργήσετε CSS

Πώς να εισάγετε το φυλλοδιαγράμμα

Όταν ο περιηγητής διαβάσει ένα φυλλοδιαγράμμα, θα το χρησιμοποιήσει για να μορφοποιήσει το έγγραφο HTML. Υπάρχουν τρεις τρόποι για να εισάγετε ένα φυλλοδιαγράμμα:

Εξωτερικό φυλλοδιαγράμμα

Όταν το στυλ χρειάζεται να εφαρμοστεί σε πολλές σελίδες, το εξωτερικό φυλλοδιαγράμμα είναι η ιδανική επιλογή. Στην περίπτωση του εξωτερικού φυλλοδιαγράμματος, μπορείτε να αλλάξετε την εμφάνιση όλου του ιστοχώρου με την αλλαγή ενός αρχείου. Κάθε σελίδα χρησιμοποιεί την ετικέτα <link> για να συνδέεται με το φυλλοδιαγράμμα. Η ετικέτα <link> βρίσκεται στην κεφαλίδα του εγγράφου:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Ο περιηγητής θα διαβάσει τις δηλώσεις στυλ από το αρχείο mystyle.css και θα τις χρησιμοποιήσει για να μορφοποιήσει το έγγραφο.

Το εξωτερικό φυλλοδιαγράμμα μπορεί να επεξεργαστεί σε οποιοδήποτε επεξεργαστή κειμένου. Ο φάκελος δεν πρέπει να περιέχει οποιεσδήποτε ετικέτες html. Το φυλλοδιαγράμμα πρέπει να αποθηκευτεί με την επέκταση .css. Ακολουθεί ένα παράδειγμα αρχείου φυλλοδιαγράμματος:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Μην αφήνετε κενά μεταξύ της τιμής της ιδιότητας και της μονάδας. Αν χρησιμοποιήσετε "margin-left: 20 px" αντί για "margin-left: 20px", θα λειτουργήσει μόνο στο IE 6, αλλά δεν θα λειτουργήσει σωστά στο Mozilla/Firefox ή Netscape.

Εσωτερικό φυλλοδιαγράμμα

Όταν ένας μοναδικός έγγραφος χρειάζεται ειδικά στυλ, πρέπει να χρησιμοποιήσετε εσωτερικό φυλλοδιαγράμμα. Μπορείτε να χρησιμοποιήσετε την ετικέτα <style> για να ορίσετε το εσωτερικό φυλλοδιαγράμμα στην κεφαλίδα του εγγράφου, όπως εδώ:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Στυλ ενσωματωμένα

Επειδή θα συγχωνεύσουμε την αισθητική και το περιεχόμενο, τα ενσωματωμένα στυλ θα χάσουν πολλά πλεονεκτήματα του φυλλοδιαγράμματος. Χρησιμοποιήστε αυτόν τον τρόπο με προσοχή, για παράδειγμα όταν το στυλ χρειάζεται να εφαρμοστεί μόνο σε έναν στοιχείο.

Για να χρησιμοποιήσετε στυλ ενσωματωμένα, πρέπει να χρησιμοποιήσετε την ιδιότητα του στυλ (style) εντός των σχετικών ετικετών. Η ιδιότητα του στυλ μπορεί να περιέχει οποιαδήποτε ιδιότητα CSS. Αυτό το παράδειγμα δείχνει πώς να αλλάξετε το χρώμα του παραγράφου και τον αριστερό εξωτερικό περιθώριο:

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Multiple Styles

If some properties are defined by the same selector in different style sheets, the property values will be inherited from the more specific style sheet.

For example, the external stylesheet has three properties for the h3 selector:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

While the internal stylesheet has two properties for the h3 selector:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

If this page with an internal stylesheet is also linked to an external stylesheet, the style obtained by h3 is:

color: red; 
text-align: right; 
font-size: 20pt;

The color property will be inherited from the external stylesheet, while the text alignment (text-alignment) and font size (font-size) will be replaced by the rules in the internal stylesheet.