{"id":19023,"date":"2025-04-24T00:17:23","date_gmt":"2025-04-23T21:17:23","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/"},"modified":"2025-04-24T00:17:23","modified_gmt":"2025-04-23T21:17:23","slug":"csse-giris-web-tasariminin-temelleri","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/","title":{"rendered":"CSS&#8217;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri"},"content":{"rendered":"<p><body><\/p>\n<p>CSS&#8217;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri<\/p>\n<p>Merhaba! Ben Fatih Soysal ve bu makalede sizlere CSS&#8217;in (Cascading Style Sheets &#8211; Basamakl\u0131 Stil Sayfalar\u0131) temellerini a\u00e7\u0131klayaca\u011f\u0131m.  Web tasar\u0131m\u0131n\u0131n olmazsa olmazlar\u0131ndan olan CSS, HTML sayfalar\u0131n\u0131za stil ve g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131z\u0131 sa\u011flar.  Ba\u015fka bir deyi\u015fle,  HTML sayfalar\u0131n\u0131z\u0131n iskeletini olu\u015ftururken, CSS ise bu iskelete et ve deri giydirir.  \u00d6rne\u011fin, yaz\u0131 tiplerini, renkleri, sayfan\u0131n d\u00fczenini ve daha bir\u00e7ok \u00f6zelli\u011fi CSS ile kontrol edebilirsiniz. <\/p>\n<h2>CSS Nedir ve Neden \u00d6nemlidir?<\/h2>\n<p>CSS, HTML&#8217;in aksine, web sayfalar\u0131n\u0131z\u0131n i\u00e7eri\u011fini de\u011fil, g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc d\u00fczenleyen bir dildir.  Bu, HTML&#8217;in yap\u0131s\u0131n\u0131 bozmadan, sayfan\u0131z\u0131n tasar\u0131m\u0131n\u0131 \u00f6zelle\u015ftirmenize olanak tan\u0131r.  Bu sayede, web sitenizi daha \u00e7ekici, okunabilir ve kullan\u0131c\u0131 dostu hale getirebilirsiniz.  Dahas\u0131,  tek bir CSS dosyas\u0131 kullanarak, birden fazla HTML sayfas\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ayn\u0131 anda kontrol edebilirsiniz.  Bu durum, \u00f6zellikle b\u00fcy\u00fck web sitelerinde zamandan ve emekten tasarruf etmenizi sa\u011flar. <\/p>\n<p>\u00d6zetle, CSS web tasar\u0131m\u0131nda olduk\u00e7a \u00f6nemlidir \u00e7\u00fcnk\u00fc;<\/p>\n<ul>\n<li>Web sayfalar\u0131n\u0131za g\u00f6rsel \u00e7ekicilik katar.<\/li>\n<li>Sayfalar\u0131n\u0131z\u0131n d\u00fczenini ve yap\u0131s\u0131n\u0131 kontrol etmenizi sa\u011flar.<\/li>\n<li>Tutarl\u0131 bir web sitesi tasar\u0131m\u0131 olu\u015fturman\u0131za yard\u0131mc\u0131 olur.<\/li>\n<li>Web sitenizin eri\u015filebilirli\u011fini art\u0131r\u0131r.<\/li>\n<\/ul>\n<h2>CSS&#8217;i Nas\u0131l Kullan\u0131rs\u0131n\u0131z?<\/h2>\n<p>CSS&#8217;i HTML sayfalar\u0131n\u0131za \u00fc\u00e7 farkl\u0131 \u015fekilde ekleyebilirsiniz:<\/p>\n<ol>\n<li><b>\u0130\u00e7 Stil (Inline Style):<\/b>  HTML etiketlerinin i\u00e7ine style \u00f6zniteli\u011fini kullanarak CSS kodunu yazabilirsiniz.  Bu y\u00f6ntem k\u00fc\u00e7\u00fck d\u00fczenlemeler i\u00e7in uygundur, ancak b\u00fcy\u00fck projelerde kullan\u0131lmas\u0131 \u00f6nerilmez.\n<pre><code class=\"language-html\">&lt;p style=\"color:blue; font-size:16px;\">Bu bir paragraft\u0131r.&lt;\/p><\/code><\/pre>\n<\/li>\n<li><b>G\u00f6m\u00fcl\u00fc Stil (Embedded Style):<\/b>  HTML belgenizin <head> b\u00f6l\u00fcm\u00fc i\u00e7ine<br \/>\n<style> etiketleri aras\u0131nda CSS kodunu yazabilirsiniz.  Bu y\u00f6ntem, tek bir HTML sayfas\u0131n\u0131 stillemek i\u00e7in uygundur.<\/p>\n<pre><code class=\"language-html\">&lt;head>\n&lt;style>\np { color:red; }\n&lt;\/style>\n&lt;\/head><\/code><\/pre>\n<\/li>\n<li><b>D\u0131\u015f Stil (External Style):<\/b>  Ayr\u0131 bir .css dosyas\u0131 olu\u015fturup, HTML belgenizde bu dosyay\u0131 <link> etiketi ile ba\u011flayabilirsiniz. Bu y\u00f6ntem, b\u00fcy\u00fck projelerde en iyi uygulamad\u0131r \u00e7\u00fcnk\u00fc kodun d\u00fczenlenmesi ve tekrar kullan\u0131m\u0131 daha kolayd\u0131r.\n<pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" href=\"stil.css\"><\/code><\/pre>\n<\/li>\n<\/ol>\n<h2>Temel CSS Se\u00e7iciler<\/h2>\n<p>CSS'te, HTML \u00f6\u011felerine stil uygulamak i\u00e7in se\u00e7iciler kullan\u0131l\u0131r.  Baz\u0131 temel se\u00e7iciler \u015funlard\u0131r:<\/p>\n<ul>\n<li><b>Eleman Se\u00e7ici:<\/b>  \u00d6rne\u011fin, p t\u00fcm paragraflar\u0131 se\u00e7er.<\/li>\n<li><b>S\u0131n\u0131f Se\u00e7ici:<\/b>  .class-adi ile ba\u015flayan s\u0131n\u0131f ad\u0131na sahip \u00f6\u011feleri se\u00e7er.  \u00d6rne\u011fin,\n<p class=\"baslik\">  etiketine stil uygulamak i\u00e7in .baslik se\u00e7icisi kullan\u0131labilir.<\/li>\n<li><b>Kimlik Se\u00e7ici:<\/b>  #id-adi ile ba\u015flayan ID'ye sahip \u00f6\u011feleri se\u00e7er. Her sayfada yaln\u0131zca bir \u00f6\u011fe ayn\u0131 ID'ye sahip olabilir.<\/li>\n<\/ul>\n<h2>\u00d6rnek CSS Kodu<\/h2>\n<p>\u0130\u015fte basit bir \u00f6rnek CSS kodu:<\/p>\n<pre><code class=\"language-css\">\nbody {\n  background-color: #f0f0f0;\n  font-family: Arial, sans-serif;\n}\n\nh1 {\n  color: navy;\n  text-align: center;\n}\n\np {\n  color: #333;\n  line-height: 1.6;\n}\n<\/code><\/pre>\n<p>Bu kod, sayfan\u0131n arka plan rengini, yaz\u0131 tipini ve ba\u015fl\u0131klar\u0131n ve paragraflar\u0131n stilini tan\u0131mlar.  Daha fazla bilgi i\u00e7in <a href=\"https:\/\/fatihsoysal.com\" target=\"_blank\">kendi web sitemi<\/a> ziyaret edebilirsiniz.  Ayr\u0131ca,  <a href=\"https:\/\/dev.to\/fscss-ttr\/css-introduction-bm5\" target=\"_blank\">bu \u0130ngilizce makaleye<\/a> de g\u00f6z atabilirsiniz.<\/p>\n<p>Umar\u0131m bu makale size CSS'e giri\u015f yapman\u0131zda yard\u0131mc\u0131 olmu\u015ftur.  Unutmay\u0131n ki, CSS \u00f6\u011frenmek s\u00fcrekli pratik yapmay\u0131 gerektirir.  Ba\u015flamak i\u00e7in basit \u00f6rnekler deneyerek ve  web sitelerini inceleyerek  \u00f6\u011frenme s\u00fcrecini h\u0131zland\u0131rabilirsiniz.  Bol \u015fans!<\/p>\n<p>#Etiketler: CSS, CSS nedir, CSS \u00f6\u011frenme, web tasar\u0131m\u0131, stil sayfalar\u0131, HTML, cascading style sheets, web geli\u015ftirme, Fatih Soysal, se\u00e7iciler, inline style, embedded style, external style<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"CSS&#8217;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri Merhaba! Ben Fatih Soysal ve bu makalede sizlere CSS&#8217;in (Cascading Style Sheets &#8211;&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-19023","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS&#039;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri<\/title>\n<meta name=\"description\" content=\"Merhaba! Ben Fatih Soysal ve bu makalede sizlere CSS&#039;in (Cascading Style Sheets - Basamakl\u0131 Stil Sayfalar\u0131) temellerini a\u00e7\u0131klayaca\u011f\u0131m. Web tasar\u0131m\u0131n\u0131n olmazsa olmazlar\u0131ndan olan CSS, HTML sayfalar\u0131n\u0131za stil ve g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131z\u0131 sa\u011flar. Ba\u015fka bir deyi\u015fle, HTML sayfalar\u0131n\u0131z\u0131n iskeletini olu\u015ftururken, CSS ise bu iskelete et ve deri giydirir. \u00d6rne\u011fin, yaz\u0131 tiplerini, renkleri, sayfan\u0131n d\u00fczenini ve daha bir\u00e7ok \u00f6zelli\u011fi CSS ile kontrol edebilirsiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS&#039;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Ben Fatih Soysal ve bu makalede sizlere CSS&#039;in (Cascading Style Sheets - Basamakl\u0131 Stil Sayfalar\u0131) temellerini a\u00e7\u0131klayaca\u011f\u0131m. Web tasar\u0131m\u0131n\u0131n olmazsa olmazlar\u0131ndan olan CSS, HTML sayfalar\u0131n\u0131za stil ve g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131z\u0131 sa\u011flar. Ba\u015fka bir deyi\u015fle, HTML sayfalar\u0131n\u0131z\u0131n iskeletini olu\u015ftururken, CSS ise bu iskelete et ve deri giydirir. \u00d6rne\u011fin, yaz\u0131 tiplerini, renkleri, sayfan\u0131n d\u00fczenini ve daha bir\u00e7ok \u00f6zelli\u011fi CSS ile kontrol edebilirsiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-23T21:17:23+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\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:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS&#8217;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri\",\"datePublished\":\"2025-04-23T21:17:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/\"},\"wordCount\":578,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/\",\"name\":\"CSS'e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-04-23T21:17:23+00:00\",\"description\":\"Merhaba! Ben Fatih Soysal ve bu makalede sizlere CSS'in (Cascading Style Sheets - Basamakl\u0131 Stil Sayfalar\u0131) temellerini a\u00e7\u0131klayaca\u011f\u0131m. Web tasar\u0131m\u0131n\u0131n olmazsa olmazlar\u0131ndan olan CSS, HTML sayfalar\u0131n\u0131za stil ve g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131z\u0131 sa\u011flar. Ba\u015fka bir deyi\u015fle, HTML sayfalar\u0131n\u0131z\u0131n iskeletini olu\u015ftururken, CSS ise bu iskelete et ve deri giydirir. \u00d6rne\u011fin, yaz\u0131 tiplerini, renkleri, sayfan\u0131n d\u00fczenini ve daha bir\u00e7ok \u00f6zelli\u011fi CSS ile kontrol edebilirsiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS&#8217;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS'e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri","description":"Merhaba! Ben Fatih Soysal ve bu makalede sizlere CSS'in (Cascading Style Sheets - Basamakl\u0131 Stil Sayfalar\u0131) temellerini a\u00e7\u0131klayaca\u011f\u0131m. Web tasar\u0131m\u0131n\u0131n olmazsa olmazlar\u0131ndan olan CSS, HTML sayfalar\u0131n\u0131za stil ve g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131z\u0131 sa\u011flar. Ba\u015fka bir deyi\u015fle, HTML sayfalar\u0131n\u0131z\u0131n iskeletini olu\u015ftururken, CSS ise bu iskelete et ve deri giydirir. \u00d6rne\u011fin, yaz\u0131 tiplerini, renkleri, sayfan\u0131n d\u00fczenini ve daha bir\u00e7ok \u00f6zelli\u011fi CSS ile kontrol edebilirsiniz.","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:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS'e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri","og_description":"Merhaba! Ben Fatih Soysal ve bu makalede sizlere CSS'in (Cascading Style Sheets - Basamakl\u0131 Stil Sayfalar\u0131) temellerini a\u00e7\u0131klayaca\u011f\u0131m. Web tasar\u0131m\u0131n\u0131n olmazsa olmazlar\u0131ndan olan CSS, HTML sayfalar\u0131n\u0131za stil ve g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131z\u0131 sa\u011flar. Ba\u015fka bir deyi\u015fle, HTML sayfalar\u0131n\u0131z\u0131n iskeletini olu\u015ftururken, CSS ise bu iskelete et ve deri giydirir. \u00d6rne\u011fin, yaz\u0131 tiplerini, renkleri, sayfan\u0131n d\u00fczenini ve daha bir\u00e7ok \u00f6zelli\u011fi CSS ile kontrol edebilirsiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-04-23T21:17:23+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS&#8217;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri","datePublished":"2025-04-23T21:17:23+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/"},"wordCount":578,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/","url":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/","name":"CSS'e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-04-23T21:17:23+00:00","description":"Merhaba! Ben Fatih Soysal ve bu makalede sizlere CSS'in (Cascading Style Sheets - Basamakl\u0131 Stil Sayfalar\u0131) temellerini a\u00e7\u0131klayaca\u011f\u0131m. Web tasar\u0131m\u0131n\u0131n olmazsa olmazlar\u0131ndan olan CSS, HTML sayfalar\u0131n\u0131za stil ve g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131z\u0131 sa\u011flar. Ba\u015fka bir deyi\u015fle, HTML sayfalar\u0131n\u0131z\u0131n iskeletini olu\u015ftururken, CSS ise bu iskelete et ve deri giydirir. \u00d6rne\u011fin, yaz\u0131 tiplerini, renkleri, sayfan\u0131n d\u00fczenini ve daha bir\u00e7ok \u00f6zelli\u011fi CSS ile kontrol edebilirsiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/csse-giris-web-tasariminin-temelleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS&#8217;e Giri\u015f: Web Tasar\u0131m\u0131n\u0131n Temelleri"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/19023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=19023"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/19023\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=19023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=19023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=19023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}