Βασικές αρχές της γλώσσας CSS

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

Συνήθως, οι εντολές CSS (στυλ) αποθηκεύονται σε ένα ξεχωριστό αρχείο, το οποίο συνδέεται με μια ειδική ετικέτα σε όλες τις HTML σελίδες του site μας.

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

Το αρχείο με τα στυλ πρέπει να έχει επέκταση .css. Για να συνδέσετε ένα τέτοιο αρχείο σε μια σελίδα HTML, στην ετικέτα head θα πρέπει να γράψετε την ακόλουθη κατασκευή:

<link rel="stylesheet" href="fileName.css">

Στο επόμενο παράδειγμα, στο αρχείο HTML μας συνδέεται το αρχείο CSS styles.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<p>
			This is a paragraph with text.
		</p>
	</body>
</html>

Δημιουργήστε και συνδέστε σε όλες τις σελίδες σας το αρχείο styles.css.