CSS – Διαμόρφωση στυλ των στοιχείων της HTML

CSS – Διαμόρφωση στυλ των στοιχείων της HTML

CSS – Διαμόρφωση στυλ των στοιχείων της HTML

Για τη διαμόρφωση στυλ των στοιχείων της HTML πρέπει να χρησιμοποιήσουμε τη CSS. Η CSS είναι μια γλώσσα υπολογιστή που χρησιμοποιείται για τον έλεγχο της εμφάνισης και της διάταξης μιας ιστοσελίδας. Με τη CSS αλλάζουμε χρώματα (colors),  χρώματα φόντου (background-colors), γραμματοσειρές (fonts), περιθώρια (margins) και πολλά άλλα.

Μπορούμε να προσθέσουμε CSS στο αρχείο της HTML με τους εξής τρόπους:

  • In-line (attribute style)
  • Εσωτερικό-Internal (tag style)
  • Εξωτερικό-External (link to a style sheet)

In-Line (attribute style)

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

Παράδειγμα

<h1 style="color:red;">Αυτή είναι μία κόκκινη Επικεφαλίδα</h1>

Αποτέλεσμα

Διαμόρφωση στυλ των στοιχείων της HTML

Εσωτερικό – Internal (tag style)

Ο δεύτερος τρόπος είναι να να γράψουμε τον κώδικα της CSS στο head ή στο body της HTML, τοποθετώντας τον κώδικα μας ανάμεσα στις ετικέτες της HTML <style> και </style>.

Παράδειγμα

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {background-color: lightgrey;}
      h1   {color: green;}
      p    {color: blue;}
    </style>
  </head>
  <body>
    <h1>Αυτή είναι μια Επικεφαλίδα</h1>
    <p>Αυτή είναι μια Παράγραφος.</p>
  </body>
</html>

Αποτέλεσμα

Διαμόρφωση στυλ των στοιχείων της HTML

Σε αυτό τον τρόπο πρόσθεσης CSS, όταν έχουμε πολλές ετικέτες που είναι ίδιες και δε θέλουμε να είναι να τις αλλάξουμε όλες,  χρησιμοποιούμε τις ιδιότητα id ή class.

Εξωτερικό – External (link to a style sheet)

Ο τρίτος τρόπος είναι να να χρησιμοποιήσουμε ένα εξωτερικό αρχείο CSS. Για να συνδέσουμε το αρχείο της CSS με αυτό της HTML χρησιμοποιούμε ένα link. Στο link τοποθετούμε το path (μονοπάτι) για το φάκελο στον οποίο βρίσκεται το αρχείο της CSS. Ένα αρχείο CSS είναι ένα απλό αρχείο txt στο οποίο γράφουμε τον κώδικά μας και μετά αλλάζουμε την επέκταση από .txt σε .css.

Παράδειγμα

<!DOCTYPE html>
<html>
  <head>
    <łink rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Αυτή είναι μια Επικεφαλίδα</h1>
    <p>Αυτή είναι μια Παράγραφος.</p>
  </body>
</html>

Παράδειγμα αρχείου CSS

body {
  background-color: lightgrey;
}
h1 {
  color: green;
}
p {
  color: blue;
}

Αποτέλεσμα

Διαμόρφωση στυλ των στοιχείων της HTML

Και σε αυτό τον τρόπο πρόσθεσης CSS, όταν έχουμε πολλές ετικέτες που είναι ίδιες και δε θέλουμε να είναι να τις αλλάξουμε όλες,  χρησιμοποιούμε τις ιδιότητα id ή class.

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.