Jakie będzie efektem zastosowanego formatowania CSS dla nagłówka trzeciego stopnia
<style> h3 { background-color: grey; } </style>
…
<h3 style="background-color: orange;">Rozdział 1.2.2.</h3>
Odpowiedź, że tło będzie pomarańczowe, jest jak najbardziej trafna. W kodzie HTML użyto atrybutu "style" w tagu <h3>, który ma wyższy priorytet niż to, co jest zapisane w sekcji <style>. Wartość background-color to "orange", więc tło nagłówka trzeciego stopnia naprawdę będzie pomarańczowe. Znamy zasady kaskadowych arkuszy stylów, które mówią, że style bezpośrednio przypisane do elementów HTML mają pierwszeństwo. Kiedy chcemy, aby nagłówki miały różne kolory w zależności od tego, gdzie są użyte, inline styles są bardzo przydatne – zwłaszcza w prototypach. Ale z drugiej strony, z mojego doświadczenia, nadmiar inline styles może skomplikować późniejsze zarządzanie kodem, dlatego lepiej trzymać się klas CSS, żeby wszystko było bardziej uporządkowane.
Wybranie odpowiedzi, że tło będzie szare, to nie jest dobry wybór. W kodzie, który widzimy w pytaniu, styl w sekcji <style> ma niższy priorytet od tego, co jest ustawione w atrybucie style dla elementu <h3>. I nawet jeśli w sekcji <style> tło nagłówka jest szare, to inline style z wartością background-color równą "orange" ma pierwszeństwo. Często pojawia się błąd myślenia, że style muszą być stosowane w jakiejś określonej kolejności, a tak naprawdę CSS działa na zasadzie kaskady. Co do kolorów czcionek, w tym przypadku nie było konkretnego ustawienia, więc będzie korzystać z domyślnej wartości przeglądarki lub jakiegoś innego stylu, jeśli taki istnieje. Żeby uniknąć takich zamieszania, warto zawsze zwracać uwagę na zasady kaskadowości i priorytety stylów, bo to pomoże lepiej zrozumieć, jak zmiany wpływają na to, co widzimy na stronie.