{"id":41320,"date":"2026-04-02T17:01:34","date_gmt":"2026-04-02T14:01:34","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=41320"},"modified":"2026-04-02T17:01:34","modified_gmt":"2026-04-02T14:01:34","slug":"html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/","title":{"rendered":"HTML  Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"<h2>HTML <code><\/p>\n<div><\/code> Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber<\/h2>\n<h3>Giri\u015f: <code><\/p>\n<div><\/code> Elementinin Temelleri ve \u00d6nemi<\/h3>\n<p>Web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan HTML <code><\/p>\n<div><\/code> elementi, &#8220;division&#8221; kelimesinin k\u0131saltmas\u0131d\u0131r ve web sayfalar\u0131nda i\u00e7erik gruplamak i\u00e7in kullan\u0131lan genel ama\u00e7l\u0131 bir blok seviyesi kapsay\u0131c\u0131d\u0131r. Ba\u015flang\u0131\u00e7ta, bir sayfadaki b\u00f6l\u00fcmleri veya bile\u015fenleri mant\u0131ksal olarak ay\u0131rmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. <code><\/p>\n<div><\/code> elementi kendi ba\u015f\u0131na herhangi bir g\u00f6rsel anlam ta\u015f\u0131maz veya i\u00e7eri\u011fe semantik bir de\u011fer katmaz; tamamen yap\u0131sal bir ama\u00e7 i\u00e7in vard\u0131r. Ancak, CSS (Cascading Style Sheets) ile birle\u015fti\u011finde, <code><\/p>\n<div><\/code> web tasar\u0131m\u0131n\u0131n en g\u00fc\u00e7l\u00fc ve esnek ara\u00e7lar\u0131ndan biri haline gelir. Sayfa d\u00fczeninden karma\u015f\u0131k bile\u015fenlerin \u015fekillendirilmesine kadar her alanda merkezi bir rol oynar.<\/p>\n<p>Modern web standartlar\u0131nda <code><\/p>\n<section><\/code>, <code><\/p>\n<article><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<aside><\/code>, <code><\/p>\n<header><\/code>, <code><\/p>\n<footer><\/code> gibi semantik HTML5 etiketleri, i\u00e7eri\u011fe daha anlaml\u0131 bir yap\u0131 kazand\u0131rmak i\u00e7in tercih edilse de, <code><\/p>\n<div><\/code> hala genel gruplamalar, d\u00fczen yard\u0131mc\u0131lar\u0131 veya semantik bir kar\u015f\u0131l\u0131\u011f\u0131 olmayan \u00f6zel bile\u015fenler i\u00e7in vazge\u00e7ilmezdir. Bu makale, <code><\/p>\n<div><\/code> elementini CSS ile nas\u0131l etkili bir \u015fekilde \u015fekillendirebilece\u011finizi, temel \u00f6zelliklerden modern d\u00fczen tekniklerine, duyarl\u0131 tasar\u0131mdan en iyi uygulamalara kadar derinlemesine inceleyecektir. Amac\u0131m\u0131z, <code><\/p>\n<div><\/code>&#8216;i bir &#8220;bo\u015f kutu&#8221; olmaktan \u00e7\u0131kar\u0131p, dinamik ve estetik web aray\u00fczleri olu\u015fturmak i\u00e7in kullanabilece\u011finiz g\u00fc\u00e7l\u00fc bir araca d\u00f6n\u00fc\u015ft\u00fcrmektir.<\/p>\n<h3>Temel CSS Se\u00e7iciler ve <code><\/p>\n<div><\/code><\/h3>\n<p><code><\/p>\n<div><\/code> elementini \u015fekillendirmenin ilk ad\u0131m\u0131, do\u011fru CSS se\u00e7icilerini kullanarak onu hedeflemektir. CSS, belirli HTML elementlerine stil kurallar\u0131 uygulamak i\u00e7in \u00e7e\u015fitli se\u00e7ici t\u00fcrleri sunar. <code><\/p>\n<div><\/code> ile \u00e7al\u0131\u015f\u0131rken en s\u0131k kullan\u0131lan se\u00e7iciler \u015funlard\u0131r:<\/p>\n<h4>Element Se\u00e7ici (<code>div<\/code>)<\/h4>\n<p><code>div<\/code> se\u00e7icisi, belgedeki t\u00fcm <code><\/p>\n<div><\/code> elementlerini hedef al\u0131r. Bu, genel stiller uygulamak veya varsay\u0131lan davran\u0131\u015flar\u0131 ge\u00e7ersiz k\u0131lmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<pre><code class=\"language-css\">div {\n    background-color: lightgray;\n    padding: 10px;\n}<\/code><\/pre>\n<p>Bu y\u00f6ntem, genellikle t\u00fcm <code>div<\/code>&#8216;ler i\u00e7in ge\u00e7erli olacak temel s\u0131f\u0131rlama veya varsay\u0131lan stiller i\u00e7in kullan\u0131l\u0131r. Ancak, \u00e7o\u011fu zaman daha spesifik hedeflemeye ihtiya\u00e7 duyulur.<\/p>\n<h4>Class Se\u00e7ici (<code>.my-class<\/code>)<\/h4>\n<p>Class se\u00e7iciler, <code><\/p>\n<div><\/code> elementlerine <code>class<\/code> niteli\u011fi arac\u0131l\u0131\u011f\u0131yla atanan bir veya daha fazla s\u0131n\u0131fa g\u00f6re stil uygulamak i\u00e7in kullan\u0131l\u0131r. En esnek ve yayg\u0131n kullan\u0131lan se\u00e7ici t\u00fcr\u00fcd\u00fcr, \u00e7\u00fcnk\u00fc ayn\u0131 s\u0131n\u0131f birden fazla <code><\/p>\n<div><\/code> elementine atanabilir ve bir <code><\/p>\n<div><\/code> birden fazla s\u0131n\u0131fa sahip olabilir.<\/p>\n<pre><code class=\"language-html\"><div class=\"card\">Bu bir kart i\u00e7eri\u011fidir.<\/div>\n<div class=\"button primary\">Bu birincil bir d\u00fc\u011fmedir.<\/div><\/code><\/pre>\n<pre><code class=\"language-css\">.card {\n    border: 1px solid #ccc;\n    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);\n    margin: 15px;\n    padding: 20px;\n}\n.primary {\n    background-color: blue;\n    color: white;\n}<\/code><\/pre>\n<p>Class se\u00e7iciler, bile\u015fen tabanl\u0131 tasar\u0131m ve yeniden kullan\u0131labilir stiller olu\u015fturmak i\u00e7in idealdir.<\/p>\n<h4>ID Se\u00e7ici (<code>#my-id<\/code>)<\/h4>\n<p>ID se\u00e7iciler, belirli bir <code><\/p>\n<div><\/code> elementini, <code>id<\/code> niteli\u011fi arac\u0131l\u0131\u011f\u0131yla atanan benzersiz bir kimli\u011fe g\u00f6re hedeflemek i\u00e7in kullan\u0131l\u0131r. Bir HTML belgesinde ayn\u0131 <code>id<\/code> de\u011ferine sahip yaln\u0131zca bir element bulunmal\u0131d\u0131r. Bu nedenle, ID se\u00e7iciler genellikle sayfan\u0131n ana d\u00fczen b\u00f6l\u00fcmleri (<code>#header<\/code>, <code>#footer<\/code>, <code>#main-content<\/code>) veya JavaScript taraf\u0131ndan hedeflenen belirli elementler i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-html\"><div id=\"main-header\">Web Sitemin Ba\u015fl\u0131\u011f\u0131<\/div><\/code><\/pre>\n<pre><code class=\"language-css\">#main-header {\n    background-color: #333;\n    color: white;\n    text-align: center;\n    padding: 20px;\n}<\/code><\/pre>\n<p>ID se\u00e7icilerin \u00f6zg\u00fcll\u00fc\u011f\u00fc (specificity) \u00e7ok y\u00fcksektir, bu da di\u011fer se\u00e7icilerle \u00e7ak\u0131\u015ft\u0131\u011f\u0131nda stillerinin genellikle bask\u0131n olaca\u011f\u0131 anlam\u0131na gelir.<\/p>\n<h4>Nitelik Se\u00e7iciler (Attribute Selectors)<\/h4>\n<p>Nitelik se\u00e7iciler, bir <code><\/p>\n<div><\/code> elementinin belirli bir HTML niteli\u011fine sahip olup olmad\u0131\u011f\u0131na veya niteli\u011fin belirli bir de\u011fere sahip olup olmad\u0131\u011f\u0131na g\u00f6re hedefleme yapar.<\/p>\n<pre><code class=\"language-html\"><div data-type=\"section\">B\u00f6l\u00fcm 1<\/div>\n<div data-status=\"active\">Aktif \u0130\u00e7erik<\/div><\/code><\/pre>\n<pre><code class=\"language-css\">div[data-type=\"section\"] {\n    border-left: 5px solid steelblue;\n    padding-left: 10px;\n}\ndiv[data-status=\"active\"] {\n    font-weight: bold;\n    color: green;\n}<\/code><\/pre>\n<p>Bu se\u00e7iciler, \u00f6zellikle \u00f6zel veri nitelikleri (data attributes) ile \u00e7al\u0131\u015f\u0131rken veya belirli niteliklere sahip elementleri dinamik olarak \u015fekillendirirken kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h4>S\u00f6zde S\u0131n\u0131f Se\u00e7iciler (Pseudo-class Selectors)<\/h4>\n<p>S\u00f6zde s\u0131n\u0131f se\u00e7iciler, bir <code><\/p>\n<div><\/code> elementinin belirli bir durumdayken (\u00f6rne\u011fin, \u00fczerine gelindi\u011finde, etkin durumdayken) stil uygulamas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-html\"><div class=\"hover-box\">\u00dczerime Gel!<\/div>\n<div class=\"item\">1. \u00d6\u011fe<\/div>\n<div class=\"item\">2. \u00d6\u011fe<\/div>\n<div class=\"item\">3. \u00d6\u011fe<\/div><\/code><\/pre>\n<pre><code class=\"language-css\">.hover-box:hover {\n    background-color: yellow;\n    cursor: pointer;\n}\n.item:nth-child(even) { \/<em> \u00c7ift s\u0131ral\u0131 \u00f6\u011feler <\/em>\/\n    background-color: #f0f0f0;\n}<\/code><\/pre>\n<p><code>:hover<\/code>, <code>:focus<\/code>, <code>:active<\/code>, <code>:nth-child()<\/code>, <code>:first-child<\/code>, <code>:last-child<\/code> gibi s\u00f6zde s\u0131n\u0131flar, <code><\/p>\n<div><\/code> elementlerine etkile\u015fimli ve dinamik stiller kazand\u0131rmak i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r.<\/p>\n<h4>Kombinat\u00f6r Se\u00e7iciler (Combinator Selectors)<\/h4>\n<p>Kombinat\u00f6r se\u00e7iciler, birden fazla se\u00e7iciyi birle\u015ftirerek elementler aras\u0131ndaki ili\u015fkilere g\u00f6re hedefleme yapar.<br \/>\n*   <strong>Bo\u015fluk (Descendant Selector):<\/strong> <code>div p<\/code> (t\u00fcm <code>div<\/code> i\u00e7indeki <code>p<\/code> elementleri)<br \/>\n*   <strong>\u00c7ocuk Se\u00e7ici (<code>><\/code>):<\/strong> <code>div > p<\/code> (yaln\u0131zca <code>div<\/code>&#8216;in do\u011frudan \u00e7ocuklar\u0131 olan <code>p<\/code> elementleri)<br \/>\n*   <strong>Biti\u015fik Karde\u015f Se\u00e7ici (<code>+<\/code>):<\/strong> <code>div + p<\/code> (bir <code>div<\/code>&#8216;den hemen sonra gelen <code>p<\/code> elementi)<br \/>\n*   <strong>Genel Karde\u015f Se\u00e7ici (<code>~<\/code>):<\/strong> <code>div ~ p<\/code> (bir <code>div<\/code>&#8216;den sonra gelen t\u00fcm <code>p<\/code> elementleri)<\/p>\n<pre><code class=\"language-html\"><div class=\"container\">\n    <p>Bu div'in do\u011frudan \u00e7ocu\u011fu.<\/p>\n    <div>\n        <p>Bu div'in torunu.<\/p>\n    <\/div>\n<\/div>\n<p>Bu div'den sonra gelen p.<\/p><\/code><\/pre>\n<pre><code class=\"language-css\">.container p { \/<em> T\u00fcm p'ler <\/em>\/\n    color: blue;\n}\n.container > p { \/<em> Yaln\u0131zca do\u011frudan \u00e7ocuk p'ler <\/em>\/\n    font-weight: bold;\n}\n.container + p { \/<em> Container'dan hemen sonra gelen p <\/em>\/\n    border-top: 1px solid red;\n}<\/code><\/pre>\n<p>Bu se\u00e7iciler, karma\u015f\u0131k belge yap\u0131lar\u0131nda belirli <code><\/p>\n<div><\/code> alt elementlerini veya kom\u015fu <code><\/p>\n<div><\/code>&#8216;leri hedeflemek i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr.<\/p>\n<h3><code><\/p>\n<div><\/code> Elementine Uygulanabilecek Temel CSS \u00d6zellikleri<\/h3>\n<p><code><\/p>\n<div><\/code> elementini g\u00f6rsel olarak \u015fekillendirmek i\u00e7in kullanabilece\u011finiz temel CSS \u00f6zellikleri olduk\u00e7a \u00e7e\u015fitlidir. Bu \u00f6zellikler, <code><\/p>\n<div><\/code>&#8216;in g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, boyutunu, konumunu ve i\u00e7eri\u011fini kontrol etmenizi sa\u011flar.<\/p>\n<h4>Boyutland\u0131rma (Sizing)<\/h4>\n<p>*   <code>width<\/code>, <code>height<\/code>: Bir <code><\/p>\n<div><\/code>&#8216;in geni\u015fli\u011fini ve y\u00fcksekli\u011fini ayarlar. <code>px<\/code>, <code>%<\/code>, <code>em<\/code>, <code>rem<\/code>, <code>vw<\/code>, <code>vh<\/code> gibi birimler kullan\u0131labilir.<br \/>\n*   <code>max-width<\/code>, <code>min-width<\/code>: Maksimum ve minimum geni\u015flik de\u011ferleri belirler. \u00d6zellikle duyarl\u0131 tasar\u0131m i\u00e7in \u00f6nemlidir.<br \/>\n*   <code>max-height<\/code>, <code>min-height<\/code>: Maksimum ve minimum y\u00fckseklik de\u011ferleri belirler.<\/p>\n<pre><code class=\"language-css\">.box {\n    width: 300px;\n    height: 200px;\n    max-width: 100%; \/<em> Ekran k\u00fc\u00e7\u00fcld\u00fc\u011f\u00fcnde geni\u015fli\u011fin %100'\u00fcn\u00fc kapla <\/em>\/\n    min-height: 150px;\n}<\/code><\/pre>\n<h4>Kenar Bo\u015fluklar\u0131 (Spacing)<\/h4>\n<p>*   <code>margin<\/code>: Bir elementin d\u0131\u015f kenar bo\u015flu\u011funu kontrol eder. <code>margin-top<\/code>, <code>margin-right<\/code>, <code>margin-bottom<\/code>, <code>margin-left<\/code> veya k\u0131sa yaz\u0131m (<code>margin: 10px 20px;<\/code>) ile kullan\u0131labilir. <code>margin: auto;<\/code> blok seviyesi elementleri yatayda ortalamak i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <code>padding<\/code>: Bir elementin i\u00e7eri\u011fi ile kenarl\u0131\u011f\u0131 aras\u0131ndaki i\u00e7 bo\u015flu\u011fu kontrol eder. <code>padding-top<\/code>, <code>padding-right<\/code>, <code>padding-bottom<\/code>, <code>padding-left<\/code> veya k\u0131sa yaz\u0131m (<code>padding: 15px;<\/code>) ile kullan\u0131labilir.<\/p>\n<pre><code class=\"language-css\">.spaced-div {\n    margin: 20px auto; \/<em> \u00dcst ve altta 20px, sa\u011f ve solda otomatik (ortala) <\/em>\/\n    padding: 15px 10px; \/<em> \u00dcst\/alt 15px, sa\u011f\/sol 10px <\/em>\/\n}<\/code><\/pre>\n<h4>Kenarl\u0131klar (Borders)<\/h4>\n<p>*   <code>border<\/code>: Bir elementin kenarl\u0131\u011f\u0131n\u0131 ayarlar. <code>border-width<\/code>, <code>border-style<\/code>, <code>border-color<\/code> \u00f6zelliklerinin k\u0131sa yaz\u0131m\u0131d\u0131r.<br \/>\n*   <code>border-radius<\/code>: Bir elementin k\u00f6\u015felerini yuvarlamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-css\">.bordered-box {\n    border: 2px solid #3498db;\n    border-radius: 8px;\n}<\/code><\/pre>\n<h4>Arka Plan (Background)<\/h4>\n<p>*   <code>background-color<\/code>: Elementin arka plan rengini ayarlar.<br \/>\n*   <code>background-image<\/code>: Arka plan resmi ekler.<br \/>\n*   <code>background-repeat<\/code>: Arka plan resminin nas\u0131l tekrar edece\u011fini belirler.<br \/>\n*   <code>background-position<\/code>: Arka plan resminin konumunu ayarlar.<br \/>\n*   <code>background-size<\/code>: Arka plan resminin boyutunu ayarlar (<code>cover<\/code>, <code>contain<\/code> veya piksel\/y\u00fczde de\u011ferleri).<br \/>\n*   <code>background<\/code>: T\u00fcm bu \u00f6zelliklerin k\u0131sa yaz\u0131m\u0131.<\/p>\n<pre><code class=\"language-css\">.hero-section {\n    background: url('hero-image.jpg') no-repeat center center \/ cover;\n    background-color: #f8f8f8;\n    color: white; \/<em> Metin rengi <\/em>\/\n}<\/code><\/pre>\n<h4>Metin ve Tipografi (Text and Typography)<\/h4>\n<p><code><\/p>\n<div><\/code> elementinin kendisi metin i\u00e7ermese de, genellikle metin i\u00e7eren alt elementleri bar\u0131nd\u0131r\u0131r. Bu nedenle, <code><\/p>\n<div><\/code> \u00fczerine uygulanan tipografi \u00f6zellikleri, i\u00e7erdi\u011fi metni etkiler.<br \/>\n*   <code>color<\/code>: Metin rengini ayarlar.<br \/>\n*   <code>font-family<\/code>: Yaz\u0131 tipini ayarlar.<br \/>\n*   <code>font-size<\/code>: Yaz\u0131 tipi boyutunu ayarlar.<br \/>\n*   <code>font-weight<\/code>: Yaz\u0131 tipi kal\u0131nl\u0131\u011f\u0131n\u0131 ayarlar.<br \/>\n*   <code>text-align<\/code>: Metnin hizalamas\u0131n\u0131 (<code>left<\/code>, <code>right<\/code>, <code>center<\/code>, <code>justify<\/code>) ayarlar.<br \/>\n*   <code>line-height<\/code>: Metin sat\u0131rlar\u0131 aras\u0131ndaki bo\u015flu\u011fu ayarlar.<\/p>\n<pre><code class=\"language-css\">.text-container {\n    color: #333;\n    font-family: Arial, sans-serif;\n    font-size: 16px;\n    line-height: 1.6;\n    text-align: justify;\n}<\/code><\/pre>\n<h4>G\u00f6lge (Shadows)<\/h4>\n<p>*   <code>box-shadow<\/code>: Bir elementin kutusuna g\u00f6lge ekler.<br \/>\n*   <code>text-shadow<\/code>: Elementin i\u00e7indeki metne g\u00f6lge ekler.<\/p>\n<pre><code class=\"language-css\">.shadow-box {\n    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);\n}\n.shadow-text {\n    text-shadow: 2px 2px 4px #aaa;\n}<\/code><\/pre>\n<h4>G\u00f6r\u00fcn\u00fcrl\u00fck (Visibility) ve Ta\u015fma (Overflow)<\/h4>\n<p>*   <code>display<\/code>: Bir elementin nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini ayarlar (<code>block<\/code>, <code>inline<\/code>, <code>inline-block<\/code>, <code>none<\/code>, <code>flex<\/code>, <code>grid<\/code>). Bu, d\u00fczen olu\u015fturman\u0131n temelidir.<br \/>\n*   <code>visibility<\/code>: Bir elementin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol eder (<code>visible<\/code>, <code>hidden<\/code>). <code>display: none<\/code>&#8216;dan farkl\u0131 olarak, <code>visibility: hidden<\/code> elementi gizler ancak yerini korur.<br \/>\n*   <code>opacity<\/code>: Bir elementin saydaml\u0131\u011f\u0131n\u0131 ayarlar (0&#8217;dan 1&#8217;e).<br \/>\n*   <code>overflow<\/code>: Bir elementin i\u00e7eri\u011fi kutusundan ta\u015ft\u0131\u011f\u0131nda ne olaca\u011f\u0131n\u0131 belirler (<code>visible<\/code>, <code>hidden<\/code>, <code>scroll<\/code>, <code>auto<\/code>).<\/p>\n<pre><code class=\"language-css\">.hidden-div {\n    display: none; \/<em> Elementi tamamen gizler ve yer kaplamaz <\/em>\/\n}\n.scrollable-content {\n    height: 150px;\n    overflow-y: scroll; \/<em> Dikey kayd\u0131rma \u00e7ubu\u011fu ekler <\/em>\/\n}<\/code><\/pre>\n<h3><code><\/p>\n<div><\/code> ile D\u00fczen Olu\u015fturma (Layout with <code><\/p>\n<div><\/code>)<\/h3>\n<p><code><\/p>\n<div><\/code> elementleri, web sayfalar\u0131n\u0131n d\u00fczenini olu\u015fturmak i\u00e7in birincil ara\u00e7lard\u0131r. CSS&#8217;in <code>display<\/code> \u00f6zelli\u011fi ve konumland\u0131rma teknikleri sayesinde, karma\u015f\u0131k ve duyarl\u0131 d\u00fczenler olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr.<\/p>\n<h4><code>display<\/code> \u00d6zelli\u011fi ve Temel D\u00fczenler<\/h4>\n<p><code>display<\/code> \u00f6zelli\u011fi, bir <code><\/p>\n<div><\/code>&#8216;in di\u011fer elementlerle nas\u0131l etkile\u015fime girece\u011fini belirler:<br \/>\n*   <strong><code>display: block;<\/code><\/strong>: <code><\/p>\n<div><\/code>&#8216;in varsay\u0131lan de\u011feridir. Element, t\u00fcm mevcut geni\u015fli\u011fi kaplar ve kendinden sonra gelen elementleri yeni bir sat\u0131ra iter.<br \/>\n*   <strong><code>display: inline-block;<\/code><\/strong>: Elementin <code>inline<\/code> gibi sat\u0131r i\u00e7i akmas\u0131na izin verirken, <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> ve <code>padding<\/code> gibi <code>block<\/code> \u00f6zelliklerini korumas\u0131n\u0131 sa\u011flar. Yan yana s\u0131ralanmas\u0131 gereken ancak boyutlar\u0131 \u00fczerinde kontrol sahibi olunmas\u0131 istenen elementler i\u00e7in idealdir.<br \/>\n*   <strong><code>display: none;<\/code><\/strong>: Elementi tamamen gizler ve belgenin d\u00fczeninde yer kaplamamas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>Flexbox ile Esnek D\u00fczenler<\/h4>\n<p>CSS Flexbox (Esnek Kutu Mod\u00fcl\u00fc), tek boyutlu d\u00fczenler (sat\u0131r veya s\u00fctun) olu\u015fturmak i\u00e7in modern ve g\u00fc\u00e7l\u00fc bir y\u00f6ntemdir. Bir <code><\/p>\n<div><\/code>&#8216;i Flex kapsay\u0131c\u0131s\u0131 (<code>flex container<\/code>) yaparak, i\u00e7indeki \u00e7ocuk <code><\/p>\n<div><\/code>&#8216;leri (<code>flex items<\/code>) kolayca hizalayabilir, s\u0131ralayabilir ve boyutland\u0131rabilirsiniz.<\/p>\n<pre><code class=\"language-html\"><div class=\"flex-container\">\n    <div class=\"flex-item\">\u00d6\u011fe 1<\/div>\n    <div class=\"flex-item\">\u00d6\u011fe 2<\/div>\n    <div class=\"flex-item\">\u00d6\u011fe 3<\/div>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-css\">.flex-container {\n    display: flex; \/<em> Ana kapsay\u0131c\u0131y\u0131 Flex kapsay\u0131c\u0131 yapar <\/em>\/\n    justify-content: space-around; \/<em> \u00d6\u011feleri aralar\u0131nda bo\u015fluk b\u0131rakarak hizalar <\/em>\/\n    align-items: center; \/<em> \u00d6\u011feleri dikeyde ortalar <\/em>\/\n    flex-wrap: wrap; \/<em> Ekran k\u00fc\u00e7\u00fcld\u00fc\u011f\u00fcnde \u00f6\u011felerin alt sat\u0131ra ge\u00e7mesini sa\u011flar <\/em>\/\n    height: 200px;\n    border: 1px solid #ddd;\n}\n.flex-item {\n    padding: 15px;\n    background-color: #e74c3c;\n    color: white;\n    margin: 5px;\n}<\/code><\/pre>\n<p>Flexbox, men\u00fcler, kart d\u00fczenleri, form elemanlar\u0131 gibi bile\u015fenlerin olu\u015fturulmas\u0131nda inan\u0131lmaz derecede etkilidir ve duyarl\u0131 tasar\u0131m i\u00e7in temel bir ara\u00e7t\u0131r.<\/p>\n<h4>CSS Grid ile Izgara D\u00fczenler<\/h4>\n<p>CSS Grid Layout, iki boyutlu d\u00fczenler (sat\u0131rlar ve s\u00fctunlar) olu\u015fturmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Flexbox&#8217;tan daha karma\u015f\u0131k sayfa d\u00fczenleri i\u00e7in idealdir. Bir <code><\/p>\n<div><\/code>&#8216;i Grid kapsay\u0131c\u0131s\u0131 yaparak, sayfa d\u00fczenini bir \u0131zgara sistemi \u00fczerinde tan\u0131mlayabilirsiniz.<\/p>\n<pre><code class=\"language-html\"><div class=\"grid-container\">\n    <div class=\"grid-item header\">Ba\u015fl\u0131k<\/div>\n    <div class=\"grid-item sidebar\">Kenar \u00c7ubu\u011fu<\/div>\n    <div class=\"grid-item main\">Ana \u0130\u00e7erik<\/div>\n    <div class=\"grid-item footer\">Alt Bilgi<\/div>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-css\">.grid-container {\n    display: grid; \/<em> Ana kapsay\u0131c\u0131y\u0131 Grid kapsay\u0131c\u0131 yapar <\/em>\/\n    grid-template-columns: 1fr 3fr; \/<em> \u0130ki s\u00fctun: biri 1 birim, di\u011feri 3 birim geni\u015fli\u011finde <\/em>\/\n    grid-template-rows: auto 1fr auto; \/<em> \u00dc\u00e7 sat\u0131r: otomatik, 1 birim, otomatik y\u00fckseklik <\/em>\/\n    grid-gap: 10px; \/<em> Izgara \u00f6\u011feleri aras\u0131ndaki bo\u015fluk <\/em>\/\n    height: 400px;\n    border: 1px solid #ddd;\n}\n.header { grid-column: 1 \/ 3; \/<em> Ba\u015fl\u0131k 1. s\u00fctundan 3. s\u00fctuna kadar uzan\u0131r <\/em>\/ background-color: #2ecc71; }\n.sidebar { grid-column: 1; grid-row: 2; background-color: #f1c40f; }\n.main { grid-column: 2; grid-row: 2; background-color: #3498db; }\n.footer { grid-column: 1 \/ 3; background-color: #9b59b6; }\n.grid-item {\n    padding: 20px;\n    color: white;\n    text-align: center;\n}<\/code><\/pre>\n<p>Grid, ana sayfa d\u00fczenleri, foto\u011fraf galerileri ve di\u011fer karma\u015f\u0131k, yap\u0131sal d\u00fczenler i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n<h4>Konumland\u0131rma (Positioning)<\/h4>\n<p><code>position<\/code> \u00f6zelli\u011fi, bir <code><\/p>\n<div><\/code> elementinin belgedeki yerini kontrol etmenin ba\u015fka bir yoludur.<br \/>\n*   <strong><code>position: static;<\/code><\/strong>: Varsay\u0131lan de\u011ferdir. Element, normal belge ak\u0131\u015f\u0131nda konumlan\u0131r. <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, <code>left<\/code> \u00f6zellikleri bu durumda etki etmez.<br \/>\n*   <strong><code>position: relative;<\/code><\/strong>: Elementi normal ak\u0131\u015f\u0131nda tutar, ancak <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, <code>left<\/code> \u00f6zellikleriyle kendi normal konumuna g\u00f6re hareket ettirilebilir. Genellikle \u00e7ocuk elementlerin <code>position: absolute;<\/code> ile konumland\u0131r\u0131lmas\u0131 i\u00e7in bir referans noktas\u0131 olarak kullan\u0131l\u0131r.<br \/>\n*   <strong><code>position: absolute;<\/code><\/strong>: Elementi normal ak\u0131\u015ftan \u00e7\u0131kar\u0131r ve en yak\u0131n konumland\u0131r\u0131lm\u0131\u015f (yani <code>static<\/code> olmayan) ebeveyn elementine g\u00f6re konumland\u0131r\u0131r. E\u011fer konumland\u0131r\u0131lm\u0131\u015f bir ebeveyn yoksa, <code><body><\/code> elementine g\u00f6re konumlan\u0131r.<br \/>\n*   <strong><code>position: fixed;<\/code><\/strong>: Elementi g\u00f6r\u00fcnt\u00fc alan\u0131na (viewport) g\u00f6re konumland\u0131r\u0131r ve sayfa kayd\u0131r\u0131lsa bile yerinde sabit kal\u0131r. Navigasyon \u00e7ubuklar\u0131 veya sabit d\u00fc\u011fmeler i\u00e7in idealdir.<br \/>\n*   <strong><code>position: sticky;<\/code><\/strong>: <code>relative<\/code> ve <code>fixed<\/code> aras\u0131nda bir hibrit gibidir. Element normal ak\u0131\u015fta konumlan\u0131r, ancak belirli bir kayd\u0131rma e\u015fi\u011fine ula\u015ft\u0131\u011f\u0131nda <code>fixed<\/code> gibi davran\u0131r.<\/p>\n<pre><code class=\"language-css\">.parent-relative {\n    position: relative; \/<em> \u00c7ocuk element i\u00e7in referans noktas\u0131 <\/em>\/\n    width: 300px;\n    height: 200px;\n    border: 1px solid black;\n}\n.child-absolute {\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    width: 50px;\n    height: 50px;\n    background-color: red;\n}\n.fixed-header {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background-color: #333;\n    color: white;\n    padding: 10px;\n    z-index: 1000; \/<em> Di\u011fer elementlerin \u00fczerinde g\u00f6r\u00fcnmesini sa\u011flar <\/em>\/\n}<\/code><\/pre>\n<p><code>z-index<\/code> \u00f6zelli\u011fi, konumland\u0131r\u0131lm\u0131\u015f elementlerin \u00fcst \u00fcste binme s\u0131ras\u0131n\u0131 kontrol eder. Daha y\u00fcksek <code>z-index<\/code> de\u011ferine sahip elementler, daha d\u00fc\u015f\u00fck de\u011ferlere sahip olanlar\u0131n \u00fczerinde g\u00f6r\u00fcn\u00fcr.<\/p>\n<h4>Float \u00d6zelli\u011fi (Eski D\u00fczen Y\u00f6ntemi)<\/h4>\n<p><code>float<\/code> \u00f6zelli\u011fi, ba\u015flang\u0131\u00e7ta metni bir resmin etraf\u0131nda kayd\u0131rmak i\u00e7in tasarlanm\u0131\u015f olsa da, uzun y\u0131llar boyunca \u00e7ok s\u00fctunlu d\u00fczenler olu\u015fturmak i\u00e7in kullan\u0131lm\u0131\u015ft\u0131r. <code>float: left;<\/code> veya <code>float: right;<\/code> bir elementi belirlenen y\u00f6ne do\u011fru kayd\u0131r\u0131r ve di\u011fer elementlerin etraf\u0131nda akmas\u0131na izin verir. Ancak, <code>float<\/code> kullan\u0131ld\u0131\u011f\u0131nda &#8220;clearing&#8221; (temizleme) sorunlar\u0131 ortaya \u00e7\u0131kar ve genellikle <code>::after<\/code> s\u00f6zde elementi ile <code>clear: both;<\/code> kullan\u0131larak \u00e7\u00f6z\u00fcl\u00fcr.<\/p>\n<pre><code class=\"language-css\">.image-float {\n    float: left;\n    margin-right: 15px;\n}\n.clear-fix::after {\n    content: \"\";\n    display: table;\n    clear: both;\n}<\/code><\/pre>\n<p>G\u00fcn\u00fcm\u00fczde Flexbox ve Grid, <code>float<\/code>&#8216;a g\u00f6re \u00e7ok daha esnek, g\u00fcvenilir ve bak\u0131m\u0131 kolay d\u00fczen \u00e7\u00f6z\u00fcmleri sundu\u011fundan, yeni projelerde <code>float<\/code> kullan\u0131m\u0131 genellikle \u00f6nerilmez, ancak eski kod tabanlar\u0131nda hala kar\u015f\u0131la\u015f\u0131labilir.<\/p>\n<h3>Duyarl\u0131 Tasar\u0131m ve <code><\/p>\n<div><\/code><\/h3>\n<p>Modern web siteleri, farkl\u0131 ekran boyutlar\u0131na (masa\u00fcst\u00fc, tablet, mobil) uyum sa\u011flayabilen duyarl\u0131 tasar\u0131mlara sahip olmal\u0131d\u0131r. <code><\/p>\n<div><\/code> elementleri, CSS medya sorgular\u0131 ve esnek birimlerle birle\u015ftirildi\u011finde, duyarl\u0131 tasar\u0131mlar\u0131n temelini olu\u015fturur.<\/p>\n<h4>Medya Sorgular\u0131 (Media Queries)<\/h4>\n<p>Medya sorgular\u0131, belirli ko\u015fullar (ekran geni\u015fli\u011fi, cihaz y\u00f6n\u00fc vb.) kar\u015f\u0131land\u0131\u011f\u0131nda farkl\u0131 CSS stilleri uygulaman\u0131za olanak tan\u0131r.<\/p>\n<pre><code class=\"language-css\">.responsive-div {\n    width: 80%; \/<em> Varsay\u0131lan geni\u015flik <\/em>\/\n    margin: 0 auto;\n}\n\n@media screen and (max-width: 768px) {\n    .responsive-div {\n        width: 95%; \/<em> Tablet boyutunda daha geni\u015f <\/em>\/\n        padding: 10px;\n    }\n}\n\n@media screen and (max-width: 480px) {\n    .responsive-div {\n        width: 100%; \/<em> Mobil boyutunda tam geni\u015flik <\/em>\/\n        padding: 5px;\n        box-sizing: border-box; \/<em> Padding'i geni\u015fli\u011fe dahil et <\/em>\/\n    }\n}<\/code><\/pre>\n<p>Medya sorgular\u0131, <code><\/p>\n<div><\/code>&#8216;lerin boyutlar\u0131n\u0131, d\u00fczenlerini (\u00f6rne\u011fin Flexbox y\u00f6n\u00fcn\u00fc de\u011fi\u015ftirme) veya g\u00f6r\u00fcn\u00fcrl\u00fcklerini ekran boyutuna g\u00f6re dinamik olarak ayarlamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h4>Esnek Birimler<\/h4>\n<p><code>px<\/code> gibi sabit birimler yerine y\u00fczde (<code>%<\/code>), <code>vw<\/code> (viewport width), <code>vh<\/code> (viewport height), <code>em<\/code>, <code>rem<\/code> gibi esnek birimler kullanmak, <code><\/p>\n<div><\/code>&#8216;lerin farkl\u0131 ekran boyutlar\u0131na daha do\u011fal bir \u015fekilde uyum sa\u011flamas\u0131na yard\u0131mc\u0131 olur.<br \/>\n*   <code>width: 100%;<\/code>: Ebeveyn elementinin t\u00fcm geni\u015fli\u011fini kaplar.<br \/>\n*   <code>width: 50vw;<\/code>: G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n (viewport) geni\u015fli\u011finin %50&#8217;si.<br \/>\n*   <code>padding: 2vw;<\/code>: G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n geni\u015fli\u011finin %2&#8217;si kadar i\u00e7 bo\u015fluk.<br \/>\nBu birimler, <code><\/p>\n<div><\/code>&#8216;lerin i\u00e7eri\u011fiyle birlikte \u00f6l\u00e7eklenmesini sa\u011flayarak duyarl\u0131 bir deneyim sunar.<\/p>\n<h4>Flexbox ve Grid&#8217;in Duyarl\u0131l\u0131k Yetenekleri<\/h4>\n<p>Flexbox ve Grid, do\u011falar\u0131 gere\u011fi duyarl\u0131d\u0131r.<br \/>\n*   <strong>Flexbox<\/strong>: <code>flex-wrap: wrap;<\/code> \u00f6zelli\u011fi, esnek \u00f6\u011felerin kapsay\u0131c\u0131ya s\u0131\u011fmad\u0131\u011f\u0131nda otomatik olarak yeni bir sat\u0131ra ge\u00e7mesini sa\u011flar. <code>flex-direction<\/code> medya sorgular\u0131 ile de\u011fi\u015ftirilerek mobil cihazlarda \u00f6\u011felerin dikey olarak s\u0131ralanmas\u0131 sa\u011flanabilir.<br \/>\n*   <strong>Grid<\/strong>: <code>grid-template-columns<\/code> veya <code>grid-template-rows<\/code> \u00f6zelliklerinde <code>fr<\/code> birimleri ve <code>repeat()<\/code> fonksiyonu ile birlikte <code>auto-fit<\/code> veya <code>auto-fill<\/code> anahtar kelimeleri kullan\u0131larak, ekran boyutuna g\u00f6re otomatik olarak s\u00fctun say\u0131s\u0131n\u0131 veya boyutunu ayarlayan dinamik \u0131zgaralar olu\u015fturulabilir.<\/p>\n<h3>En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n<p><code><\/p>\n<div><\/code> elementini etkili bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi uygulamalar\u0131 takip etmek, kodunuzu daha okunabilir, s\u00fcrd\u00fcr\u00fclebilir ve performansl\u0131 hale getirecektir.<\/p>\n<h4>Anlamsal HTML (Semantic HTML)<\/h4>\n<p><code><\/p>\n<div><\/code> genel bir kapsay\u0131c\u0131 olsa da, HTML5 ile gelen <code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><main><\/code>, <code><\/p>\n<article><\/code>, <code><\/p>\n<section><\/code>, <code><\/p>\n<aside><\/code>, <code><\/p>\n<footer><\/code> gibi semantik etiketleri m\u00fcmk\u00fcn oldu\u011funca kullanmaya \u00f6zen g\u00f6sterin. Bu etiketler, i\u00e7eri\u011fin amac\u0131n\u0131 taray\u0131c\u0131lara, arama motorlar\u0131na ve eri\u015filebilirlik ara\u00e7lar\u0131na bildirir. <code><\/p>\n<div><\/code>&#8216;i yaln\u0131zca i\u00e7eri\u011fin semantik bir kar\u015f\u0131l\u0131\u011f\u0131 olmad\u0131\u011f\u0131nda veya stilistik bir gruplama i\u00e7in kulland\u0131\u011f\u0131n\u0131zda tercih edin. Bu yakla\u015f\u0131m, &#8220;Divitis&#8221; olarak bilinen gereksiz <code><\/p>\n<div><\/code> yuvalamalar\u0131ndan ka\u00e7\u0131nman\u0131za da yard\u0131mc\u0131 olur.<\/p>\n<h4>CSS S\u0131n\u0131fland\u0131rmas\u0131 (CSS Class Naming)<\/h4>\n<p>Mant\u0131kl\u0131 ve tutarl\u0131 s\u0131n\u0131f adland\u0131rma kurallar\u0131 kullanmak, b\u00fcy\u00fck projelerde CSS&#8217;i y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r. BEM (Block Element Modifier), SMACSS (Scalable and Modular Architecture for CSS) veya OOCSS (Object-Oriented CSS) gibi metodolojiler, CSS kodunuzu mod\u00fcler, yeniden kullan\u0131labilir ve anla\u015f\u0131l\u0131r hale getirmek i\u00e7in pop\u00fcler yakla\u015f\u0131mlard\u0131r. \u00d6rne\u011fin, <code>div class=\"card card--primary card__title\"<\/code> gibi BEM tabanl\u0131 bir isimlendirme, elementin ne oldu\u011funu, ne t\u00fcr bir varyant oldu\u011funu ve hangi alt elemente ait oldu\u011funu a\u00e7\u0131k\u00e7a belirtir.<\/p>\n<h4>A\u015f\u0131r\u0131 Karma\u015f\u0131kl\u0131ktan Ka\u00e7\u0131nma (&#8220;Divitis&#8221;)<\/h4>\n<p>Gereksiz <code><\/p>\n<div><\/code> yuvalamalar\u0131ndan ka\u00e7\u0131n\u0131n. Her elementin bir amaca hizmet etmesi gerekir. A\u015f\u0131r\u0131 yuvalanm\u0131\u015f <code><\/p>\n<div><\/code>&#8216;ler, HTML yap\u0131s\u0131n\u0131 karma\u015f\u0131kla\u015ft\u0131r\u0131r, okunabilirli\u011fi azalt\u0131r ve CSS se\u00e7icilerinin daha az verimli olmas\u0131na neden olabilir. M\u00fcmk\u00fcn oldu\u011funca d\u00fcz bir HTML yap\u0131s\u0131 hedefleyin.<\/p>\n<h4>Performans Optimizasyonu<\/h4>\n<p>*   <strong>Gereksiz Stillerden Ka\u00e7\u0131nma<\/strong>: Kullan\u0131lmayan CSS kurallar\u0131n\u0131 kald\u0131r\u0131n.<br \/>\n*   <strong>K\u0131sa Yaz\u0131mlar<\/strong>: CSS \u00f6zelliklerinin k\u0131sa yaz\u0131mlar\u0131n\u0131 (<code>background<\/code>, <code>margin<\/code>, <code>padding<\/code>, <code>border<\/code>) kullanarak kod miktar\u0131n\u0131 azalt\u0131n.<br \/>\n*   <strong>Donan\u0131m H\u0131zland\u0131rma<\/strong>: D\u00f6n\u00fc\u015f\u00fcmler (<code>transform<\/code>), ge\u00e7i\u015fler (<code>transition<\/code>) ve animasyonlar i\u00e7in <code>translateZ(0)<\/code> veya <code>will-change<\/code> gibi \u00f6zellikler kullanarak taray\u0131c\u0131n\u0131n GPU&#8217;yu kullanmas\u0131n\u0131 te\u015fvik edin, bu da daha ak\u0131c\u0131 animasyonlar sa\u011flar.<\/p>\n<h4>Taray\u0131c\u0131 Uyumlulu\u011fu (Browser Compatibility)<\/h4>\n<p>T\u00fcm taray\u0131c\u0131lar\u0131n CSS \u00f6zelliklerini ayn\u0131 \u015fekilde yorumlamad\u0131\u011f\u0131n\u0131 unutmay\u0131n. \u00d6zellikle eski taray\u0131c\u0131lar i\u00e7in, <code>vendor prefix<\/code>&#8216;ler (\u00f6rn. <code>-webkit-<\/code>, <code>-moz-<\/code>, <code>-ms-<\/code>) kullanman\u0131z gerekebilir. <code>caniuse.com<\/code> gibi kaynaklar\u0131 kullanarak belirli bir CSS \u00f6zelli\u011finin taray\u0131c\u0131 deste\u011fini kontrol edin. Modern geli\u015ftirme s\u00fcre\u00e7lerinde, <code>Autoprefixer<\/code> gibi ara\u00e7lar bu \u00f6nekleri otomatik olarak ekleyebilir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>HTML <code><\/p>\n<div><\/code> elementi, web tasar\u0131m\u0131n\u0131n \u015fekillendirilmesinde bir tuval g\u00f6revi g\u00f6r\u00fcr. Kendi ba\u015f\u0131na anlams\u0131z olsa da, CSS ile birle\u015fti\u011finde s\u0131n\u0131rs\u0131z tasar\u0131m ve d\u00fczen olanaklar\u0131 sunar. Temel CSS \u00f6zelliklerini (boyutland\u0131rma, kenar bo\u015fluklar\u0131, arka planlar, tipografi) anlamak, <code><\/p>\n<div><\/code>&#8216;leri g\u00f6rsel olarak zenginle\u015ftirmenin ilk ad\u0131m\u0131d\u0131r. Flexbox ve CSS Grid gibi modern d\u00fczen mod\u00fclleri, <code><\/p>\n<div><\/code>&#8216;leri kullanarak karma\u015f\u0131k ve duyarl\u0131 sayfa yap\u0131lar\u0131 olu\u015fturman\u0131n anahtar\u0131d\u0131r. Konumland\u0131rma teknikleri ve medya sorgular\u0131 ise, <code><\/p>\n<div><\/code> tabanl\u0131 tasar\u0131mlar\u0131n farkl\u0131 cihaz ve ekran boyutlar\u0131na uyum sa\u011flamas\u0131n\u0131 garantiler.<\/p>\n<p>Unutulmamal\u0131d\u0131r ki, <code><\/p>\n<div><\/code>&#8216;i kullan\u0131rken anlamsal HTML&#8217;i g\u00f6z ard\u0131 etmemek, temiz ve s\u00fcrd\u00fcr\u00fclebilir bir kod taban\u0131 i\u00e7in kritik \u00f6neme sahiptir. Do\u011fru se\u00e7icileri kullanmak, mant\u0131kl\u0131 s\u0131n\u0131fland\u0131rmalar yapmak ve gereksiz karma\u015f\u0131kl\u0131ktan ka\u00e7\u0131nmak, hem geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131racak hem de ortaya \u00e7\u0131kan \u00fcr\u00fcn\u00fcn kalitesini art\u0131racakt\u0131r. <code><\/p>\n<div><\/code>&#8216;in g\u00fcc\u00fcn\u00fc ve esnekli\u011fini tam olarak kavrayarak, web projelerinizde hem i\u015flevsel hem de estetik a\u00e7\u0131dan etkileyici sonu\u00e7lar elde edebilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber Giri\u015f: Elementinin Temelleri ve \u00d6nemi Web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan HTML elementi, &#8220;division&#8221; kelimesinin k\u0131saltmas\u0131d\u0131r ve web sayfalar\u0131nda i\u00e7erik gruplamak i\u00e7in kullan\u0131lan genel ama\u00e7l\u0131 bir blok seviyesi kapsay\u0131c\u0131d\u0131r.","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":[126],"tags":[],"class_list":{"0":"post-41320","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","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>HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/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:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber Giri\u015f: Elementinin Temelleri ve \u00d6nemi Web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan HTML elementi, &quot;division&quot; kelimesinin k\u0131saltmas\u0131d\u0131r ve web sayfalar\u0131nda i\u00e7erik gruplamak i\u00e7in kullan\u0131lan genel ama\u00e7l\u0131 bir blok seviyesi kapsay\u0131c\u0131d\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-02T14:01:34+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2026-04-02T14:01:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/\"},\"wordCount\":2547,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/\",\"name\":\"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-04-02T14:01:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber\"}]},{\"@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":"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber","og_description":"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber Giri\u015f: Elementinin Temelleri ve \u00d6nemi Web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan HTML elementi, \"division\" kelimesinin k\u0131saltmas\u0131d\u0131r ve web sayfalar\u0131nda i\u00e7erik gruplamak i\u00e7in kullan\u0131lan genel ama\u00e7l\u0131 bir blok seviyesi kapsay\u0131c\u0131d\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-04-02T14:01:34+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber","datePublished":"2026-04-02T14:01:34+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/"},"wordCount":2547,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/","name":"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-04-02T14:01:34+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-elementini-css-ile-sekillendirme-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Elementini CSS ile \u015eekillendirme: Kapsaml\u0131 Bir Rehber"}]},{"@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\/41320","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=41320"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/41320\/revisions"}],"predecessor-version":[{"id":41321,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/41320\/revisions\/41321"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=41320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=41320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=41320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}