Style lokalne CSS

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

Styl lokalny CSS to sposób nadania stylu bezpośrednio konkretnemu elementowi 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;">To jest przykładowy akapit.</p>

W tym kodzie właściwość CSS color:red; została wpisana bezpośrednio w znaczniku <p>. Oznacza to, że kolor czerwony zostanie zastosowany tylko do tego jednego akapitu.

Cechy stylu lokalnego

  • jest zapisany w atrybucie style,
  • dotyczy tylko jednego elementu HTML,
  • ma wysoki priorytet w kaskadowości CSS,
  • utrudnia utrzymanie kodu przy większych stronach,
  • nie wymaga osobnego pliku CSS.

Porównanie z innymi sposobami stosowania CSS

Styl lokalny:

<h1 style="color:blue;">Nagłówek</h1>

Styl wewnętrzny, nazywany też czasem stylem osadzonym lub nagłówkowym, zapisuje się w sekcji <head>:

<style>
h1 {
  color: blue;
}
</style>

Styl zewnętrzny znajduje się w osobnym pliku .css, podłączanym przez element <link>:

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

Na egzaminie

Jeżeli styl CSS znajduje się bezpośrednio w znaczniku HTML, np. <p style="color:red;">, to jest to styl lokalny.