Με την ιδιότητα class ορίζουμε στυλ (Cascading Style Sheets - CSS) για τα στοιχεία της σελίδας μας. Με την βοήθεια της CSS ορίζουμε την εμφάνιση (το χρώμα, το μέγεθος, κτλ.) των στοιχείων της σελίδας.

Μάθετε CSS

Παράδειγμα 1

Παράδειγμα 1
<em class="thema">Μαθήματα CSS</em>
Με τον παραπάνω κώδικα ορίζουμε ένα στυλ για κάθε κείμενο που βρίσκεται μέσα στην ετικέτα <em>


<HTML>
<HEAD>
<style type="text/css">
em.thema {
FONT-SIZE: 12px;
FONT-FAMILY: arial;
COLOR: Blue;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
</style>
</HEAD>

<BODY>
<em class="thema">Μαθήματα CSS</em>
</BODY>
</HTML>

Αποτέλεσμα στον browser:

Μαθήματα CSS



Το στυλ ορίζεται στην ενότητα HEAD της σελίδας, μέσα στην ετικέτα <style type="text/css">. Με αυτόν τον τρόπο ορίζουμε ένα στυλ για κάθε κείμενο που βρίσκεται μέσα στην ετικέτα <em>, το οποίο έχει χρώμα γραμματοσειράς Μπλε (Blue), μέγεθος γραμματοσειράς 12 pixels και όνομα γραμματοσειράς Arial. Μπορούμε μέσα στην σελίδα μας να ορίσουμε με αυτό το στυλ όσα κείμενα επιθυμούμε. Έτσι αλλάζοντας τον κώδικα CSS στην ενότητα HEAD, αλλάζουν αυτόματα όλα τα κείμενα που ορίζονται με αυτό το στυλ

Παράδειγμα 2

Παράδειγμα 2
<HTML>
<HEAD>
<style type="text/css">
a.etiketa {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #FF6347; FONT-WEIGHT: normal;
TEXT-DECORATION: underline;
}
a.etiketa:hover {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #CE2900;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
a.etiketa:visited {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
}
</style>
</HEAD>

<BODY>

<a class="etiketa" xhref="/wlearn/mathimata/html/etiketes/etiketa_a.html">Ετικέτα <A></a>

</BODY>
</HTML>


Με τον παραπάνω κώδικα ορίζουμε ένα στυλ για κάθε σύνδεσμο που βρίσκεται μέσα στην σελίδα

Σχετικά θέματα

Μαθήματα CSS
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.