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) σε προηγούμενη ανάρτηση. Δείτε ακόμη πως εμφανίζουμε και αλλάζουμε χρώματα σε προηγούμενη ανάρτηση.

 

HTML Στυλ – CSS, γραμματοσειρές, Box Μοντέλο, id, class.

internet-594148_1280

HTML Στυλ – CSS

CSS σημαίνει Cascading Style Sheets.
Μπορείτε να προσθέσετε CSS με τους παρακάτω τρόπους:

1. Inline – χρησιμοποιώντας ένα χαρακτηριστικό στυλ στα στοιχεία HTML

Δοκιμάστε!

 

2. Εσωτερική – χρησιμοποιώντας ένα style στοιχείο στην ενότητα head

Δοκιμάστε!

 

3. Εξωτερικές – χρησιμοποιώντας ένα ή περισσότερα εξωτερικά αρχεία CSS.
Ένα εξωτερικό αρχείο CSS μπορεί να γραφεί σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου .
Το αρχείο δεν πρέπει να περιέχει καθόλου html tags.
Το αρχείο αρχείο CSS πρέπει να αποθηκεύονται με την επέκταση .css

Δοκιμάστε!

 

CSS – γραμματοσειρές
Το color ορίζει το χρώμα του κειμένου.
Το font-family καθορίζει τη γραμματοσειρά.
To font-size καθορίζει το μέγεθος του κειμένου.

Δοκιμάστε!

 

CSS – Box Μοντέλο
Κάθε στοιχείο HTML έχει ένα αόρατο κουτί γύρω του.
Το border καθορίζει το περίγραμμα.
Το padding ορίζει το κενό στο εσωτερικό του περιγράμματος.
Το margin ορίζει το κενό στο εξωτερικό του περιγράμματος.

Δοκιμάστε!

 

CSS – id 
Για να ορίσετε ένα ιδιαίτερο στυλ για ένα συγκεκριμένο στοιχείο HTML, πρέπει να προσθέσετε το id του.

CSS – class
Για να ορίσετε ένα στυλ για μία κατηγορία στοιχείων HTML, προσθέστε την class του.

Δοκιμάστε!

 

Καλή επιτυχία.