CSS-001 — Εισαγωγή στη CSS: Δώσε στυλ στις ιστοσελίδες σου!

Καλώς ήρθες σε ένα νέο κεφάλαιο του Jerry's CodeLab!

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

Όμως, κάτι λείπει! Οι ιστοσελίδες μας χρειάζονται χρώματα, όμορφες γραμματοσειρές, αποστάσεις και σωστή διάταξη.

Εδώ έρχεται η CSS!

1. Τι είναι η CSS;

Η CSS (Cascading Style Sheets) είναι η γλώσσα που χρησιμοποιούμε για να καθορίσουμε την εμφάνιση και τη μορφοποίηση μιας ιστοσελίδας.

Με τη CSS μπορούμε να αλλάξουμε:

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

Με απλά λόγια:

HTML: Δημιουργεί τη δομή.
CSS: Αναλαμβάνει την εμφάνιση.
JavaScript: Προσθέτει συμπεριφορά και αλληλεπίδραση.

2. Η βασική σύνταξη της CSS

Κάθε κανόνας CSS αποτελείται από έναν selector και ένα σύνολο δηλώσεων.

selector {
  property: value;
}

Ας γνωρίσουμε τα τρία βασικά μέρη:

Selector: Επιλέγει το HTML στοιχείο που θέλουμε να μορφοποιήσουμε.
Property: Καθορίζει ποιο χαρακτηριστικό θέλουμε να αλλάξουμε.
Value: Καθορίζει την τιμή του χαρακτηριστικού.

Παράδειγμα:

h1 {
  color: red;
  font-size: 32px;
}

Εδώ:

h1 είναι ο selector.
color και font-size είναι οι ιδιότητες.
red και 32px είναι οι τιμές.

Οι δηλώσεις CSS βρίσκονται μέσα σε άγκιστρα { }. Κάθε δήλωση αποτελείται από μια ιδιότητα και μια τιμή, οι οποίες χωρίζονται με άνω και κάτω τελεία (:). Στο τέλος κάθε δήλωσης χρησιμοποιούμε αγγλικό semicolon (;).

Σωστά: Κάθε δήλωση CSS τελειώνει με ελληνικό ερωτηματικό; Όχι — με αγγλικό semicolon (;)!

3. Πρώτος τρόπος: Inline CSS

Ο πρώτος τρόπος είναι να γράψουμε CSS απευθείας μέσα σε ένα HTML στοιχείο, χρησιμοποιώντας την ιδιότητα style.

<h1 style="color: red;">
  Καλώς ήρθες!
</h1>

<p style="font-size: 20px;">
  Αυτή είναι η πρώτη μου μορφοποιημένη παράγραφος.
</p>

Με αυτόν τον τρόπο η CSS εφαρμόζεται απευθείας στο συγκεκριμένο στοιχείο.

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

4. Δεύτερος τρόπος: Internal CSS

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

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <title>Η πρώτη μου CSS</title>

  <style>
    h1 {
      color: #00bfa5;
    }

    p {
      font-size: 18px;
    }
  </style>
</head>
<body>

  <h1>Καλώς ήρθες!</h1>
  <p>Μαθαίνω CSS!</p>

</body>
</html>

Με αυτόν τον τρόπο οι κανόνες CSS βρίσκονται συγκεντρωμένοι μέσα στο ίδιο HTML αρχείο.

5. Τρίτος τρόπος: External CSS

Ένας από τους καλύτερους τρόπους οργάνωσης είναι να δημιουργήσουμε ένα ξεχωριστό αρχείο CSS.

Για παράδειγμα:

index.html
style.css

Στο αρχείο style.css γράφουμε:

h1 {
  color: #00bfa5;
  font-size: 32px;
}

p {
  color: #444;
  font-size: 18px;
}

Στη συνέχεια συνδέουμε το αρχείο CSS με την HTML χρησιμοποιώντας το στοιχείο <link> μέσα στο <head>:

<link rel="stylesheet" href="style.css">

Με αυτόν τον τρόπο μπορούμε να χρησιμοποιούμε το ίδιο αρχείο CSS σε πολλές HTML σελίδες.

6. Γνωρίζοντας τις πρώτες μας CSS ιδιότητες

Ας γνωρίσουμε μερικές από τις πιο συνηθισμένες ιδιότητες CSS.

color

Αλλάζει το χρώμα του κειμένου.

p {
  color: blue;
}

background-color

Αλλάζει το χρώμα του φόντου.

body {
  background-color: #eeeeee;
}

font-size

Καθορίζει το μέγεθος της γραμματοσειράς.

h1 {
  font-size: 36px;
}

text-align

Καθορίζει τη στοίχιση του κειμένου.

h1 {
  text-align: center;
}

font-family

Καθορίζει την οικογένεια γραμματοσειράς.

body {
  font-family: Arial, sans-serif;
}

7. Ένα ολοκληρωμένο παράδειγμα

Ας δημιουργήσουμε την πρώτη μας όμορφα μορφοποιημένη ιστοσελίδα!

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Η πρώτη μου CSS</title>

  <style>
    body {
      background-color: #10232b;
      font-family: Arial, sans-serif;
      color: white;
      text-align: center;
      padding: 30px;
    }

    h1 {
      color: #00bfa5;
      font-size: 36px;
    }

    p {
      font-size: 18px;
      line-height: 1.6;
    }

    .message {
      background-color: #203943;
      padding: 20px;
      border-radius: 10px;
    }
  </style>
</head>

<body>

  <h1>Καλώς ήρθες στο CSS!</h1>

  <div class="message">
    <p>
      Η HTML δημιουργεί τη δομή.
      Η CSS δίνει στυλ!
    </p>
  </div>

</body>
</html>

8. Συνηθισμένα λάθη

Ξεχνάμε τα άγκιστρα { }.
Ξεχνάμε το αγγλικό semicolon (;) στο τέλος μιας δήλωσης CSS.
Γράφουμε λανθασμένα το όνομα μιας ιδιότητας.
Ξεχνάμε τα εισαγωγικά στις τιμές HTML της ιδιότητας style.
Συνδέουμε λανθασμένα το εξωτερικό αρχείο CSS.
Τοποθετούμε το στοιχείο <style> σε λάθος σημείο του εγγράφου.

9. Ώρα για εξάσκηση!

Τώρα είναι η σειρά σου!

Άλλαξε το χρώμα μιας επικεφαλίδας χρησιμοποιώντας την ιδιότητα color.
Άλλαξε το χρώμα φόντου της σελίδας με την ιδιότητα background-color.
Δοκίμασε διαφορετικά μεγέθη γραμματοσειράς με την font-size.
Κέντραρε μια παράγραφο με την text-align.
Δημιούργησε ένα δικό σου πλαίσιο με χρώμα φόντου και εσωτερικό κενό.

10. Τι μάθαμε σήμερα;

Σε αυτό το πρώτο μάθημα CSS γνωρίσαμε:

Τι είναι η CSS και ποιος είναι ο ρόλος της.
Τη βασική σύνταξη των κανόνων CSS.
Τον τρόπο Inline CSS.
Τον τρόπο Internal CSS.
Τον τρόπο External CSS.
Τις πρώτες μας CSS ιδιότητες.

Από εδώ και πέρα αρχίζουμε να δίνουμε πραγματικό στυλ στις ιστοσελίδες μας!

11. Δοκίμασε τον κώδικά σου στην Παιδική Χαρά!

Άνοιξε το Playground του Jerry's CodeLab και πειραματίσου με την CSS:

RUN ON PLAYGROUND

Jerry's CodeLab
LEARN · EXPERIMENT · CREATE

Sharing practical coding lessons in HTML, CSS, JavaScript, and AngularJS 1.x. Learn by experimenting, building, and writing code.

Open Playground

CSS-001 — Εισαγωγή στη CSS: Δώσε στυλ στις ιστοσελίδες σου!