Μάθετε Χ σε Υ λεπτά

/* Τα σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ. 
   Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */

/* ####################
   ## ΚΑΝΟΝΕΣ
   #################### */

/* ένας κανόνας χρησιμοποιείται για να στοχεύσουμε ένα αντικείμενο (selector). */
selector { property: value; /* περισσότερες ιδιότητες...*/ }

/*
Αυτό είναι ενα παράδειγμα αντικειμένου
<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
*/

/* Μπορούμε να το στοχεύσουμε με την χρήση CSS κλάσεων */
.class1 { }

/* Ή και με τις δύο κλάσεις! */
.class1.class2 { }

/* Και με το όνομα του */
div { }

/* Ή με το id του */
#anID { }

/* Ή με το γεγονός ότι περιέχει ενα attribute */
[attr] { font-size:smaller; }

/* Ή οτι το attribute αυτό έχει μια συγκεκριμένη τιμή */
[attr='value'] { font-size:smaller; }

/* Ξεκινάει απο το λεκτικό (CSS 3) */
[attr^='val'] { font-size:smaller; }

/* Καταλήγει σε αυτο το λεκτικό (CSS 3) */
[attr$='ue'] { font-size:smaller; }

/* Περιέχει κάποιο λεκτικό */
[otherAttr~='foo'] { }
[otherAttr~='bar'] { }

/* περιέχει το λεκτικό σε λίστα χωρισμένη με παύλες, δηλαδή: "-" (U+002D) */
[otherAttr|='en'] { font-size:smaller; }


/* Μπορούμε να προσθέσουμε μεταξύ τους selectors για να δημιουργήσουμε πιο αυστηρούς. 
  Δεν βάζουμε κενά ανάμεσα. */
div.some-class[attr$='ue'] { }

/* Μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται μέσα σε άλλα. */
div.some-parent > .class-name { }

/* Ή κάποιο αντικείμενο απόγονο ανεξαρτήτου του βάθους της σχέσης τους. */
div.some-parent .class-name { }

/* ΠΡΟΣΟΧΗ: ο ίδιος selector χωρίς κενά έχει άλλο νόημα. (Άσκηση προς τον αναγνώστη) */
div.some-parent.class-name { }

/* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */
.i-am-just-before + .this-element { }

/* Ή οποιοδήποτε αντικείμενο που προηγείται */
.i-am-any-element-before ~ .this-element { }

/* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια 
  ορισμένη κατάασταση. */

/* π.χ. όταν ο κέρσορας είναι πάνω απο ένα αντικείμενο */
selector:hover { }

/* ή ένας υπερσύνδεσμος που πατήθηκε */
selector:visited { }

/* ή που δεν πατήθηκε */
selected:link { }

/* ή ένα αντικείμενο που επιλέχθηκε */
selected:focus { }

/* οποιοδήποτε αντικείμενο είναι το πρώτο παιδί των γονέων του */
selector:first-child {}

/* οποιοδήποτε αντικείμενο είναι το πρώτοτελευταίο παιδί των γονέων του */
selector:last-child {}

/* Όπως και με τις ψευδο-κλάσεις, τα ψευδο-αντικείμενα μας επιτρέπουν τα τροποοιήσουμε συγκεκριμένα 
  κομμάτια της σελίδας */

/* επιλέγει το ψευδο-αντικείμενο ακριβώς πριν απο το αντικείμενο */
selector::before {}

/* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */
selector::after {}

/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να 
  επιλέξουμε όλα τα αντικείμενα */
* { } /* όλα τα αντικείμενα της σελίδας */
.parent * { } /* όλους τους απόγονους */
.parent > * { } /* όλους τους απόγονους πρώτου επιπέδου */

/* ####################
   ## Ιδιότητες
   #################### */

selector {
    
    /* Οι μονάδες μπορούν να είναι είτε απόλυτες είτε σχετικές */
    
    /* Σχετικές μονάδες */
    width: 50%;       /* ποσοστό επί του πλάτους του γονέα */
    font-size: 2em;   /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */
    font-size: 2rem;  /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχία */
    font-size: 2vw;   /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */
    font-size: 2vh;   /* ή τους ύψους */
    font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */
    font-size: 2vmax; /* ή το μεγαλύτερο */
    
    /* Απόλυτες μονάδες */
    width: 200px;     /* pixels */
    font-size: 20pt;  /* στιγμες */
    width: 5cm;       /* εκατοστά */
    min-width: 50mm;  /* χιλιοστά */
    max-width: 5in;   /* ίντσες */
    
    /* Χρώματα */
    color: #F6E;                 /* σύντομη δεκαεξαδική μορφή */
    color: #FF66EE;              /* δεκαεξαδική μορφή */
    color: tomato;               /* χρώμα με το όνομα του (συγκεκριμένα χρώματα) */
    color: rgb(255, 255, 255);   /* τιμή RGB */
    color: rgb(10%, 20%, 50%);   /* τιμή RGB με ποσοστά */
    color: rgba(255, 0, 0, 0.3); /* τιμή RGBA (CSS3) σσ. 0 < a < 1 */
    color: transparent;          /* όπως και το παραπάνω με a = 0 */
    color: hsl(0, 100%, 50%);    /* τιμή hsl με ποσοστά (CSS 3) */
    color: hsla(0, 100%, 50%, 0.3); /* τιμή hsla με ποσοστά και a */
    
    /* Εικόνες μπορούν να τοποθετηθούν στον φόντο ενός αντικειμένου */
    background-image: url(/img-path/img.jpg);
    
    /* Γραμματοσειρές */
    font-family: Arial;
    /* εάν η γραμματοσειρα περιέχει κενά */
    font-family: "Courier New";
    /* εάν η πρώτη γραμματοσειρα δε βρεθεί εγκατεστημένη στο Λειτουργικό Σύστυμα, αυτόματα 
      επιλέγετε η δεύτερη, κ.κ.ε. */
    font-family: "Courier New", Trebuchet, Arial, sans-serif;
}

<!-- Πρέπει να συμπεριλάβουμε το αρχείο στην επικεφαλίδα(head) ενος HTML αρχείου.
  σσ. http://stackoverflow.com/questions/8284365 -->
<link rel='stylesheet' type='text/css' href='path/to/style.css' />

<!-- Μπορούμε να το ενσωματώσουμε -->
<style>
   a { color: purple; }
</style>

<!-- Ή απευθείας σε κάποιο αντικείμενο (inline) -->
<div style="border: 1px solid red;">
</div>

/* A */
p.class1[attr='value']

/* B */
p.class1 { }

/* C */
p.class2 { }

/* D */
p { }

/* E */
p { property: value !important; }

<p style='/*F*/ property:value;' class='class1 class2' attr='value' />