Εισαγωγή CSS

Πίνακας περιεχομένων

Η CSS είναι η γλώσσα που χρησιμοποιούμε για το στυλ μιας ιστοσελίδας.

Τι είναι το CSS;

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

Επίδειξη CSS - Μία σελίδα HTML - Πολλαπλά στυλ!

Εδώ θα εμφανίσουμε μια σελίδα HTML που εμφανίζεται με τέσσερα διαφορετικά φύλλα στυλ. Κάντε κλικ στο "Φύλλο στυλ 1", "Φύλλο στυλ 2", "Φύλλο στυλ 3", "Φύλλο στυλ 4" παρακάτω σύνδεσμοι για να δείτε τα διαφορετικά στυλ:

Γιατί να χρησιμοποιήσετε CSS;

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

Παράδειγμα CSS

body
{
  background-color: lightblue;
}

h1
{
  color: white;
  text-align: center;
}

p
{
   
font-family: verdana;
  font-size: 20px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

Το CSS έλυσε ένα μεγάλο πρόβλημα

Η HTML ΠΟΤΕ δεν προοριζόταν να περιέχει ετικέτες για τη μορφοποίηση μιας ιστοσελίδας!

HTML ήταν δημιουργήθηκε για να περιγράψει το περιεχόμενο μιας ιστοσελίδας, όπως:

<h1>Αυτή είναι μια επικεφαλίδα</h1>

<p>Αυτή είναι μια παράγραφος.</p>

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

Για να λύσει αυτό το πρόβλημα, η Κοινοπραξία του Παγκόσμιου Ιστού (W3C) δημιούργησε το CSS.

Το CSS αφαίρεσε τη μορφοποίηση στυλ από τη σελίδα HTML!

Εάν δεν ξέρετε τι είναι η HTML, σας προτείνουμε να διαβάσετε το Οδηγό HTML.

Το CSS εξοικονομεί πολλή δουλειά!

Οι ορισμοί στυλ αποθηκεύονται συνήθως σε εξωτερικά αρχεία .css.

Με ένα εξωτερικό αρχείο φύλλου στυλ, μπορείτε να αλλάξετε την εμφάνιση ενός ολόκληρου ιστότοπου αλλάζοντας μόνο ένα αρχείο!