{"id":55,"date":"2025-10-31T04:24:28","date_gmt":"2025-10-31T07:24:28","guid":{"rendered":"https:\/\/trgis.dev\/?p=55"},"modified":"2025-10-31T04:24:29","modified_gmt":"2025-10-31T07:24:29","slug":"benimle-ogrenin-css-1","status":"publish","type":"post","link":"https:\/\/trgis.dev\/?p=55","title":{"rendered":"Benimle \u00d6\u011frenin: CSS-1"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Genelde herkes HTML\u2019den ba\u015flar, ama ben \u00f6nce sayfalar\u0131n nas\u0131l g\u00f6rselle\u015ftirildi\u011fini anlamak istedim. Bu y\u00fczden CSS ile yola \u00e7\u0131k\u0131yorum. Gelin, birlikte web tasar\u0131m\u0131n g\u00f6rsel taraf\u0131n\u0131 ke\u015ffedelim!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS \u00f6\u011frenirken akl\u0131mda kalan \u00f6nemli notlar\u0131 sadele\u015ftirip burada sizinle payla\u015f\u0131yorum. Bu yaz\u0131y\u0131, temel bilgileri h\u0131zl\u0131ca hat\u0131rlayabilece\u011finiz k\u00fc\u00e7\u00fck bir \u00f6zet sayfa gibi d\u00fc\u015f\u00fcnebilirsiniz. Derin konulara ge\u00e7meden \u00f6nce g\u00f6z atabilece\u011finiz bu i\u00e7eri\u011fin, CSS temellerini anlaman\u0131zda size fayda sa\u011flayaca\u011f\u0131n\u0131 umuyorum. \ud83c\udf3f<br><\/p>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-7e3bac707670269f70bfcc7038f4bf8a wp-block-paragraph\"><strong>CSS Nedir?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS (Cascading Style Sheets), bir web sayfas\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc d\u00fczenlemek i\u00e7in kullan\u0131lan bir dildir. HTML sayfa yap\u0131s\u0131n\u0131 olu\u015fturur, CSS ise o yap\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc g\u00fczelle\u015ftirir. CSS sayesinde bir sitedeki t\u00fcm sayfalar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tek bir dosyadan de\u011fi\u015ftirebilirsiniz. Bu dosyan\u0131n uzant\u0131s\u0131 <code>.css<\/code>&#8216;dir.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6rne\u011fin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML ile bir paragraf olu\u015fturabilirsiniz.<\/li>\n\n\n\n<li>CSS ile o paragraf\u0131n yaz\u0131 rengini, boyutunu ve arkaplan rengini ayarlayabilirsiniz.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-903e71b6694999cf35ba344ec3c4db6f\"><code>body&nbsp;{\n&nbsp;&nbsp;background-color:&nbsp;lightblue;\n}\n\nh1&nbsp;{\n&nbsp;&nbsp;color:&nbsp;white;\n&nbsp;&nbsp;text-align:&nbsp;center;\n}\n\np&nbsp;{\n&nbsp; font-family:&nbsp;verdana;\n&nbsp;&nbsp;font-size:&nbsp;20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-9be06e3ae79ab825f2ef2274e74aa4b1 wp-block-paragraph\"><strong>CSS Nas\u0131l Yaz\u0131l\u0131r?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br>Bir CSS kural\u0131 iki b\u00f6l\u00fcmden olu\u015fur:<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-dark-color-background-color has-text-color has-background has-link-color wp-elements-1c7f2f1f2427ed6f91b18f33e283ce6f\"><code>selector {\n  property: value;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>selector (se\u00e7ici):<\/strong> Hangi HTML eleman\u0131na stil verece\u011fini belirtir. \u00d6rne\u011fin <code>p<\/code> \u2192 t\u00fcm <code>&lt;p&gt;<\/code> etiketleri.<\/li>\n\n\n\n<li><strong>property (\u00f6zellik):<\/strong> Ne de\u011fi\u015ftirece\u011fini s\u00f6yler (\u00f6rne\u011fin renk, yaz\u0131 boyutu).<\/li>\n\n\n\n<li><strong>value (de\u011fer):<\/strong> \u00d6zelli\u011fin nas\u0131l olaca\u011f\u0131n\u0131 s\u00f6yler.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6rnek:<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-dark-color-background-color has-text-color has-background has-link-color wp-elements-c1d0a32edab6f2a04f5f37c589f6c979\"><code>p {\n  color: red;\n  font-size: 16px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bu kod:<br>T\u00fcm <code>&lt;p&gt;<\/code> (paragraf) etiketlerinin yaz\u0131 rengini k\u0131rm\u0131z\u0131 yapar ve yaz\u0131 boyutunu 16 piksel ayarlar.<\/p>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-76c6d517315be1cdc46fc7000cf62614 wp-block-paragraph\"><strong>CSS Nas\u0131l Eklenir?<\/strong><\/p>\n\n\n\n<p class=\"has-dark-color-color has-text-color has-link-color wp-elements-31e937f95664d6119490694039b8e943 wp-block-paragraph\"><strong><em>External CSS (Harici)<\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ayr\u0131 bir <code>.css<\/code> dosyas\u0131nda yaz\u0131l\u0131r, HTML\u2019ye <code>&lt;link&gt;<\/code> etiketiyle ba\u011flan\u0131r.  T\u00fcm sayfan\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tek dosyadan kontrol edilebilir.<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-dark-color-background-color has-text-color has-background has-link-color wp-elements-1ae3c1bd47be5a3f542f2efb57094423\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;link&nbsp;rel=\"stylesheet\"&nbsp;href=\"mystyle.css\"&gt;   \/* Link etiketi *\/\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;This is a heading&lt;\/h1&gt;\n&lt;p&gt;This is a paragraph.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><br>mystyle.css ise \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-dark-color-background-color has-text-color has-background has-link-color wp-elements-2e546a4381a257fe10661f6868e4873a\"><code>body&nbsp;{\n&nbsp;&nbsp;background-color:&nbsp;lightblue;\n}\n\nh1&nbsp;{\n&nbsp;&nbsp;color:&nbsp;navy;\n&nbsp;&nbsp;margin-left:&nbsp;20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"has-dark-color-color has-text-color has-link-color wp-elements-737a94980936f36a29886761b16af956 wp-block-paragraph\"><br><strong><em>Internal CSS (Dahili)<\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML\u2019nin <code>&lt;head&gt;<\/code> k\u0131sm\u0131nda <code>&lt;style&gt;<\/code> etiketiyle yaz\u0131l\u0131r. Sadece o sayfay\u0131 etkiler.<\/p>\n\n\n\n<pre class=\"wp-block-code has-background-color has-dark-color-background-color has-text-color has-background has-link-color wp-elements-e33f19360c993a969a8f9f14f777043d\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody&nbsp;{\n&nbsp; background-color:&nbsp;linen;\n}\n\nh1&nbsp;{\n&nbsp; color:&nbsp;maroon;\n&nbsp; margin-left:&nbsp;40px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;This is a heading&lt;\/h1&gt;\n&lt;p&gt;This is a paragraph.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"has-dark-color-color has-text-color has-link-color wp-elements-4cd8f72cc565e0e43675ca982e6098cb wp-block-paragraph\"><br><strong><em>Inline CSS (Sat\u0131r i\u00e7i)<\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br>Stil do\u011frudan HTML etiketinin i\u00e7ine yaz\u0131l\u0131r. Sadece o tek \u00f6\u011feyi etkiler. Bu y\u00f6ntem en az tercih edilendir, \u00e7\u00fcnk\u00fc kod kar\u0131\u015fabilir.<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-be3cf65e78e2fd48d58bceb490e8026f\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h1&nbsp;style=\"color:blue;text-align:center;\"&gt;This is a heading&lt;\/h1&gt;\n&lt;p&nbsp;style=\"color:red;\"&gt;This is a paragraph.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"has-dark-color-color has-text-color has-link-color wp-elements-36685a5744fca9d18b9e31dd552ed73e wp-block-paragraph\"><br><strong>CSS Yorum Sat\u0131rlar\u0131<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yorumlar CSS\u2019te <code>\/* ... *\/<\/code> aras\u0131na yaz\u0131l\u0131r.<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-c3d525c07412dfd633db8b9446babce6\"><code>\/* Bu bir yorum sat\u0131r\u0131d\u0131r *\/\np { color: red; }<\/code><\/pre>\n\n\n\n<p class=\"has-dark-color-color has-text-color has-link-color wp-elements-b3dc6c616144cd3cdb1459cd2af2a1d8 wp-block-paragraph\"><strong>Renkler<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Renkler birka\u00e7 farkl\u0131 \u015fekilde yazabilir:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>color: red;            \/* Renk ad\u0131 *\/<\/code>\n<code>color: #ff0000;        \/* HEX kodu *\/<\/code>\n<code>color: rgb(255, 0, 0); \/* RGB de\u011feri *\/<\/code><\/pre>\n\n\n\n<p class=\"has-dark-color-color has-text-color has-link-color wp-elements-c4c457a5b07bb7bd2ad552f4a71d9626 wp-block-paragraph\"><strong>Arkaplan<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>background-color<\/code>: Arkaplan rengi ayarlar.<\/li>\n\n\n\n<li><code>background-image<\/code>: Arkaplana resim ekler.<\/li>\n\n\n\n<li><code>background-repeat<\/code>: Resim sayfada tekrar etsin mi, etmesin mi onu belirler.<\/li>\n\n\n\n<li><code>background-attachment<\/code>: Sayfa a\u015fa\u011f\u0131 yukar\u0131 kayarken arkaplan resmi hareket etsin mi, yoksa sabit mi kals\u0131n?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6rnek:<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-dedcf31285b9fd1e0f27cf3050e9cbf4\"><code>body {\n  background-color: lightblue;\n  background-image: url(\"clouds.jpg\");\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">T\u00fcm bu \u00f6zellikleri tek sat\u0131rda da yazabiliriz Buna shorthand denir.<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-dark-color-background-color has-text-color has-background has-link-color wp-elements-08210e735ed2c436141f6236da1e1755\"><code>body {\n  background: #ffffff url(\"img_tree.png\") no-repeat right top;\n}\n<\/code><\/pre>\n\n\n\n<p class=\"has-dark-color-color has-text-color has-link-color wp-elements-7316b43dafe54da733bccb27efb48067 wp-block-paragraph\"><strong>Kenarl\u0131klar<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kenarl\u0131k, bir kutunun (\u00f6rne\u011fin bir paragraf\u0131n, butonun veya g\u00f6rselin) \u00e7evresini \u00e7er\u00e7eveleyen \u00e7izgidir.  Kenarl\u0131\u011f\u0131n stili, rengi ve kal\u0131nl\u0131\u011f\u0131 ayarlanabilir.<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-2ea5e50cf5180bdbca780552f774be47\"><code>p {\n  border-style: solid;\n  border-color: black;\n  border-width: 2px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><br>T\u00fcm\u00fc tek sat\u0131rda da yazabilir:<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-a1e87c266c85601ccc07c7fbacad398f\"><code>p {\n  border: 2px solid black;\n}<\/code><\/pre>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-2b74da035ca1a381a1cd426015667a51 wp-block-paragraph\"><strong>Margin<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bir kutunun kenar\u0131yla di\u011fer \u00f6\u011feler aras\u0131ndaki bo\u015flu\u011fu ayarlar.<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-9cd5ab789a806f6c2db145a4a771ecb3\"><code>div {\n  margin-top: 20px;\n  margin-right: 10px;\n  margin-bottom: 5px;\n  margin-left: 10px;\n}<\/code><\/pre>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-7801b11743ebd02acbdc0522458bfb69 wp-block-paragraph\"><br><strong>Padding<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kutunun i\u00e7 k\u0131sm\u0131ndaki metin ile kenar aras\u0131ndaki bo\u015flu\u011fu ayarlar.  Margin d\u0131\u015ftan bo\u015fluk verir, padding i\u00e7ten.<\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-37cc32934fba2777e31601d44d5e9eb1\"><code><code>div {<\/code>\n<code>  padding: 10px;<\/code>\n<code>}<\/code><\/code><\/pre>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-11b86dc1a3617b14a63cfb711c895f20 wp-block-paragraph\"><br><strong>Yaz\u0131 Rengi ve Hizalama<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>color<\/code>: yaz\u0131 rengi<\/li>\n\n\n\n<li><code>text-align<\/code>: hizalama<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-a606b2c2959093bf2be562ca8f81a31d\"><code>h1 {\n  color: navy;\n  text-align: center;\n}<\/code><\/pre>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-d58f0a91ce28b44b1416f48bc76fc9e1 wp-block-paragraph\"><br><strong>Yaz\u0131 Dekorasyonu<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-dddbff13a6e39568a3046a49d82bae55\"><code>p {\n  text-decoration: underline;\n  text-decoration-style: wavy;\n}<\/code><\/pre>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-50d6afa82a8a3110957a30473cab69be wp-block-paragraph\"><br><strong>Harf D\u00f6n\u00fc\u015f\u00fcm\u00fc<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-b6e2c055b9028ed479922dc6ad81a350\"><code>h2 {\n  text-transform: uppercase;  \/* T\u00fcm\u00fcn\u00fc b\u00fcy\u00fck yapar *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-8a015947e983a674fa1bbf5d2572eab9 wp-block-paragraph\"><br><strong>Harf Aral\u0131\u011f\u0131<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-aa0e954275028f58e01a5bc678ebf33d\"><code>h1 { letter-spacing: 3px; }<\/code><\/pre>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-8b74539362bafbaa4b6a48036f8af4dd wp-block-paragraph\"><br><strong>Sat\u0131r Y\u00fcksekli\u011fi<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-light-color-color has-heading-color-background-color has-text-color has-background has-link-color wp-elements-a00d50792b5b391000e9b8b56b371830\"><code>p { line-height: 1.5; }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bu yaz\u0131yla CSS\u2019in temellerine k\u0131sa bir giri\u015f yapt\u0131k. Serinin bir sonraki b\u00f6l\u00fcm\u00fcnde, konunun devam\u0131na hep birlikte g\u00f6z ataca\u011f\u0131z. Takipte kal\u0131n, sevgiyle! \ud83d\udcbb\ud83d\udc9a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-heading-color-color has-text-color has-link-color wp-elements-0a61892b716452902f4a69070e3f2e83 wp-block-paragraph\"><strong>KAYNAK\u00c7A<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code><a href=\"https:\/\/yoodigital.co\/tr\/css-nedir-ne-ise-yarar\/\">https:\/\/yoodigital.co\/tr\/css-nedir-ne-ise-yarar\/<\/a><\/code>\n<code><a href=\"https:\/\/www.w3schools.com\/css\/default.asp\">https:\/\/www.w3schools.com\/css\/default.asp<\/a><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Genelde herkes HTML\u2019den ba\u015flar, ama ben \u00f6nce sayfalar\u0131n nas\u0131l g\u00f6rselle\u015ftirildi\u011fini anlamak istedim. Bu y\u00fczden CSS ile yola \u00e7\u0131k\u0131yorum. Gelin, birlikte web tasar\u0131m\u0131n g\u00f6rsel taraf\u0131n\u0131 ke\u015ffedelim! CSS \u00f6\u011frenirken akl\u0131mda kalan \u00f6nemli notlar\u0131 sadele\u015ftirip burada sizinle payla\u015f\u0131yorum. Bu yaz\u0131y\u0131, temel bilgileri h\u0131zl\u0131ca hat\u0131rlayabilece\u011finiz k\u00fc\u00e7\u00fck bir \u00f6zet sayfa gibi d\u00fc\u015f\u00fcnebilirsiniz. Derin konulara ge\u00e7meden \u00f6nce g\u00f6z atabilece\u011finiz bu i\u00e7eri\u011fin,&#8230;<\/p>\n","protected":false},"author":26,"featured_media":56,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[31,35,36,34,33],"class_list":["post-55","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-cbs-gelistiricisi","tag-css","tag-gis","tag-web-cbs-tasarim","tag-web-gis"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Benimle \u00d6\u011frenin: CSS-1 - Turkiye GIS Developer Community<\/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:\/\/trgis.dev\/?p=55\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Benimle \u00d6\u011frenin: CSS-1 - Turkiye GIS Developer Community\" \/>\n<meta property=\"og:description\" content=\"Genelde herkes HTML\u2019den ba\u015flar, ama ben \u00f6nce sayfalar\u0131n nas\u0131l g\u00f6rselle\u015ftirildi\u011fini anlamak istedim. Bu y\u00fczden CSS ile yola \u00e7\u0131k\u0131yorum. Gelin, birlikte web tasar\u0131m\u0131n g\u00f6rsel taraf\u0131n\u0131 ke\u015ffedelim! CSS \u00f6\u011frenirken akl\u0131mda kalan \u00f6nemli notlar\u0131 sadele\u015ftirip burada sizinle payla\u015f\u0131yorum. Bu yaz\u0131y\u0131, temel bilgileri h\u0131zl\u0131ca hat\u0131rlayabilece\u011finiz k\u00fc\u00e7\u00fck bir \u00f6zet sayfa gibi d\u00fc\u015f\u00fcnebilirsiniz. Derin konulara ge\u00e7meden \u00f6nce g\u00f6z atabilece\u011finiz bu i\u00e7eri\u011fin,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trgis.dev\/?p=55\" \/>\n<meta property=\"og:site_name\" content=\"Turkiye GIS Developer Community\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-31T07:24:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-31T07:24:29+00:00\" \/>\n<meta name=\"author\" content=\"Ceren Nisanur \u00d6zbilge\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/trgis.dev\/wp-content\/uploads\/2025\/10\/css-jpg.webp.avif\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ceren Nisanur \u00d6zbilge\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/trgis.dev\/?p=55#article\",\"isPartOf\":{\"@id\":\"https:\/\/trgis.dev\/?p=55\"},\"author\":{\"name\":\"Ceren Nisanur \u00d6zbilge\",\"@id\":\"https:\/\/trgis.dev\/#\/schema\/person\/69337ccedb1673706234be19fe73dd67\"},\"headline\":\"Benimle \u00d6\u011frenin: CSS-1\",\"datePublished\":\"2025-10-31T07:24:28+00:00\",\"dateModified\":\"2025-10-31T07:24:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/trgis.dev\/?p=55\"},\"wordCount\":538,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/trgis.dev\/#organization\"},\"keywords\":[\"cbs geli\u015ftiricisi\",\"CSS\",\"GIS\",\"Web CBS Tasar\u0131m\",\"Web GIS\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/trgis.dev\/?p=55#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/trgis.dev\/?p=55\",\"url\":\"https:\/\/trgis.dev\/?p=55\",\"name\":\"Benimle \u00d6\u011frenin: CSS-1 - Turkiye GIS Developer Community\",\"isPartOf\":{\"@id\":\"https:\/\/trgis.dev\/#website\"},\"datePublished\":\"2025-10-31T07:24:28+00:00\",\"dateModified\":\"2025-10-31T07:24:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/trgis.dev\/?p=55#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/trgis.dev\/?p=55\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/trgis.dev\/?p=55#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/trgis.dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Benimle \u00d6\u011frenin: CSS-1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/trgis.dev\/#website\",\"url\":\"https:\/\/trgis.dev\/\",\"name\":\"Turkiye GIS Developer Community\",\"description\":\"Turkiye GIS Developer Community\",\"publisher\":{\"@id\":\"https:\/\/trgis.dev\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/trgis.dev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/trgis.dev\/#organization\",\"name\":\"Turkiye GIS Developer Community\",\"url\":\"https:\/\/trgis.dev\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/trgis.dev\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/trgis.dev\/wp-content\/uploads\/2024\/02\/Logo.png\",\"contentUrl\":\"https:\/\/trgis.dev\/wp-content\/uploads\/2024\/02\/Logo.png\",\"width\":600,\"height\":400,\"caption\":\"Turkiye GIS Developer Community\"},\"image\":{\"@id\":\"https:\/\/trgis.dev\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/trgis.dev\/#\/schema\/person\/69337ccedb1673706234be19fe73dd67\",\"name\":\"Ceren Nisanur \u00d6zbilge\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/trgis.dev\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e18ba151bbb284f15318c05b560f08c91f46fca005e26fcc310118c840e37837?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e18ba151bbb284f15318c05b560f08c91f46fca005e26fcc310118c840e37837?s=96&d=retro&r=g\",\"caption\":\"Ceren Nisanur \u00d6zbilge\"},\"url\":\"https:\/\/trgis.dev\/?author=26\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Benimle \u00d6\u011frenin: CSS-1 - Turkiye GIS Developer Community","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:\/\/trgis.dev\/?p=55","og_locale":"tr_TR","og_type":"article","og_title":"Benimle \u00d6\u011frenin: CSS-1 - Turkiye GIS Developer Community","og_description":"Genelde herkes HTML\u2019den ba\u015flar, ama ben \u00f6nce sayfalar\u0131n nas\u0131l g\u00f6rselle\u015ftirildi\u011fini anlamak istedim. Bu y\u00fczden CSS ile yola \u00e7\u0131k\u0131yorum. Gelin, birlikte web tasar\u0131m\u0131n g\u00f6rsel taraf\u0131n\u0131 ke\u015ffedelim! CSS \u00f6\u011frenirken akl\u0131mda kalan \u00f6nemli notlar\u0131 sadele\u015ftirip burada sizinle payla\u015f\u0131yorum. Bu yaz\u0131y\u0131, temel bilgileri h\u0131zl\u0131ca hat\u0131rlayabilece\u011finiz k\u00fc\u00e7\u00fck bir \u00f6zet sayfa gibi d\u00fc\u015f\u00fcnebilirsiniz. Derin konulara ge\u00e7meden \u00f6nce g\u00f6z atabilece\u011finiz bu i\u00e7eri\u011fin,...","og_url":"https:\/\/trgis.dev\/?p=55","og_site_name":"Turkiye GIS Developer Community","article_published_time":"2025-10-31T07:24:28+00:00","article_modified_time":"2025-10-31T07:24:29+00:00","author":"Ceren Nisanur \u00d6zbilge","twitter_card":"summary_large_image","twitter_image":"https:\/\/trgis.dev\/wp-content\/uploads\/2025\/10\/css-jpg.webp.avif","twitter_misc":{"Yazan:":"Ceren Nisanur \u00d6zbilge","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/trgis.dev\/?p=55#article","isPartOf":{"@id":"https:\/\/trgis.dev\/?p=55"},"author":{"name":"Ceren Nisanur \u00d6zbilge","@id":"https:\/\/trgis.dev\/#\/schema\/person\/69337ccedb1673706234be19fe73dd67"},"headline":"Benimle \u00d6\u011frenin: CSS-1","datePublished":"2025-10-31T07:24:28+00:00","dateModified":"2025-10-31T07:24:29+00:00","mainEntityOfPage":{"@id":"https:\/\/trgis.dev\/?p=55"},"wordCount":538,"commentCount":0,"publisher":{"@id":"https:\/\/trgis.dev\/#organization"},"keywords":["cbs geli\u015ftiricisi","CSS","GIS","Web CBS Tasar\u0131m","Web GIS"],"articleSection":["Blog"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/trgis.dev\/?p=55#respond"]}]},{"@type":"WebPage","@id":"https:\/\/trgis.dev\/?p=55","url":"https:\/\/trgis.dev\/?p=55","name":"Benimle \u00d6\u011frenin: CSS-1 - Turkiye GIS Developer Community","isPartOf":{"@id":"https:\/\/trgis.dev\/#website"},"datePublished":"2025-10-31T07:24:28+00:00","dateModified":"2025-10-31T07:24:29+00:00","breadcrumb":{"@id":"https:\/\/trgis.dev\/?p=55#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trgis.dev\/?p=55"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/trgis.dev\/?p=55#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/trgis.dev\/"},{"@type":"ListItem","position":2,"name":"Benimle \u00d6\u011frenin: CSS-1"}]},{"@type":"WebSite","@id":"https:\/\/trgis.dev\/#website","url":"https:\/\/trgis.dev\/","name":"Turkiye GIS Developer Community","description":"Turkiye GIS Developer Community","publisher":{"@id":"https:\/\/trgis.dev\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trgis.dev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/trgis.dev\/#organization","name":"Turkiye GIS Developer Community","url":"https:\/\/trgis.dev\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/trgis.dev\/#\/schema\/logo\/image\/","url":"https:\/\/trgis.dev\/wp-content\/uploads\/2024\/02\/Logo.png","contentUrl":"https:\/\/trgis.dev\/wp-content\/uploads\/2024\/02\/Logo.png","width":600,"height":400,"caption":"Turkiye GIS Developer Community"},"image":{"@id":"https:\/\/trgis.dev\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/trgis.dev\/#\/schema\/person\/69337ccedb1673706234be19fe73dd67","name":"Ceren Nisanur \u00d6zbilge","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/trgis.dev\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e18ba151bbb284f15318c05b560f08c91f46fca005e26fcc310118c840e37837?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e18ba151bbb284f15318c05b560f08c91f46fca005e26fcc310118c840e37837?s=96&d=retro&r=g","caption":"Ceren Nisanur \u00d6zbilge"},"url":"https:\/\/trgis.dev\/?author=26"}]}},"_links":{"self":[{"href":"https:\/\/trgis.dev\/index.php?rest_route=\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trgis.dev\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trgis.dev\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trgis.dev\/index.php?rest_route=\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/trgis.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=55"}],"version-history":[{"count":4,"href":"https:\/\/trgis.dev\/index.php?rest_route=\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/trgis.dev\/index.php?rest_route=\/wp\/v2\/posts\/55\/revisions\/63"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trgis.dev\/index.php?rest_route=\/wp\/v2\/media\/56"}],"wp:attachment":[{"href":"https:\/\/trgis.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trgis.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trgis.dev\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}