CSS – Cascading Style Sheets

Τι είναι τα CSS – Cascading Style Sheets

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

Υπάρχουν δύο είδη επιλογέων:
1. Ο επιλογέας id που χρησιμοποιεί το id ενός στοιχείου HTML για να το επιλέξει και πρέπει να είναι μοναδικό μέσα σε μια σελίδα. Για να επιλέξετε ένα στοιχείο με συγκεκριμένη id, πρέπει να γράψετε ένα ( # ) χαρακτήρα, ακολουθούμενο από το id.
2. Ο επιλογέας class που επιλέγει στοιχεία με ένα συγκεκριμένο χαρακτηριστικό. Για να επιλέξετε στοιχεία με μια συγκεκριμένη class, πρέπει να γράψετε μία τελεία (.), ακολουθούμενη από το όνομα της class.

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

Δοκιμάστε!

 

Πως προσθέτουμε CSS, γραμματοσειρές, χρώματα, border, padding, margin

Μπορείτε να δείτε πως προσθέτουμε CSS, πως ορίζουμε και μορφοποιούμε γραμματοσειρές και τι είναι το Box Μοντέλο(border, padding, margin) σε προηγούμενη ανάρτηση. Δείτε ακόμη πως εμφανίζουμε και αλλάζουμε χρώματα σε προηγούμενη ανάρτηση.