{"id":215,"date":"2025-10-07T10:20:28","date_gmt":"2025-10-07T08:20:28","guid":{"rendered":"https:\/\/informatyka.odkrywajto.pl\/?page_id=215"},"modified":"2025-10-07T10:20:28","modified_gmt":"2025-10-07T08:20:28","slug":"07-css-skladnia-dodawanie-stylow-do-strony-www","status":"publish","type":"page","link":"https:\/\/informatyka.odkrywajto.pl\/?page_id=215","title":{"rendered":"07 – CSS – sk\u0142adnia, dodawanie styl\u00f3w do strony www"},"content":{"rendered":"

https:\/\/www.w3schools.com\/css\/default.asp<\/a><\/p>\n

 <\/p>\n

\n

\ud83e\uddf1 2. Sk\u0142adnia CSS<\/h2>\n

Podstawowa sk\u0142adnia wygl\u0105da tak:<\/p>\n

selektor {\r\n  w\u0142a\u015bciwo\u015b\u0107: warto\u015b\u0107;\r\n}\r\n<\/code><\/pre>\n
\ud83d\udd39 Selektor<\/strong> \u2014 okre\u015bla, do jakich element\u00f3w HTML styl ma by\u0107 zastosowany.
\n\ud83d\udd39 W\u0142a\u015bciwo\u015b\u0107<\/strong> \u2014 m\u00f3wi, co chcesz zmieni\u0107 (np. kolor, margines, czcionk\u0119).
\n\ud83d\udd39 Warto\u015b\u0107<\/strong> \u2014 definiuje, jak ta zmiana ma wygl\u0105da\u0107.<\/p>\n
Przyk\u0142ad:<\/strong><\/p>\n
p {\r\n  color: blue;\r\n  font-size: 16px;\r\n}\r\n<\/code><\/pre>\n
\u27a1\ufe0f Wszystkie akapity <p><\/code> na stronie b\u0119d\u0105 mie\u0107 niebieski tekst o rozmiarze 16 pikseli.<\/p>\n
\n
\ud83e\udde9 3. Sposoby dodawania CSS do strony<\/h2>\n
1\ufe0f\u20e3 Zewn\u0119trzny arkusz styl\u00f3w (najlepsza praktyka)<\/strong><\/h3>\n
Tworzysz plik .css<\/code>, np. style.css<\/code>, i \u0142\u0105czysz go z HTML-em:<\/p>\n
Plik HTML:<\/strong><\/p>\n
<link rel=\"stylesheet\" href=\"style.css\">\r\n<\/code><\/pre>\n
Plik style.css:<\/strong><\/p>\n
body {\r\n  background-color: #f5f5f5;\r\n  font-family: Arial, sans-serif;\r\n}\r\n<\/code><\/pre>\n
\u2705 Zalety:<\/p>\n
    \n
  • czysty i uporz\u0105dkowany kod<\/li>\n
  • \u0142atwa edycja styl\u00f3w dla wielu stron jednocze\u015bnie<\/li>\n<\/ul>\n
    \n
    2\ufe0f\u20e3 Wewn\u0119trzny styl (w sekcji <style><\/code>)<\/strong><\/h3>\n
    Styl umieszczasz bezpo\u015brednio w pliku HTML:<\/p>\n
    <head>\r\n  <style>\r\n    h1 {\r\n      color: darkgreen;\r\n      text-align: center;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<\/code><\/pre>\n
    \n
    3\ufe0f\u20e3 Styl inline (w atrybucie style<\/code>)<\/strong><\/h3>\n
    Styl dodajesz do konkretnego elementu:<\/p>\n
    <p style=\"color: red; font-size: 20px;\">To jest czerwony tekst.<\/p>\r\n<\/code><\/pre>\n
    \u2757\ufe0fU\u017cywaj tylko wyj\u0105tkowo \u2014 np. do test\u00f3w. Kod staje si\u0119 trudny w utrzymaniu.<\/p>\n
    \n
    \ud83e\udde0 4. Przyk\u0142ad kompletnej strony z CSS<\/h2>\n
    <!DOCTYPE html>\r\n<html lang=\"pl\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Moja pierwsza strona<\/title>\r\n  <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n  <h1>Witaj w mojej piekarni!<\/h1>\r\n  <p>Nasze chleby na zakwasie s\u0105 wypiekane z pasj\u0105 i tradycj\u0105.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    style.css<\/strong><\/p>\n
    body {\r\n  background-color: #fff8e1;\r\n  font-family: 'Georgia', serif;\r\n  color: #4e342e;\r\n}\r\n\r\nh1 {\r\n  color: #8d6e63;\r\n  text-align: center;\r\n}\r\n<\/code><\/pre>\n
    \n
    \u2699\ufe0f 5. Dodatkowe uwagi<\/h2>\n
      \n
    • Kolejno\u015b\u0107 ma znaczenie: styl zapisany p\u00f3\u017aniej nadpisuje wcze\u015bniejszy (kaskadowo\u015b\u0107).<\/li>\n
    • Mo\u017cesz u\u017cywa\u0107 klas i identyfikator\u00f3w:\n
      .klasa { color: green; }\r\n#identyfikator { color: red; }\r\n<\/code><\/pre>\n<\/li>\n<\/ul>\n
      \n
       <\/p>\n","protected":false},"excerpt":{"rendered":"
      https:\/\/www.w3schools.com\/css\/default.asp   \ud83e\uddf1 2. Sk\u0142adnia CSS Podstawowa sk\u0142adnia wygl\u0105da tak: selektor { w\u0142a\u015bciwo\u015b\u0107: warto\u015b\u0107; } \ud83d\udd39 Selektor \u2014 okre\u015bla, do jakich element\u00f3w HTML styl ma by\u0107 zastosowany. \ud83d\udd39 W\u0142a\u015bciwo\u015b\u0107 \u2014 m\u00f3wi, co chcesz zmieni\u0107 (np. kolor, margines, czcionk\u0119). \ud83d\udd39 Warto\u015b\u0107 \u2014 definiuje, jak ta zmiana ma wygl\u0105da\u0107. Przyk\u0142ad: p { color: blue; font-size: 16px; } […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-215","page","type-page","status-publish","hentry"],"yoast_head":"\n07 - CSS - sk\u0142adnia, dodawanie styl\u00f3w do strony www - Informatyka Zadania<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/informatyka.odkrywajto.pl\/?page_id=215\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"07 - CSS - sk\u0142adnia, dodawanie styl\u00f3w do strony www - Informatyka Zadania\" \/>\n<meta property=\"og:description\" content=\"https:\/\/www.w3schools.com\/css\/default.asp   \ud83e\uddf1 2. Sk\u0142adnia CSS Podstawowa sk\u0142adnia wygl\u0105da tak: selektor { w\u0142a\u015bciwo\u015b\u0107: warto\u015b\u0107; } \ud83d\udd39 Selektor \u2014 okre\u015bla, do jakich element\u00f3w HTML styl ma by\u0107 zastosowany. \ud83d\udd39 W\u0142a\u015bciwo\u015b\u0107 \u2014 m\u00f3wi, co chcesz zmieni\u0107 (np. kolor, margines, czcionk\u0119). \ud83d\udd39 Warto\u015b\u0107 \u2014 definiuje, jak ta zmiana ma wygl\u0105da\u0107. Przyk\u0142ad: p { color: blue; font-size: 16px; } […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/informatyka.odkrywajto.pl\/?page_id=215\" \/>\n<meta property=\"og:site_name\" content=\"Informatyka Zadania\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?page_id=215\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?page_id=215\",\"name\":\"07 - CSS - sk\u0142adnia, dodawanie styl\u00f3w do strony www - Informatyka Zadania\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#website\"},\"datePublished\":\"2025-10-07T08:20:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?page_id=215#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?page_id=215\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?page_id=215#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"07 – CSS – sk\u0142adnia, dodawanie styl\u00f3w do strony www\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#website\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/\",\"name\":\"Informatyka Zadania\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#organization\",\"name\":\"Informatyka Zadania\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-cropped-Screenshot_1-1.jpg\",\"contentUrl\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-cropped-Screenshot_1-1.jpg\",\"width\":834,\"height\":200,\"caption\":\"Informatyka Zadania\"},\"image\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"07 - CSS - sk\u0142adnia, dodawanie styl\u00f3w do strony www - Informatyka Zadania","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/informatyka.odkrywajto.pl\/?page_id=215","og_locale":"pl_PL","og_type":"article","og_title":"07 - CSS - sk\u0142adnia, dodawanie styl\u00f3w do strony www - Informatyka Zadania","og_description":"https:\/\/www.w3schools.com\/css\/default.asp   \ud83e\uddf1 2. Sk\u0142adnia CSS Podstawowa sk\u0142adnia wygl\u0105da tak: selektor { w\u0142a\u015bciwo\u015b\u0107: warto\u015b\u0107; } \ud83d\udd39 Selektor \u2014 okre\u015bla, do jakich element\u00f3w HTML styl ma by\u0107 zastosowany. \ud83d\udd39 W\u0142a\u015bciwo\u015b\u0107 \u2014 m\u00f3wi, co chcesz zmieni\u0107 (np. kolor, margines, czcionk\u0119). \ud83d\udd39 Warto\u015b\u0107 \u2014 definiuje, jak ta zmiana ma wygl\u0105da\u0107. Przyk\u0142ad: p { color: blue; font-size: 16px; } […]","og_url":"https:\/\/informatyka.odkrywajto.pl\/?page_id=215","og_site_name":"Informatyka Zadania","twitter_card":"summary_large_image","twitter_misc":{"Szacowany czas czytania":"2 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/informatyka.odkrywajto.pl\/?page_id=215","url":"https:\/\/informatyka.odkrywajto.pl\/?page_id=215","name":"07 - CSS - sk\u0142adnia, dodawanie styl\u00f3w do strony www - Informatyka Zadania","isPartOf":{"@id":"https:\/\/informatyka.odkrywajto.pl\/#website"},"datePublished":"2025-10-07T08:20:28+00:00","breadcrumb":{"@id":"https:\/\/informatyka.odkrywajto.pl\/?page_id=215#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/informatyka.odkrywajto.pl\/?page_id=215"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/informatyka.odkrywajto.pl\/?page_id=215#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/informatyka.odkrywajto.pl\/"},{"@type":"ListItem","position":2,"name":"07 – CSS – sk\u0142adnia, dodawanie styl\u00f3w do strony www"}]},{"@type":"WebSite","@id":"https:\/\/informatyka.odkrywajto.pl\/#website","url":"https:\/\/informatyka.odkrywajto.pl\/","name":"Informatyka Zadania","description":"","publisher":{"@id":"https:\/\/informatyka.odkrywajto.pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/informatyka.odkrywajto.pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/informatyka.odkrywajto.pl\/#organization","name":"Informatyka Zadania","url":"https:\/\/informatyka.odkrywajto.pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/informatyka.odkrywajto.pl\/#\/schema\/logo\/image\/","url":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2024\/08\/cropped-cropped-Screenshot_1-1.jpg","contentUrl":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2024\/08\/cropped-cropped-Screenshot_1-1.jpg","width":834,"height":200,"caption":"Informatyka Zadania"},"image":{"@id":"https:\/\/informatyka.odkrywajto.pl\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/pages\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=215"}],"version-history":[{"count":1,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/pages\/215\/revisions"}],"predecessor-version":[{"id":216,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/pages\/215\/revisions\/216"}],"wp:attachment":[{"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}