Styl wpisany, lokalny w CSS

Co to jest styl wpisany, lokalny?

Styl wpisany, nazywany też stylem lokalnym lub inline CSS, to sposób nadawania stylu bezpośrednio konkretnemu elementowi HTML za pomocą atrybutu style.

Przykład:

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

W tym kodzie reguła CSS color:red; została wpisana bezpośrednio w znaczniku <p>, dlatego jest to styl lokalny.

Cechy stylu wpisanego

• działa tylko na element, w którym został zapisany,
• znajduje się w atrybucie style,
• ma wysoki priorytet w kaskadzie CSS,
• nie wymaga osobnego pliku CSS ani sekcji <style>,
• utrudnia utrzymanie większych stron, jeśli jest nadużywany.

Porównanie z innymi sposobami dodawania CSS

Styl wpisany:

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

Styl wewnętrzny:

<style>
p {
  color: red;
}
</style>

Styl zewnętrzny:

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

Kiedy używa się stylu lokalnego?

Styl lokalny bywa używany do szybkiego testowania wyglądu pojedynczego elementu albo w wyjątkowych sytuacjach, gdy trzeba nadać styl tylko jednemu elementowi. W poprawnie projektowanych stronach częściej stosuje się arkusze zewnętrzne, ponieważ łatwiej je edytować i ponownie wykorzystywać.

Ważne na egzaminie

Jeżeli styl CSS znajduje się bezpośrednio w znaczniku HTML, np. style="color:red;", poprawna nazwa techniki to styl wpisany, lokalny.