Εισαγωγή στην CSS - Δίνοντας στυλ και μορφή

Κεφάλαιο 1: Εισαγωγή στο CSS (Selectors, Properties, Values)

Τι είναι το CSS; Το CSS είναι μια γλώσσα κανόνων στυλ (style sheet language). Η δουλειά του είναι να λέει στον browser πώς να εμφανίσει τα HTML elements. Ενώ η HTML καθορίζει τι είναι ένα στοιχείο (π.χ., "αυτό είναι μια επικεφαλίδα <h1>"), το CSS καθορίζει πώς φαίνεται (π.χ., "αυτή η επικεφαλίδα <h1> πρέπει να είναι μπλε, με γραμματοσειρά Arial και στο κέντρο της σελίδας").

Οι τρεις τρόποι για να προσθέσεις CSS (και γιατί θα χρησιμοποιούμε μόνο τον έναν)

Μπορείς να προσθέσεις CSS σε μια HTML σελίδα με τρεις τρόπους:

  1. Inline CSS (μέσα στη γραμμή): Χρησιμοποιώντας το style attribute απευθείας μέσα σε ένα HTML tag. 
    <h1 style="color: blue; font-size: 24px;">Ένας μπλε τίτλος</h1>

    Γιατί είναι κακή πρακτική: Αναμειγνύει το περιεχόμενο (HTML) με την παρουσίαση (CSS), κάνει τον κώδικα δυσανάγνωστο και τη συντήρηση εφιάλτη. Θα το αποφεύγουμε σχεδόν πάντα.

  2. Internal CSS (εσωτερικό στυλ): Χρησιμοποιώντας το tag <style> μέσα στο <head> του HTML αρχείου. 
    <head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>

    Γιατί είναι καλύτερο, αλλά όχι ιδανικό: Κρατάει το CSS ξεχωριστά από το κυρίως περιεχόμενο, αλλά οι κανόνες αυτοί ισχύουν μόνο για τη συγκεκριμένη HTML σελίδα. Αν έχεις 10 σελίδες, θα πρέπει να αντιγράψεις τους ίδιους κανόνες 10 φορές.

  3. External CSS (εξωτερικό αρχείο στυλ): Αυτή είναι η επαγγελματική μέθοδος. Γράφουμε όλους τους κανόνες CSS σε ένα ξεχωριστό αρχείο (π.χ., style.css) και μετά το "συνδέουμε" με το HTML αρχείο μας.
    • Δημιουργούμε ένα νέο αρχείο, π.χ., style.css.
    • Μέσα στο <head> του HTML μας, προσθέτουμε ένα <link> tag: ```html

    ``` Γιατί είναι η καλύτερη μέθοδος:

    • Διαχωρισμός αρμοδιοτήτων (Separation of Concerns): Η HTML ασχολείται μόνο με τη δομή, η CSS μόνο με την εμφάνιση.
    • Επαναχρησιμοποίηση: Μπορείς να συνδέσεις το ίδιο style.css αρχείο σε 100 διαφορετικές σελίδες. Αν θέλεις να αλλάξεις το χρώμα όλων των τίτλων σε όλες τις σελίδες, αλλάζεις μία μόνο γραμμή στο style.css!

Η Βασική Σύνταξη ενός Κανόνα CSS Κάθε κανόνας CSS αποτελείται από τρία μέρη:

selector {
  property: value;
}
  • Selector (Επιλογέας): "Στοχεύει" το/τα HTML element(s) που θέλεις να στυλάρεις. Στο παράδειγμα, το h1 είναι ο selector.
  • Property (Ιδιότητα): Το χαρακτηριστικό που θέλεις να αλλάξεις (π.χ., color, font-size, background-color).
  • Value (Τιμή): Η τιμή που θέλεις να δώσεις στην ιδιότητα (π.χ., blue, 16px, #ffffff).

Μπορείς να έχεις πολλαπλές δηλώσεις (property-value pairs) μέσα στον ίδιο κανόνα, χωρισμένες με ερωτηματικό ( ; ):

h1 {
  color: navy;
  font-family: Arial, sans-serif;
  text-align: center;
}

Ώρα για πράξη: Τα πρώτα μας στυλ!

Πάμε να εφαρμόσουμε αυτά που μάθαμε στο project του βιογραφικού μας.

  1. Δημιούργησε ένα νέο αρχείο: Μέσα στον φάκελο του project σου (my-first-git-project), δημιούργησε ένα νέο αρχείο και ονόμασέ το style.css.

  2. Σύνδεσε το CSS με την HTML: Άνοιξε το index.html. Μέσα στο <head> (κάτω από το <title>), πρόσθεσε την παρακάτω γραμμή: 
    <link rel="stylesheet" href="style.css">

    Αυτό λέει στο index.html: "Για την εμφάνισή σου, παρακαλώ χρησιμοποίησε τους κανόνες που βρίσκονται στο αρχείο style.css".

  3. Γράψε τον πρώτο σου κανόνα CSS: Πήγαινε στο αρχείο style.css και πρόσθεσε τον παρακάτω κανόνα:

    body {
    background-color: #f4f4f4; /* Ένα πολύ ανοιχτό γκρι */
    color: #333333; /* Ένα σκούρο γκρι για το κείμενο */
    font-family: Arial, Helvetica, sans-serif; /* Μια ασφαλής επιλογή γραμματοσειράς */
}
    • Ο selector body στοχεύει ολόκληρο το "σώμα" της σελίδας.
    • Αλλάζουμε το χρώμα του φόντου (background-color), το βασικό χρώμα του κειμένου (color) και την προκαθορισμένη γραμματοσειρά (font-family). Το sans-serif είναι ένα "fallback" σε περίπτωση που το Arial ή το Helvetica δεν υπάρχουν.

  4. Στυλάρισε τις Επικεφαλίδες: Ας δώσουμε ένα διαφορετικό χρώμα και στυλ στις επικεφαλίδες μας. Πρόσθεσε και αυτόν τον κανόνα στο style.css:

    h1, h2 {
    color: #0056b3; /* Ένα ωραίο σκούρο μπλε */
}

    Παρατήρηση: Μπορείς να στοχεύσεις πολλαπλούς selectors ταυτόχρονα, χωρίζοντάς τους με κόμμα (,). Αυτός ο κανόνας θα εφαρμοστεί σε όλα τα <h1> και <h2> elements της σελίδας.

  5. Σώσε και τα δύο αρχεία (index.html και style.css).

Κοίτα τον browser σου. Η σελίδα θα πρέπει να έχει αλλάξει δραματικά! Το φόντο είναι πλέον γκρι, το κείμενο πιο ευανάγνωστο και οι τίτλοι έχουν αποκτήσει χρώμα.

Κεφάλαιο 2: Selectors (Στοχεύοντας με ακρίβεια)

Ένας selector απαντά στην ερώτηση: "Σε ποιο HTML element θέλω να εφαρμόσω αυτό το στυλ;". Έχουμε ήδη δει τον πιο απλό selector, τον type selector (ή element selector), που στοχεύει όλα τα στοιχεία ενός συγκεκριμένου τύπου (π.χ., h1, p, body).

Τώρα θα μάθουμε τους δύο πιο σημαντικούς selectors που θα χρησιμοποιείς καθημερινά: τον class selector και τον ID selector.

2.1 Ο Class Selector (.) - Η ετικέτα για πολλαπλή χρήση

Μια class είναι ένα όνομα-ετικέτα που μπορείς να δώσεις σε ένα ή περισσότερα HTML elements. Στη συνέχεια, στο CSS, μπορείς να δημιουργήσεις κανόνες που εφαρμόζονται σε όλα τα στοιχεία που έχουν αυτή την κλάση.

Πώς λειτουργεί:

  1. Στο HTML: Προσθέτεις το attribute class="όνομα-κλάσης" στο element που θέλεις. 
    <p class="highlight-text">Αυτό το κείμενο είναι σημαντικό.</p>
<p>Αυτό το κείμενο είναι κανονικό.</p>
<div>
    <p class="highlight-text">Και αυτό το κείμενο είναι εξίσου σημαντικό!</p>
</div>
  2. Στο CSS: Για να στοχεύσεις αυτή την κλάση, χρησιμοποιείς μια τελεία (.) ακολουθούμενη από το όνομα της κλάσης. 
    .highlight-text {
    background-color: yellow;
    font-weight: bold;
    padding: 5px;
}

    Το αποτέλεσμα θα είναι ότι και τα δύο paragraphs με την κλάση highlight-text θα έχουν κίτρινο φόντο, έντονη γραφή και λίγο εσωτερικό "αέρα". Το paragraph που δεν έχει την κλάση παραμένει ανεπηρέαστο.

Πολλαπλές Κλάσεις: Ένα element μπορεί να έχει περισσότερες από μία κλάσεις. Απλά τις γράφεις στο attribute, χωρισμένες με κενό.

<button class="btn btn-primary">Κύριο κουμπί</button>
<button class="btn btn-secondary">Δευτερεύον κουμπί</button>

.btn {
  /* Γενικά στυλ για όλα τα κουμπιά */
  padding: 10px 15px;
  border-radius: 5px;
  border: none;
}
.btn-primary {
  /* Ειδικά στυλ μόνο για τα primary */
  background-color: blue;
  color: white;
}
.btn-secondary {
  /* Ειδικά στυλ μόνο για τα secondary */
  background-color: grey;
  color: black;
}

Αυτή η τεχνική είναι πανίσχυρη και χρησιμοποιείται κατά κόρον σε όλα τα σύγχρονα CSS frameworks.

2.2 Ο ID Selector (#) - Ο μοναδικός αναγνωριστικός αριθμός

Ένα ID είναι ένα μοναδικό αναγνωριστικό για ένα και μόνο ένα element σε ολόκληρη τη σελίδα. Ενώ μπορείς να έχεις 100 στοιχεία με την class="btn", μπορείς να έχεις μόνο ένα στοιχείο με id="main-logo".

Πώς λειτουργεί:

  1. Στο HTML: Προσθέτεις το attribute id="μοναδικό-όνομα" στο element. 
    <header id="main-header">
    <h1>Καλώς ήρθατε!</h1>
</header>
  2. Στο CSS: Για να στοχεύσεις αυτό το ID, χρησιμοποιείς μια δίεση (#) ακολουθούμενη από το όνομα του ID. 
    #main-header {
    background-color: #333;
    color: white;
    padding: 20px;
}

    Αυτό το στυλ θα εφαρμοστεί αποκλειστικά και μόνο στο element που έχει το id="main-header".

Class vs. ID: Πότε χρησιμοποιώ το καθένα;

  • Χρησιμοποίησε CLASS όταν θέλεις να εφαρμόσεις το ίδιο στυλ σε πολλαπλά στοιχεία (π.χ., όλα τα κουμπιά, όλες οι κάρτες προϊόντων, όλα τα προειδοποιητικά μηνύματα). Οι classes είναι το 95% της δουλειάς σου στο CSS.
  • Χρησιμοποίησε ID όταν θέλεις να στοχεύσεις ένα συγκεκριμένο, μοναδικό στοιχείο στη σελίδα (π.χ., την κεντρική κεφαλίδα, το κύριο μενού πλοήγησης, το υποσέλιδο). Τα IDs είναι επίσης χρήσιμα για να "πηδάει" η σελίδα σε αυτά με εσωτερικούς συνδέσμους (όπως κάναμε στο project του βιογραφικού) και για να τα χειριστεί η JavaScript.

2.3 Άλλοι χρήσιμοι Selectors (Combinators & Pseudo-classes)

  • Descendant Selector (κενό): Στοχεύει ένα στοιχείο που βρίσκεται μέσα σε ένα άλλο στοιχείο. 
    /* Στόχευσε ΜΟΝΟ τα links που είναι μέσα σε μια nav */
nav a {
  color: green;
  text-decoration: none; /* Αφαίρεσε την υπογράμμιση */
}
  • Pseudo-class :hover: Εφαρμόζει στυλ όταν ο χρήστης περνάει το ποντίκι του πάνω από ένα στοιχείο. 
    button:hover {
  background-color: lightblue;
  cursor: pointer; /* Άλλαξε τον κέρσορα σε χεράκι */
}

Ώρα για πράξη: Οργανώνουμε το στυλ του βιογραφικού

Πάμε να εφαρμόσουμε τις νέες μας γνώσεις στο style.css του project μας.

  1. Δημιούργησε ένα κοντέινερ: Πρώτα, ας φτιάξουμε μια κλάση .container. Στο index.html, "τύλιξε" ολόκληρη τη σελίδα (από το <header> μέχρι και το <footer>) μέσα σε ένα <div> με αυτή την κλάση. 
    <body>
    <div class="container">
        <header>...</header>
        <main>...</main>
        <footer>...</footer>
    </div>
</body>

    Στο style.css, πρόσθεσε τον παρακάτω κανόνα για να δώσεις στη σελίδα ένα μέγιστο πλάτος και να την κεντράρεις:

    .container {
    width: 80%; /* Η σελίδα θα πιάνει το 80% της οθόνης */
    max-width: 960px; /* Αλλά ποτέ παραπάνω από 960px */
    margin: auto; /* Μαγικός τρόπος για να κεντράρεις οριζόντια ένα block */
}
  2. Στυλ στο μενού πλοήγησης (<nav>): Θέλουμε τα στοιχεία της λίστας να είναι οριζόντια αντί για κάθετα. 
    /* Στόχευσε τη λίστα ΜΟΝΟ μέσα στο nav */
nav ul {
    padding: 0;
    list-style: none; /* Αφαίρεσε τις κουκκίδες */
}

/* Στόχευσε τα list items ΜΟΝΟ μέσα στο nav */
nav li {
    display: inline-block; /* Ο μαγικός τρόπος για να τα φέρεις στη σειρά */
    margin-right: 20px; /* Λίγο κενό μεταξύ τους */
}
  3. Στυλ στα Links της πλοήγησης: 
    nav a {
    text-decoration: none; /* Αφαίρεσε την υπογράμμιση */
    color: #0056b3;
    font-weight: bold;
}
nav a:hover {
    color: #007bff; /* Άλλαξε χρώμα στο hover */
    text-decoration: underline; /* Βάλε υπογράμμιση στο hover */
}
  4. Στυλ στις ενότητες (<section>): Ας προσθέσουμε λίγο "αέρα" γύρω από κάθε ενότητα και μια γραμμή από πάνω για διαχωρισμό. 
    section {
    padding: 20px 0; /* 20px πάνω/κάτω, 0 αριστερά/δεξιά */
    border-top: 1px solid #dddddd; /* Μια λεπτή γκρι γραμμή */
}

    Σώσε τα πάντα και κοίτα τον browser. Η σελίδα αρχίζει να παίρνει μια πολύ πιο οργανωμένη και επαγγελματική μορφή!

Κεφάλαιο 3: The Box Model (Η ανατομία κάθε στοιχείου)

Κάθε HTML element στην οθόνη σου μπορεί να αναλυθεί σε ένα μοντέλο που αποτελείται από τέσσερα ομόκεντρα κουτιά, το ένα μέσα στο άλλο. Από μέσα προς τα έξω, αυτά είναι:

  1. Content (Περιεχόμενο): Ο πυρήνας. Είναι το ίδιο το περιεχόμενο του στοιχείου, δηλαδή το κείμενο, η εικόνα, κλπ. Οι ιδιότητες width και height που ορίζεις στο CSS αναφέρονται (από προεπιλογή) στις διαστάσεις αυτού του κουτιού.

  2. Padding (Εσωτερική περιθωριοποίηση): Ο "αέρας" ανάμεσα στο περιεχόμενο και το πλαίσιο (border) του στοιχείου. Είναι σαν το βαμβάκι που βάζεις μέσα σε ένα κουτί για να προστατέψεις ένα εύθραυστο αντικείμενο. Το padding παίρνει το χρώμα φόντου του στοιχείου.

  3. Border (Πλαίσιο): Η γραμμή που μπορεί να περιβάλλει το padding. Μπορείς να ορίσεις το πάχος, το στυλ (π.χ., συνεχές, διακεκομμένο) και το χρώμα του.

  4. Margin (Εξωτερική περιθωριοποίηση): Ο "αέρας" έξω από το πλαίσιο. Είναι ο κενός χώρος που διαχωρίζει ένα στοιχείο από τα γειτονικά του. Το margin είναι πάντα εντελώς διάφανο.

Οπτικοποίηση του Box Model

Ο καλύτερος τρόπος για να το δεις στην πράξη είναι μέσω των Developer Tools του browser.

  1. Πήγαινε στη σελίδα του βιογραφικού σου.
  2. Πάτα F12 για να ανοίξεις τα DevTools.
  3. Πήγαινε στην καρτέλα "Elements".
  4. Κάνε κλικ στο εργαλείο επιλογής (το εικονίδιο με το βελάκι μέσα σε ένα κουτί, πάνω αριστερά) και επέλεξε οποιοδήποτε στοιχείο στη σελίδα, π.χ., ένα <h2>.
  5. Κοίτα στο κάτω μέρος του δεξιού παραθύρου (στην καρτέλα "Computed"). Θα δεις ένα διάγραμμα ακριβώς όπως η παραπάνω εικόνα, με τις ακριβείς τιμές για το margin, το border, το padding και το content του στοιχείου που επέλεξες. Παίξε μαζί του!

Οι ιδιότητες του Box Model στο CSS

  • width & height: Ορίζουν το πλάτος και το ύψος του content box.
  • padding:
    • padding-top, padding-right, padding-bottom, padding-left
    • Συντομογραφία (shorthand):
      • padding: 10px; (10px σε όλες τις πλευρές)
      • padding: 10px 20px; (10px πάνω/κάτω, 20px αριστερά/δεξιά)
      • padding: 10px 20px 30px 40px; (πάνω, δεξιά, κάτω, αριστερά - με τη φορά του ρολογιού)
  • border:
    • border-width, border-style, border-color
    • Συντομογραφία: border: 1px solid black; (πάχος, στυλ, χρώμα)
  • margin: Λειτουργεί ακριβώς όπως το padding με τις ίδιες συντομογραφίες.
    • margin-top, margin-right, etc.
    • margin: 10px;
    • margin: 10px 20px; etc.

Το πρόβλημα του box-sizing

Από προεπιλογή, ο browser χρησιμοποιεί το box-sizing: content-box;. Αυτό σημαίνει ότι το width και height που ορίζεις αναφέρονται μόνο στο περιεχόμενο. Το τελικό ορατό πλάτος του στοιχείου είναι: width + padding-left + padding-right + border-left + border-right. Αυτό είναι εκνευριστικό. Αν έχεις ένα κουτί με width: 200px και προσθέσεις padding: 10px, το κουτί ξαφνικά γίνεται 220px φαρδύ, κάτι που μπορεί να σου "σπάσει" ολόκληρο το layout.

Η σύγχρονη λύση: box-sizing: border-box; Σχεδόν κάθε σύγχρονος προγραμματιστής ξεκινάει το CSS του με τον παρακάτω "μαγικό" κανόνα:

* {
  box-sizing: border-box;
}
  • Ο * (αστερίσκος) είναι ο universal selector. Στοχεύει όλα τα στοιχεία στη σελίδα.
  • box-sizing: border-box; λέει στον browser: "Όταν ορίζω ένα width: 200px, θέλω το τελικό, ορατό πλάτος του κουτιού (συμπεριλαμβανομένου του padding και του border) να είναι 200px. Το περιεχόμενο θα συρρικνωθεί αυτόματα για να χωρέσει".

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

Ώρα για πράξη: Εφαρμογή του Box Model

  1. Πρόσθεσε το "μαγικό" reset: Στην κορυφή του style.css αρχείου σου, πρόσθεσε τον κανόνα για το box-sizing. Είναι το πρώτο πράγμα που πρέπει να υπάρχει σε κάθε CSS αρχείο. ```css
    • { box-sizing: border-box; } /* Ο υπόλοιπος κώδικας από κάτω */ body { … } ```
  2. Δημιούργησε "Κάρτες": Θέλουμε κάθε <article> μέσα στην ενότητα "Εμπειρία" να μοιάζει με μια διακριτή κάρτα. Πάμε να τους δώσουμε στυλ. 
    /* Στόχευσε τα articles που είναι μέσα στην ενότητα με id="experience" */
#experience article {
    background-color: #ffffff; /* Λευκό φόντο */
    border: 1px solid #dddddd; /* Ένα λεπτό γκρι πλαίσιο */
    border-radius: 5px; /* Στρογγυλεμένες γωνίες */
    padding: 20px; /* Γενναίος "αέρας" γύρω από το περιεχόμενο */
    margin-bottom: 20px; /* Κενό ανάμεσα στις κάρτες */
}
  3. Στυλ στη Φόρμα Επικοινωνίας: Ας κάνουμε τα πεδία της φόρμας πιο όμορφα και μεγάλα. 
    #contact input[type="text"],
#contact input[type="email"],
#contact textarea {
    width: 100%; /* Τα πεδία θα πιάνουν όλο το διαθέσιμο πλάτος */
    padding: 10px; /* Εσωτερικός αέρας για να μην κολλάει το κείμενο */
    margin-top: 5px; /* Λίγο κενό πάνω από κάθε πεδίο */
    border: 1px solid #cccccc;
    border-radius: 4px;
}

#contact button {
    background-color: #0056b3;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

#contact button:hover {
    background-color: #004494;
}

Σώσε και κοίτα το αποτέλεσμα. Οι ενότητες της εμπειρίας μοιάζουν πλέον με διακριτές κάρτες, και η φόρμα είναι πολύ πιο καθαρή και ευχάριστη στη χρήση. Όλα αυτά χάρη στη σωστή διαχείριση του padding, του border και του margin.

Κεφάλαιο 4: Τυπογραφία, Χρώματα και Backgrounds

Σε αυτό το κεφάλαιο θα δούμε τις πιο συνηθισμένες ιδιότητες CSS για να ελέγχουμε την εμφάνιση του κειμένου και των φόντων.

4.1 Έλεγχος της τυπογραφίας (Typography)

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

  • font-family: Ορίζει τη γραμματοσειρά. Είναι καλή πρακτική να δίνεις μια "στοίβα" (font stack) από γραμματοσειρές, από την πιο επιθυμητή προς τη λιγότερο, καταλήγοντας σε μια γενική οικογένεια (serif, sans-serif). 
    body {
    /* Ο browser θα προσπαθήσει πρώτα για την "Georgia".
       Αν δεν υπάρχει, θα πάει στην "Times New Roman".
       Αν δεν υπάρχει ούτε αυτή, θα διαλέξει οποιαδήποτε γραμματοσειρά
       τύπου "serif" υπάρχει στο σύστημα. */
    font-family: Georgia, "Times New Roman", serif;
}

    Tip: Αν ένα όνομα γραμματοσειράς έχει κενά, πρέπει να μπει σε εισαγωγικά.

  • font-size: Καθορίζει το μέγεθος του κειμένου. Οι πιο συνηθισμένες μονάδες είναι:
    • px (pixels): Μια απόλυτη μονάδα. Είναι εύκολη για αρχάριους, αλλά λιγότερο ευέλικτη για responsive design.
    • em και rem: Σχετικές μονάδες. Το 1rem είναι ίσο με το βασικό μέγεθος γραμματοσειράς του <html> element (συνήθως 16px). Είναι η προτιμώμενη μονάδα για τη σύγχρονη ανάπτυξη γιατί επιτρέπει την εύκολη κλιμάκωση ολόκληρης της σελίδας. 
      html {
font-size: 16px; /* Ορίζουμε τη βάση */
}
p {
font-size: 1rem; /* Θα είναι 16px */
}
h1 {
font-size: 2.5rem; /* Θα είναι 2.5 * 16px = 40px */
}

  • font-weight: Καθορίζει το "πάχος" της γραμματοσειράς. Μπορεί να πάρει τιμές όπως normal (η προεπιλογή), bold (έντονο), ή αριθμητικές τιμές (π.χ., 400 για normal, 700 για bold).

  • line-height: Καθορίζει την απόσταση μεταξύ των γραμμών του κειμένου. Είναι εξαιρετικά σημαντικό για την αναγνωσιμότητα. Μια καλή τιμή είναι συνήθως γύρω στο 1.5 ή 1.6 (χωρίς μονάδα, που σημαίνει 1.5 φορές το μέγεθος της γραμματοσειράς). 
    p {
    line-height: 1.6;
}
  • text-align: Στοιχίζει το κείμενο οριζόντια. Τιμές: left (αριστερά), right (δεξιά), center (κέντρο), justify (πλήρης στοίχιση).

4.2 Χρώματα (Colors)

  • color: Ορίζει το χρώμα του κειμένου.
  • background-color: Ορίζει το χρώμα του φόντου ενός στοιχείου.

Υπάρχουν πολλοί τρόποι να ορίσεις ένα χρώμα στο CSS:

  1. Με όνομα (Keywords): red, blue, black. Είναι εύκολα, αλλά πολύ περιορισμένα.
  2. Με δεκαεξαδική τιμή (HEX): Η πιο συνηθισμένη μέθοδος. Ξεκινάει με # και ακολουθούν 6 χαρακτήρες (0-9, A-F) που αντιπροσωπεύουν τις τιμές Κόκκινου, Πράσινου και Μπλε (RRGGBB). #000000 είναι μαύρο, #FFFFFF είναι λευκό, #FF0000 είναι κόκκινο.
  3. Με τιμή RGB/RGBA: Ορίζει το χρώμα με τις τιμές του Κόκκινου, Πράσινου, Μπλε (0-255). Η μορφή RGBA προσθέτει και μια τέταρτη τιμή, το Alpha (διαφάνεια), από 0 (εντελώς διαφανές) έως 1 (εντελώς αδιαφανές). 
    /* Ένα ημιδιαφανές μαύρο φόντο */
.overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

    Συμβουλή: Χρησιμοποίησε online εργαλεία όπως το Adobe Color ή το Coolors για να βρεις αρμονικούς συνδυασμούς χρωμάτων για τα project σου.

4.3 Φόντα (Backgrounds)

Εκτός από το background-color, μπορούμε να ορίσουμε και μια εικόνα ως φόντο.

  • background-image: 
    body {
    background-image: url('path/to/my/background.jpg');
}
  • background-repeat: Καθορίζει αν η εικόνα θα επαναλαμβάνεται (repeat, no-repeat).
  • background-size: Ελέγχει το μέγεθος της εικόνας. Η τιμή cover είναι πολύ χρήσιμη, καθώς κάνει την εικόνα να καλύπτει πάντα ολόκληρη την περιοχή του στοιχείου χωρίς να παραμορφώνεται.
  • background-position: Ορίζει το σημείο έναρξης της εικόνας (π.χ., center, top right).

Ώρα για πράξη: Βελτιώνουμε την εμφάνιση του βιογραφικού

  1. Βελτίωση βασικής τυπογραφίας: Πάμε στο style.css και ας κάνουμε το κείμενο πιο ευανάγνωστο. Τροποποίησε τον κανόνα για το body. 
    body {
    background-color: #f4f4f4;
    color: #333333;
    /* Προσθέτουμε πιο μοντέρνες γραμματοσειρές και line-height */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    font-size: 16px; /* ή 1rem */
}

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

  2. Καλύτερες επικεφαλίδες: Ας αλλάξουμε τη γραμματοσειρά για τις επικεφαλίδες για να έχουμε αντίθεση. 
    h1, h2, h3 {
    /* Διατηρούμε το παλιό χρώμα, αλλά προσθέτουμε και άλλα */
    color: #0056b3;
    font-family: "Georgia", serif;
    line-height: 1.2; /* Οι τίτλοι χρειάζονται πιο "σφιχτό" line-height */
}
  3. Δημιουργία ενός εντυπωσιακού "Hero" Header: Ας κάνουμε το <header> μας πιο δραματικό με ένα φόντο. Στο style.css τροποποιούμε τον selector #main-header που είχαμε από το προηγούμενο κεφάλαιο, αλλά για να το κάνουμε, πρέπει πρώτα να δώσουμε το ID main-header στο <header> μας στο HTML. Προς το παρόν, ας στοχεύσουμε απλά το <header>. 
    header {
    background-color: #2c3e50; /* Ένα σκούρο μπλε-γκρι */
    color: #ffffff; /* Λευκό κείμενο για αντίθεση */
    padding: 40px 20px; /* Περισσότερος αέρας */
    text-align: center; /* Κεντράρουμε τα πάντα */
    margin-bottom: 30px;
}
  4. Καθαρισμός χρωμάτων στο Header: Επειδή το φόντο του header είναι πλέον σκούρο, τα links που ήταν μπλε δεν θα φαίνονται. Πρέπει να τα κάνουμε λευκά, αλλά μόνο αυτά που είναι μέσα στο header. 
    header h1 {
    color: #ffffff;
}

header nav a {
    color: #ffffff;
}
header nav a:hover {
    color: #1abc9c; /* Ένα ωραίο τυρκουάζ για το hover */
}

    Σώσε και κοίτα πόσο πιο "σχεδιασμένη" και επαγγελματική φαίνεται η σελίδα. Μόνο με αλλαγές στην τυπογραφία και τα χρώματα, η εμπειρία του χρήστη αναβαθμίζεται δραματικά.

Κεφάλαιο 5: CSS Layouts με Flexbox

Το Flexible Box Layout Module, γνωστό ως Flexbox, είναι ένα μονοδιάστατο μοντέλο διάταξης. Αυτό σημαίνει ότι είναι σχεδιασμένο για να διατάσσει στοιχεία είτε σε μια σειρά (row) είτε σε μια στήλη (column). Είναι ιδανικό για τα πάντα, από τη στοίχιση ενός μενού πλοήγηση μέχρι τη διάταξη καρτών προϊόντων σε μια γραμμή.

Οι δύο βασικοί παράγοντες: Ο Flex Container και τα Flex Items

Για να λειτουργήσει το Flexbox, χρειάζεσαι δύο πράγματα:

  1. Ένα μητρικό στοιχείο (parent element), το οποίο θα ονομάσουμε flex container.
  2. Ένα ή περισσότερα θυγατρικά στοιχεία (child elements), τα οποία θα ονομάσουμε flex items.

Η μαγεία ξεκινά όταν δηλώνουμε display: flex; στον container.

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
}

Μόνο με αυτή τη μία γραμμή, τα div που πριν ήταν το ένα κάτω από το άλλο (γιατί είναι block-level elements), τώρα θα σταθούν μαγικά το ένα δίπλα στο άλλο σε μια σειρά.

Οι πιο σημαντικές ιδιότητες του Flex Container

Οι ιδιότητες που εφαρμόζουμε στον container ελέγχουν τη συνολική συμπεριφορά όλων των items.

  • display: flex;: Η εντολή που ενεργοποιεί το Flexbox.
  • flex-direction: Καθορίζει τον κύριο άξονα.
    • row (προεπιλογή): Τα items διατάσσονται οριζόντια, από αριστερά προς τα δεξιά.
    • column: Τα items διατάσσονται κάθετα, από πάνω προς τα κάτω.
  • justify-content: Στοιχίζει τα items κατά μήκος του κύριου άξονα (οριζόντια αν η flex-direction είναι row). Αυτή είναι ίσως η πιο χρήσιμη ιδιότητα!
    • flex-start (προεπιλογή): Τα items στοιχίζονται στην αρχή.
    • flex-end: Τα items στοιχίζονται στο τέλος.
    • center: Τα items στοιχίζονται στο κέντρο.
    • space-between: Τα items απλώνονται ομοιόμορφα. Το πρώτο πάει στην άκρη αριστερά, το τελευταίο στην άκρη δεξιά, και ο υπόλοιπος χώρος μοιράζεται ανάμεσά τους.
    • space-around: Όπως το space-between, αλλά με κενό και στις άκρες.
  • align-items: Στοιχίζει τα items κάθετα στον κύριο άξονα (κάθετα αν η flex-direction είναι row).
    • stretch (προεπιλογή): Τα items "ξεχειλώνουν" για να γεμίσουν το ύψος του container.
    • flex-start: Στοιχίζονται στην κορυφή.
    • flex-end: Στοιχίζονται στο κάτω μέρος.
    • center: Στοιχίζονται κάθετα στο κέντρο (ιδανικό για κάθετη στοίχιση!).
  • flex-wrap: Καθορίζει τι θα συμβεί αν τα items δεν χωράνε σε μια γραμμή.
    • nowrap (προεπιλογή): Θα συρρικνωθούν για να χωρέσουν.
    • wrap: Αν δεν χωράνε, θα "σπάσουν" και θα συνεχίσουν στην επόμενη γραμμή.

Ιδιότητες για τα Flex Items (για πιο εξειδικευμένο έλεγχο)

  • flex-grow: Ορίζει αν ένα στοιχείο μπορεί να "μεγαλώσει" για να καταλάβει τον διαθέσιμο χώρο. Μια τιμή flex-grow: 1; σε ένα item θα το κάνει να πάρει όλο τον εναπομείναντα χώρο.
  • order: Αλλάζει τη σειρά εμφάνισης των items, ανεξάρτητα από τη σειρά τους στην HTML.

Ώρα για πράξη: Μεταμορφώνουμε το Layout του βιογραφικού

Θα χρησιμοποιήσουμε το Flexbox για να κάνουμε δύο μεγάλες βελτιώσεις στο layout μας.

1. Βελτίωση του μενού πλοήγησης στο Header Το μενού μας είναι ήδη οριζόντιο, αλλά η στοίχιση είναι λίγο τυχαία. Ας το κάνουμε πιο στιβαρό. Στο HTML, βεβαιώσου ότι έχεις τη δομή header > nav > ul > li*4 > a. Πάμε στο style.css και ας αλλάξουμε τους κανόνες του nav.

header {
    /* ... οι παλιές ιδιότητες ... */
    /* Προσθέτουμε Flexbox για να στοιχίσουμε τον τίτλο και το nav */
    display: flex;
    justify-content: space-between; /* Στέλνει το h1 αριστερά και το nav δεξιά */
    align-items: center; /* Τα στοιχίζει και κάθετα στο κέντρο */
    /* Αφαιρούμε το παλιό text-align */
    /* text-align: center; */
}


nav ul {
    /* ... οι παλιές ιδιότητες ... */
    /* Τώρα ο ul είναι ο flex container για τα li */
    display: flex;
}

/* Δεν χρειαζόμαστε πια αυτόν τον κανόνα, το flexbox το χειρίζεται */
/* nav li {
    display: inline-block;
} */

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

2. Δημιουργία πλέγματος (Grid) για τις Δεξιότητες Η λίστα με τις δεξιότητες (#skills ul) είναι λίγο βαρετή. Ας τη μετατρέψουμε σε ένα πλέγμα από "ταμπελάκια".

Στο style.css:

#skills ul {
    /* Ενεργοποιούμε το flexbox στον container της λίστας */
    display: flex;
    flex-wrap: wrap; /* Επιτρέπουμε στις κάρτες να "σπάσουν" σε νέα γραμμή */
    justify-content: center; /* Κεντράρουμε τις κάρτες οριζόντια */
    padding: 0;
    list-style: none;
}

#skills li {
    /* Αυτά είναι τα flex items (τα ταμπελάκια) */
    background-color: #e0e0e0;
    color: #333;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    font-weight: bold;
}

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

Συγχαρητήρια! Μόλις έμαθες το 80% των περιπτώσεων χρήσης του Flexbox. Είναι ένα πανίσχυρο εργαλείο που θα χρησιμοποιείς καθημερινά. Με το Flexbox, η κάθετη στοίχιση παύει να είναι εφιάλτης και η δημιουργία σειρών από κάρτες γίνεται παιχνιδάκι.

Κεφάλαιο 6: Responsive Design & CSS Grid

Μέρος 1: Η βασική τεχνική - Media Queries

Το θεμελιώδες εργαλείο για το Responsive Design είναι οι Media Queries. Μια Media Query είναι, με απλά λόγια, ένας "if" statement (μια συνθήκη) για το CSS σου. Σου επιτρέπει να εφαρμόσεις ένα σετ από κανόνες CSS μόνο όταν μια συγκεκριμένη συνθήκη είναι αληθής. Η πιο συνηθισμένη συνθήκη είναι το πλάτος της οθόνης.

Η σύνταξη:

@media (max-width: 600px) {
  /*
    ΑΥΤΟΙ οι κανόνες CSS θα εφαρμοστούν ΜΟΝΟ
    όταν το πλάτος του viewport είναι 600 pixels ή λιγότερο.
  */
  body {
    background-color: lightblue;
  }
}

Η φιλοσοφία του "Mobile-First" Η σύγχρονη και καλύτερη προσέγγιση στο responsive design είναι το Mobile-First. Αυτό σημαίνει ότι:

  1. Γράφεις πρώτα το CSS για την πιο απλή εκδοχή: τις μικρές οθόνες (κινητά). Συνήθως, αυτό σημαίνει ότι τα πάντα είναι σε μια απλή, κάθετη στήλη.
  2. Στη συνέχεια, χρησιμοποιείς media queries με min-width για να προσθέσεις πιο σύνθετα layouts για μεγαλύτερες οθόνες. ```css /* — Στυλ για Κινητά (η βάση μας) — / .container { width: 90%; } .header { flex-direction: column; / Στοιχεία το ένα κάτω από το άλλο */ }

/* — Στυλ για Tablet και πάνω — / @media (min-width: 768px) { .container { width: 80%; } .header { flex-direction: row; / Στοιχεία το ένα δίπλα στο άλλο */ } }

Αυτή η προσέγγιση οδηγεί σε πιο καθαρό και αποδοτικό κώδικα.

#### **Μέρος 2: Το "Μεγάλο Αδερφάκι" του Flexbox - CSS Grid**

Ενώ το Flexbox είναι τέλειο για μονοδιάστατα layouts (μια σειρά *ή* μια στήλη), το **CSS Grid** είναι φτιαγμένο για **δισδιάστατα layouts** (σειρές *και* στήλες ταυτόχρονα). Είναι το ιδανικό εργαλείο για να ορίσεις τη γενική δομή ολόκληρης της σελίδας σου.

**Flexbox vs. Grid: Πότε χρησιμοποιώ το καθένα;**
*   **Flexbox:** Για να στοιχίσεις στοιχεία *μέσα* σε ένα component (π.χ., τα items ενός μενού, ένα κουμπί δίπλα σε ένα πεδίο κειμένου).
*   **Grid:** Για τη διάταξη των *μεγάλων "κομματιών"* της σελίδας (π.χ., "θέλω ένα header που πιάνει όλο το πλάτος, ένα main content στα αριστερά και ένα sidebar στα δεξιά, και ένα footer κάτω από όλα").

**Η Βασική Χρήση του Grid:**
```html
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.grid-container {
  display: grid;
  /* Δημιούργησε ένα πλέγμα με 3 στήλες ίσου πλάτους */
  grid-template-columns: 1fr 1fr 1fr;
  /* Δημιούργησε κενό 20px ανάμεσα στα κελιά */
  gap: 20px;
}
  • display: grid;: Ενεργοποιεί το Grid.
  • grid-template-columns: Ορίζει τις στήλες σου. Η μονάδα fr (fractional unit) είναι μαγική: λέει στον browser να μοιράσει τον διαθέσιμο χώρο σε κλάσματα. 1fr 1fr 1fr σημαίνει "τρεις ίσες στήλες". 2fr 1fr σημαίνει "η πρώτη στήλη θα είναι διπλάσια από τη δεύτερη".
  • gap (ή grid-gap): Ορίζει το κενό ανάμεσα στις σειρές και τις στήλες.

Ώρα για πράξη: Κάνουμε το βιογραφικό μας Responsive

Βήμα 1: Το υποχρεωτικό Viewport Meta Tag Βεβαιώσου ότι στο <head> του index.html σου υπάρχει αυτή η γραμμή. Την είχαμε βάλει στο boilerplate, αλλά τώρα καταλαβαίνουμε τη σημασία της.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Αυτή η γραμμή λέει στα κινητά: "Μην προσπαθήσεις να σμικρύνεις τη σελίδα. Θεώρησε ότι το πλάτος σου είναι το πραγματικό πλάτος της συσκευής σου, και ξεκίνα με αρχικό ζουμ 100%". Χωρίς αυτό, οι media queries δεν λειτουργούν σωστά.

Βήμα 2: Προσαρμογή για κινητά (Mobile-First) Πάμε στο style.css. Θα τροποποιήσουμε κάποιους από τους κανόνες μας ώστε να είναι η βάση μας για τα κινητά.

/* Αλλάζουμε τη διάταξη του header για κινητά */
header {
    /* ...οι ιδιότητες χρώματος και padding παραμένουν... */
    display: flex;
    align-items: center;
    /* αλλά τα θέλουμε το ένα κάτω από το άλλο στο κινητό */
    flex-direction: column;
    justify-content: center; /* τα κεντράρουμε και κάθετα */
}

/* Και το μενού πλοήγησης γίνεται κάθετο */
nav ul {
    display: flex;
    flex-direction: column;
    align-items: center; /* τα κεντράρουμε */
    padding: 0;
    list-style: none;
}
nav li {
    margin-bottom: 10px;
}

Αν κοιτάξεις τώρα τη σελίδα (ή σμικρύνεις το παράθυρο του browser), θα δεις ότι όλα είναι σε μια ωραία, κάθετη διάταξη, ιδανική για κινητά.

Βήμα 3: Προσθήκη του Breakpoint για μεγαλύτερες οθόνες Τώρα, στο τέλος του style.css αρχείου σου, θα προσθέσουμε την media query μας.

/* --- TABLET & DESKTOP STYLES --- */
@media (min-width: 768px) {
  
  /* Επαναφέρουμε τη διάταξη του header για μεγάλες οθόνες */
  header {
    flex-direction: row; /* Γυρνάμε σε οριζόντια διάταξη */
    justify-content: space-between; /* Το λογότυπο αριστερά, το nav δεξιά */
  }

  /* Και το μενού πλοήγησης ξαναγίνεται οριζόντιο */
  nav ul {
    flex-direction: row;
  }
  nav li {
    margin-bottom: 0; /* Αφαιρούμε το κάθετο margin */
    margin-left: 20px; /* Προσθέτουμε οριζόντιο */
  }

  /* Bonus: Ας κάνουμε την εμπειρία και τις δεξιότητες
     να είναι δίπλα-δίπλα σε μεγάλες οθόνες χρησιμοποιώντας Grid!
     Πρώτα, στο HTML, "τυλίγουμε" τις ενότητες experience και skills
     σε ένα νέο div: <div class="main-content-grid"> ... </div> */
  .main-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Η εμπειρία 2/3, οι δεξιότητες 1/3 */
    gap: 30px; /* Κενό ανάμεσά τους */
  }
}

Για να δουλέψει το bonus, το main σου στο index.html θα πρέπει να μοιάζει κάπως έτσι:

<main>
  <section id="about">...</section>
  <div class="main-content-grid">
      <section id="experience">...</section>
      <section id="skills">...</section>
  </div>
  <section id="contact">...</section>
</main>

Συγχαρητήρια! Μόλις ολοκλήρωσες ολόκληρη την ενότητα του CSS! Πάρε μια στιγμή για να δεις τη δουλειά σου. Έχεις πάρει έναν απλό σκελετό HTML και τον έχεις μεταμορφώσει σε μια πλήρως στυλιζαρισμένη, επαγγελματική και, το κυριότερο, responsive ιστοσελίδα. Οι γνώσεις που έχεις αποκτήσει σε αυτή την ενότητα (Selectors, Box Model, Flexbox, και Responsive Design) αποτελούν τον πυρήνα της δουλειάς κάθε front-end developer.

Κεφάλαιο 7: Mini Project - Πλήρες Styling και Responsive Design

Ο Στόχος: Να πάρουμε το project του βιογραφικού, στο οποίο προσθέταμε στυλ βήμα-βήμα, και να το ολοκληρώσουμε. Θα κάνουμε τις τελικές προσαρμογές, θα προσθέσουμε μερικές "πινελιές" και θα διασφαλίσουμε ότι η σελίδα δείχνει εξαιρετική σε όλες τις συσκευές. Αυτό το κεφάλαιο λειτουργεί ως μια πλήρης ανασκόπηση ολόκληρης της ενότητας CSS.

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

Βήμα 1: Review & Refactoring (Ανασκόπηση & Αναδιοργάνωση) Πριν προσθέσουμε νέα πράγματα, είναι πάντα καλή πρακτική να κοιτάμε τον κώδικα που ήδη έχουμε.

  • HTML: Είναι ο κώδικάς μας semantic; Έχουμε τα σωστά <header>, <main>, <section>, <footer>; Έχουμε alt tags σε όλες τις εικόνες; Τα id και class ονόματα βγάζουν νόημα;
  • CSS: Είναι το style.css μας οργανωμένο; Μήπως επαναλαμβάνουμε τον ίδιο κώδικα; Μπορούμε να βάλουμε σχόλια για να το κάνουμε πιο ευανάγνωστο;

Παράδειγμα οργάνωσης στο style.css:

/* --- Γενικά Στυλ & Resets --- */
* { box-sizing: border-box; }
body { ... }
.container { ... }
h1, h2, h3 { ... }

/* --- Στυλ Header & Navigation --- */
header { ... }
nav ul { ... }

/* --- Στυλ Κυρίως Περιεχομένου (Main) --- */
.main-content-grid { ... }
section { ... }
#experience article { ... }

/* --- Στυλ Footer --- */
footer { ... }

/* --- Responsive Media Queries --- */
@media (min-width: 768px) {
  /* ... */
}

Βήμα 2: Προσθήκη "Πινελιών" (Visual Polish) Ας προσθέσουμε μερικές μικρές λεπτομέρειες που κάνουν μεγάλη διαφορά.

  • Σκιά στις κάρτες: Ας κάνουμε τις κάρτες της εμπειρίας να "αιωρούνται" λίγο. 
    /* Προσθέτουμε τη νέα ιδιότητα στον κανόνα για τα article */
#experience article {
    /* ... οι παλιές ιδιότητες ... */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
  • Πιο "smooth" μεταβάσεις: Ας κάνουμε την αλλαγή χρώματος στα links να γίνεται ομαλά αντί για απότομα. 
    /* Προσθέτουμε την ιδιότητα transition στα links του nav */
nav a {
  /* ... οι παλιές ιδιότητες ... */
  transition: color 0.3s ease;
}
/* Ομοίως και στο κουμπί της φόρμας */
#contact button {
    /* ... οι παλιές ιδιότητες ... */
    transition: background-color 0.3s ease;
}
  • Προσαρμοσμένη γραμματοσειρά από το Google Fonts: Ας κάνουμε τη σελίδα μας πιο μοναδική, χρησιμοποιώντας το Google Fonts.
    1. Πηγαίνουμε στο https://fonts.google.com/.
    2. Βρίσκουμε δύο γραμματοσειρές που μας αρέσουν, μία για τους τίτλους (π.χ., "Merriweather") και μία για το κυρίως κείμενο (π.χ., "Lato").
    3. Τις επιλέγουμε (πατώντας "Get font" και μετά "Get embed code").
    4. Το Google Fonts θα μας δώσει ένα <link> tag. Το αντιγράφουμε και το βάζουμε στο <head> του index.html μας, πριν από το δικό μας style.css. 
      <!-- Μέσα στο <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
    5. Τώρα στο style.css μπορούμε να τις χρησιμοποιήσουμε, ακολουθώντας τις οδηγίες που δίνει το Google Fonts: 
      body {
  font-family: 'Lato', sans-serif;
  /* ... */
}
h1, h2, h3 {
  font-family: 'Merriweather', serif;
  /* ... */
}

Βήμα 3: Τελικός έλεγχος του Responsive Design Αυτή είναι η πιο κρίσιμη στιγμή. Πρέπει να ελέγξουμε τη σελίδα μας σε διαφορετικά πλάτη οθόνης.

  1. Άνοιξε τη σελίδα στον browser σου.
  2. Άνοιξε τα Developer Tools (F12).
  3. Βρες και πάτα το εικονίδιο "Toggle device toolbar" (μοιάζει με κινητό και tablet).
  4. Τώρα μπορείς να δεις τη σελίδα σου όπως θα φαινόταν σε διάφορες συσκευές (π.χ., iPhone, Pixel, iPad) ή να σύρεις τις άκρες για να δεις πώς συμπεριφέρεται σε κάθε πιθανό πλάτος.

Ερωτήσεις που πρέπει να κάνουμε στον εαυτό μας:

  • Υπάρχει κάποιο σημείο όπου το κείμενο "σπάει" άσχημα ή τα στοιχεία συμπιέζονται υπερβολικά;
  • Μήπως το μενού γίνεται πολύ στριμωγμένο πριν το breakpoint των 768px; Ίσως χρειαστούμε ένα ενδιάμεσο breakpoint.
  • Είναι τα κουμπιά και τα links αρκετά μεγάλα ώστε να μπορεί κάποιος να τα πατήσει εύκολα με το δάχτυλό του σε μια οθόνη αφής;
  • Μήπως τα μεγέθη των γραμματοσειρών είναι πολύ μεγάλα για κινητό ή πολύ μικρά για desktop; Μπορούμε να τα προσαρμόσουμε μέσα στις media queries.

Παράδειγμα βελτίωσης: Ας πούμε ότι οι τίτλοι μας είναι πολύ μεγάλοι για τα κινητά.

/* ...στο τέλος του style.css, μέσα στην media query... */
@media (min-width: 768px) {
  /* ...οι παλιοί κανόνες... */
  h1 { font-size: 3rem; }
  h2 { font-size: 2.2rem; }
}

/* Αλλά έξω από την media query, θα έχουμε μικρότερα μεγέθη για κινητά: */
h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }

(Λόγω του "cascading" του CSS, οι κανόνες εκτός media query θα ισχύουν για όλους, και αυτοί εντός θα τους υπερκαλύψουν για τις μεγαλύτερες οθόνες).

Βήμα 4: Το τελικό "Commit" Έχουμε τελειοποιήσει το styling και το responsive design. Η δουλειά μας για αυτή την ενότητα έχει ολοκληρωθεί. Είναι η ιδανική στιγμή για να αποθηκεύσουμε την πρόοδό μας:

  1. git add .
  2. git commit -m "Finalize CSS styling and responsive design for resume project"
  3. git push

Με την ολοκλήρωση αυτού του Mini Project, έχεις πλέον ένα απτό, ολοκληρωμένο κομμάτι δουλειάς που συνδυάζει όλα όσα έμαθες στην HTML και το CSS. Έχεις έναν σωστά δομημένο, semantic, όμορφο και πλήρως responsive ιστότοπο. Αυτό είναι ένα τεράστιο επίτευγμα και αποτελεί το τέλειο θεμέλιο για να χτίσεις πάνω του με JavaScript.