CSS: Οδηγός Cascading Style Sheets για Web Design

Η CSS (Cascading Style Sheets) καθορίζει την εμφάνιση και τη διάταξη των HTML στοιχείων. Με CSS διαχειριζόμαστε χρώματα, γραμματοσειρές, αποστάσεις, layouts, responsive σχεδιασμό, transitions και animations.

Τρόποι ενσωμάτωσης CSS

/* External stylesheet: μέσα στο αρχείο style.css */

/* Internal CSS: μέσα σε <style> στο HTML */

/* Inline CSS: απευθείας σε HTML attribute (χρήση με φειδώ) */

/* Σύνδεση εξωτερικού αρχείου στο HTML:
<link rel="stylesheet" href="style.css">
*/

Βασική σύνταξη και selectors

/* selector { property: value; } */
p {
    color: #222222;
    font-size: 16px;
}

/* Element selector */
h1 { font-size: 2rem; }

/* Class selector */
.card { padding: 1rem; }

/* ID selector */
#header { background: #111827; }

/* Universal selector */
* { box-sizing: border-box; }

/* Group selector */
h1, h2, h3 { font-family: Arial, sans-serif; }

Συνηθισμένοι selectors

Selector	Επιλογή
.card	Όλα τα στοιχεία με class card
#main	Το στοιχείο με id main
article p	p μέσα σε article, σε οποιοδήποτε βάθος
article > p	Άμεσα παιδιά p του article
h2 + p	Το αμέσως επόμενο p μετά από h2
input[type=”email”]	Input με type email
a:hover	Σύνδεσμος όταν ο δείκτης βρίσκεται πάνω του
li:nth-child(2)	Το δεύτερο li μεταξύ των siblings

Cascade, specificity και inheritance

Όταν πολλοί κανόνες στοχεύουν το ίδιο στοιχείο, εφαρμόζονται οι κανόνες cascade, specificity, source order και importance.

/* Ενδεικτική σειρά ειδικότητας:
   inline style > #id > .class / [attribute] / :pseudo-class > element
*/
.card { color: navy; }
#featured { color: darkorange; }

/* Κληρονομικότητα */
body { color: #222; font-family: Arial, sans-serif; }

/* !important: απόφυγέ το όπου δεν είναι απαραίτητο */
.notice { color: red !important; }

Χρώματα και backgrounds

body {
    color: #1f2937;
    background-color: #f8fafc;
}

.hero {
    background-image: url("hero.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.card {
    background: rgb(255 255 255 / 90%);
    border-color: hsl(210 20% 80%);
}

Box Model

Κάθε στοιχείο αποτελείται από content, padding, border και margin. Το box-sizing: border-box κάνει ευκολότερο τον υπολογισμό διαστάσεων.

* {
    box-sizing: border-box;
}

.card {
    width: 320px;
    padding: 20px;
    border: 1px solid #ddd;
    margin: 16px;
}

Property	Λειτουργία
width / height	Πλάτος και ύψος
min-width / max-width	Ελάχιστο και μέγιστο πλάτος
padding	Εσωτερικό κενό
margin	Εξωτερικό κενό
border	Περίγραμμα
border-radius	Στρογγυλεμένες γωνίες
box-shadow	Σκιά πλαισίου
outline	Περίγραμμα εκτός του border

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

.container {
    width: min(100% - 2rem, 1200px);
    min-height: 50vh;
    padding: 1rem;
    margin-inline: auto;
}

.title { font-size: clamp(1.5rem, 4vw, 3rem); }

/* Μονάδες: px, %, em, rem, vw, vh, dvh, fr */

Μονάδα	Χρήση
px	CSS pixel
%	Ποσοστό σχετικό με το containing block ή την ιδιότητα
em	Σχετικό με το font-size του στοιχείου
rem	Σχετικό με το font-size του root element
vw / vh	Ποσοστό viewport width / height
dvh	Δυναμικό viewport height
fr	Κλάσμα διαθέσιμου χώρου σε CSS Grid
ch	Σχετικό με το πλάτος του χαρακτήρα 0

Display και ορατότητα

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.invisible { visibility: hidden; }
.flex { display: flex; }
.grid { display: grid; }

Flexbox

Το Flexbox χρησιμοποιείται για διάταξη στοιχείων σε μία διάσταση: γραμμή ή στήλη.

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.flex-item {
    flex: 1 1 220px;
}

/* Κεντράρισμα */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Property	Ενδεικτικές τιμές
flex-direction	row, column, row-reverse, column-reverse
justify-content	flex-start, center, space-between, space-around
align-items	stretch, center, flex-start, flex-end, baseline
flex-wrap	nowrap, wrap, wrap-reverse
gap	Απόσταση μεταξύ items
flex	grow shrink basis

CSS Grid

Το Grid είναι κατάλληλο για δισδιάστατα layouts με γραμμές και στήλες.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.sidebar-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
}

.grid-item { grid-column: span 2; }

Position και z-index

.parent {
    position: relative;
}

.badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.sticky-nav {
    position: sticky;
    top: 0;
}

.fixed-button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
}

Value	Λειτουργία
static	Προεπιλεγμένη θέση στη φυσιολογική ροή
relative	Μετατόπιση από την κανονική θέση
absolute	Τοποθέτηση ως προς τον κατάλληλο positioned containing block
fixed	Τοποθέτηση συνήθως ως προς το viewport
sticky	Συνδυασμός normal flow και sticky συμπεριφοράς

Typography – Κείμενο

body {
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.description {
    text-align: left;
    text-decoration: none;
    text-transform: none;
    overflow-wrap: anywhere;
}

Borders, shadows και opacity

.panel {
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
    opacity: 1;
}

.avatar {
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

Pseudo-classes και pseudo-elements

a:hover { color: #0ea5e9; }
button:focus-visible { outline: 3px solid #38bdf8; }
input:disabled { opacity: 0.5; }
li:first-child { font-weight: bold; }

.card::before {
    content: "";
    display: block;
    height: 4px;
    background: #0ea5e9;
}

p::selection { background: #bae6fd; }

Responsive Design και Media Queries

Χρησιμοποίησε mobile-first κανόνες και breakpoints που ακολουθούν το περιεχόμενο, όχι συγκεκριμένα μοντέλα συσκευών.

.container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
}

CSS Variables – Custom Properties

:root {
    --color-primary: #0891b2;
    --color-text: #1f2937;
    --space-md: 1rem;
    --radius-card: 12px;
}

.button {
    color: white;
    background: var(--color-primary);
    padding: var(--space-md);
    border-radius: var(--radius-card);
}

Transitions και transforms

.button {
    transition: background-color 180ms ease, transform 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
    background-color: #0e7490;
}

.card {
    transform: scale(1);
}

Animations με @keyframes

@keyframes fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate {
    animation: fade-in 400ms ease both;
}

/* Σεβασμός στην προτίμηση μειωμένης κίνησης */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

CSS για φόρμες και πίνακες

input, select, textarea, button {
    font: inherit;
}

input, select, textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #9ca3af;
    border-radius: 6px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #7dd3fc;
    outline-offset: 2px;
}

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

Overflow και εικόνες

.responsive-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.scroll-area {
    max-height: 400px;
    overflow: auto;
}

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Χρήσιμες πρακτικές

• Προτίμησε εξωτερικά stylesheets και οργάνωσε τους κανόνες ανά component ή ενότητα.
• Χρησιμοποίησε class selectors αντί για υπερβολικά συγκεκριμένους selectors και IDs.
• Εφάρμοσε box-sizing: border-box σε όλα τα στοιχεία.
• Σχεδίαζε mobile-first με Flexbox και Grid.
• Χρησιμοποίησε rem, %, min(), max() και clamp() για ευέλικτες διαστάσεις.
• Μην αφαιρείς το ορατό focus outline χωρίς ισοδύναμη προσβάσιμη ένδειξη.
• Πρόσεχε το contrast και σεβάσου prefers-reduced-motion.
• Έλεγχε την απόδοση σε πραγματικές διαστάσεις οθόνης και σε διαφορετικούς browsers.