CSS działa na podstawie zasad kaskadowości. Kaskadowość oznacza, że jeśli dwa lub więcej selektorów zdefiniują styl dla tego samego elementu, styl zdefiniowany z większą wagą zostanie zastosowany. CSS czyta kod od góry do dołu, nadając styl każdemu elementowi HTML, który pasuje do selektorów zdefiniowanych w pliku CSS.
Ważne jest zrozumienie, że kaskadowość odnosi się do priorytetu, a nie kolejności, w jakiej kod CSS jest napisany. Każdy element HTML ma swój własny zestaw stylów, które są zdefiniowane w pliku CSS. Jeśli dwa lub więcej selektorów CSS definiują styl dla tego samego elementu, CSS decyduje, którego stylu użyć, przy pomocy tzw. wagi.
Waga stylu określa, który styl ma pierwszeństwo w przypadku konfliktu stylów. CSS przypisuje wagę do każdego stylu na podstawie ich specyficzności, a także na podstawie kolejności występowania w kodzie CSS.
Specyficzność określa, jak konkretny jest selektor. Im bardziej szczegółowy selektor, tym większa jego specyficzność i waga. Na przykład, selektor ID ma wyższą wagę niż selektor klasy, ponieważ jest bardziej szczegółowy. Oto kilka przykładów specyficzności selektorów:
- Selektor elementu – 1 punkt
- Selektor klasy – 10 punktów
- Selektor ID – 100 punktów
Kolejność występowania stylów w pliku CSS również ma znaczenie. Styl zdefiniowany później w pliku CSS ma wyższą wagę niż styl zdefiniowany wcześniej. Jeśli dwa lub więcej stylów mają taką samą wagę i specyficzność, zastosowany zostanie styl, który występuje później w kodzie CSS.
Oto kilka przykładów konkretnych zasad działania CSS:
h1 {
color: blue;
font-size: 36px;
}
.header h1 {
color: red;
font-size: 48px;
}
#logo {
width: 100px;
height: 50px;
}
.header #logo {
width: 150px;
height: 75px;
}
W tym przykładzie styl dla nagłówka h1 zostanie zastosowany dwa razy: raz dla wszystkich h1 na stronie i raz dla h1, które znajduje się w elemencie o klasie “header”. W tym przypadku styl zdefiniowany dla h1 w elemencie “header” ma wyższą wagę ze względu na większą specyficzność selektora.
Styl dla elementu o ID “logo” zostanie zastosowany tylko raz, ponieważ ID jest unikalnym identyfikatorem i nie może być używany więcej niż raz na stronie. W przypadku konfliktu stylów dla tego samego elementu, styl zdefiniowany dla bardziej szczegółowego selektora ma wyższą wagę. W tym przypadku styl zdefiniowany dla elementu o ID “logo” w elemencie “header