Στη γλώσσα HTML η μορφοποίηση των στοιχείων γίνεται με το χαρακτηριστικό style.
Η σύνταξη του style γίνεται με τον ακόλουθο τρόπο:
<tagname style=”property:value;”>
Το property είναι μια ιδιότητα του CSS. Το value είναι η τιμή της ιδιότητας.
Μπορείτε να μάθετε περισσότερα για το CSS στην αντίστοιχη ενότητα.
Μπορείτε να ξεκινήσετε διαβάζοντας το άρθρο μας για την εισαγωγή στο css.
Το παράδειγμα που ακολουθεί θα σας βοηθήσει να ξεκαθαρίσετε τη χρήση του property και του value σε δυο επικαφαλίδες html.
<!DOCTYPE html>
<html>
<body>
<h2 style=”color:red;”>Εδώ βλέπουμε κόκκινο </h2>
<h2 style=”color:blue;”>Εδώ βλέπουμε μπλε </h2>
</body>
</html>
Εδώ βλέπουμε το αποτέλεσμα της μορφοποίησης html:
Το χρώμα φόντου στην html
Η ιδιότητα background-color καθορίζει το χρώμα φόντου ενός στοιχείου html.
Στο παράδειγμα που ακολουθεί ρυθμίζουμε το χρώμα φόντου μιας σελίδας:
</body>
</html>
Εδώ βλέπουμε το αποτέλεσμα το φυλλομετρητή, με αλλαγμένο το φόντο:
Το χρώμα κειμένου στην html
Η ιδιότητα color καθορίζει το χρώμα κειμένου ενός στοιχείου HTML.
Στο παράδειγμα που ακολουθεί βάζουμε χρώμα κειμένου σε μια επικεφαλίδα και σε μια παράγραφο:
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue;”>Εδώ έχουμε μια επικεφαλίδα</h1>
<p style=”color:red;”>Εδώ έχουμε μια παράγραφο.</p>
</body>
</html>
Γραμματοσειρές στην html
Η ιδιότητα font-family καθορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί στο στοιχείο HTML.
Στο παράδειγμα που ακολουθεί καθορίζουμε το χρώμα που θα χρησιμοποιηθεί σε μια επικεφαλίδα και σε μια παράγραφο:
<!DOCTYPE html>
<html>
<body>
<h1 style=”font-family:verdana;”>Εδώ έχουμε μια επικεφαλίδα</h1>
<p style=”font-family:courier;”>Εδώ έχουμε μια παράγραφο.</p>
</body>
</html>
Μέγεθος κειμένου στην html
Η ιδιότητα font-size καθορίζει το μέγεθος του κειμένου ενός στοιχείου HTML.
Στο παράδειγμα που ακολουθεί ρυθμίζουμε το το μέγεθος κειμένου μιας επικεφαλίδας και μιας παραγράφου:
<!DOCTYPE html>
<html>
<body>
<h1 style=”font-size:300%;”>Εδώ έχουμε μια επικεφαλίδα</h1>
<p style=”font-size:160%;”>Εδώ έχουμε μια παράγραφο.</p>
</body>
</html>
Δείτε το αποτέλεσμα της αλλαγής μεγέθους των γραμμάτων στην παράγραφο και στην επικεφαλίδα:
Στοίχιση κειμένου στην html
Η ιδιότητα text-align μας επιτρέπει να ρυθμίσουμε την οριζόντια στοιχίση του κειμένου μέσα σε ένα στοιχείο HTML.
Στο παράδειγμα που ακολουθεί ορίζουμε τη στοίχιση του κειμένου μιας επικεφαλίδας και μιας παραγράφου:
<!DOCTYPE html>
<html>
<body>
<h1 style=”text-align:center;”>Επικεφαλίδα στοιχισμένη στο κέντρο</h1>
<p style=”text-align:center;”>Παράγραφος στοιχισμένη στο κέντρο.</p>
</body>
</html>
Παρουσιάζοπυμε το αποτέλεσμα της στοίχισης κειμένου στην html:
