Styl wpisany lokalny w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym jest styl wpisany lokalny?

Styl wpisany lokalny to sposób dodania reguł CSS bezpośrednio do konkretnego elementu HTML za pomocą atrybutu style. Taki styl działa tylko na ten jeden element, w którym został zapisany.

Przykład

<p style="color: red;">tekst paragrafu</p>

W tym przykładzie kolor tekstu paragrafu zostanie ustawiony na czerwony. Reguła color: red; nie wpływa na inne akapity na stronie.

Cechy stylu wpisanego

  • jest umieszczany bezpośrednio w znaczniku HTML,
  • dotyczy tylko jednego elementu,
  • ma wysoką ważność w kaskadzie CSS,
  • utrudnia utrzymanie kodu, gdy jest stosowany zbyt często,
  • nie wymaga osobnego pliku CSS ani sekcji <style>.

Różnica względem innych metod

Styl wpisany lokalny różni się od stylu wewnętrznego i zewnętrznego:

  • styl wpisany lokalny: <p style="color: red;">...,
  • styl wewnętrzny: reguły CSS w znaczniku <style> w dokumencie HTML,
  • styl zewnętrzny: reguły CSS w osobnym pliku .css dołączonym przez <link>.

Kiedy używać?

Styl wpisany może być użyty doraźnie, np. do szybkiego testu lub pojedynczej wyjątkowej zmiany. W większych projektach zaleca się stosowanie stylów zewnętrznych, ponieważ są czytelniejsze, łatwiejsze do modyfikacji i pozwalają zachować rozdział struktury HTML od wyglądu CSS.