\n Modern web siteleri, sadece bilgi aktarmakla kalmaz; ayn\u0131 zamanda estetik, eri\u015filebilirlik ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Peki, bir web sayfas\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, renklerini, yaz\u0131 tiplerini, d\u00fczenini ve hatta etkile\u015fimlerini nas\u0131l belirleriz? \u0130\u015fte tam da bu noktada, web tasar\u0131m\u0131n\u0131n ayr\u0131lmaz bir par\u00e7as\u0131 olan CSS (Cascading Style Sheets) devreye giriyor. Bu makalede, CSS’in ne oldu\u011funu, neden web geli\u015ftirme i\u00e7in vazge\u00e7ilmez bir ara\u00e7 oldu\u011funu ve nas\u0131l ad\u0131m ad\u0131m kullan\u0131laca\u011f\u0131n\u0131 en temelden ileri seviyeye kadar ke\u015ffedece\u011fiz. Web sitelerinize ruh katmaya ve onlar\u0131 benzersiz k\u0131lmaya haz\u0131r m\u0131s\u0131n\u0131z?\n <\/p>\n
\n Her g\u00fcn ziyaret etti\u011fimiz binlerce web sitesi var ve her biri farkl\u0131 bir g\u00f6rsel kimli\u011fe sahip. Kimisi minimalist ve modern, kimisi renkli ve dinamik, kimisi ise kurumsal ve ciddi bir duru\u015f sergiliyor. T\u00fcm bu farkl\u0131l\u0131klar\u0131n ard\u0131nda yatan temel teknoloji, hi\u00e7 \u015f\u00fcphesiz CSS’tir. CSS, web sayfalar\u0131n\u0131z\u0131n yap\u0131sal iskeletini olu\u015fturan HTML elementlerine stil kurallar\u0131 uygulaman\u0131z\u0131 sa\u011flayan g\u00fc\u00e7l\u00fc bir stil dili olarak tan\u0131mlanabilir. Bu sayede, i\u00e7eri\u011finizin nas\u0131l g\u00f6r\u00fcnece\u011fini, nerede konumlanaca\u011f\u0131n\u0131 ve kullan\u0131c\u0131yla nas\u0131l etkile\u015fim kuraca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde kontrol edebilirsiniz.\n <\/p>\n
\n Bir web sitesi in\u015fa ederken, genellikle \u00fc\u00e7 ana teknolojiyi bir arada kullan\u0131r\u0131z: HTML, CSS ve JavaScript. HTML, web sayfas\u0131n\u0131n i\u00e7eri\u011fini ve yap\u0131s\u0131n\u0131 (ba\u015fl\u0131klar, paragraflar, g\u00f6rseller, ba\u011flant\u0131lar vb.) tan\u0131mlar. JavaScript ise bu sayfalara dinamiklik ve interaktivite katarak kullan\u0131c\u0131 eylemlerine tepki vermelerini sa\u011flar. CSS’in rol\u00fc ise, HTML taraf\u0131ndan tan\u0131mlanan bu yap\u0131sal elementlerin g\u00f6rsel sunumunu y\u00f6netmektir. Ba\u015fka bir deyi\u015fle, HTML bir binan\u0131n tu\u011flalar\u0131 ve betonarme yap\u0131s\u0131 gibiyken, CSS bu binan\u0131n i\u00e7 ve d\u0131\u015f cephe boyas\u0131, mobilyalar\u0131, perdeleri ve t\u00fcm dekorasyonudur. JavaScript ise binadaki otomatik kap\u0131lar, asans\u00f6rler ve ak\u0131ll\u0131 ayd\u0131nlatma sistemleri gibi i\u015flevsellikleri ekler. Bu \u00fc\u00e7l\u00fcn\u00fcn uyumlu \u00e7al\u0131\u015fmas\u0131, modern, i\u015flevsel ve estetik a\u00e7\u0131dan \u00e7ekici web siteleri yaratman\u0131n anahtar\u0131d\u0131r.\n <\/p>\n
\n Peki, CSS kullanmak neden bu kadar \u00f6nemlidir? Sadece estetik bir kayg\u0131dan m\u0131 ibaret? Kesinlikle hay\u0131r. CSS, sadece g\u00f6r\u00fcn\u00fcm\u00fc g\u00fczelle\u015ftirmekle kalmaz, ayn\u0131 zamanda web sitelerinin geli\u015ftirme s\u00fcrecini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r, bak\u0131m\u0131n\u0131 basitle\u015ftirir ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6rne\u011fin, bir kurumsal web sitesinde markan\u0131z\u0131n renklerini, fontlar\u0131n\u0131 ve logo kullan\u0131m\u0131n\u0131 tutarl\u0131 bir \u015fekilde uygulamak, marka kimli\u011finizi g\u00fc\u00e7lendirir ve profesyonel bir imaj \u00e7izer. Ayr\u0131ca, duyarl\u0131 tasar\u0131m (responsive design) sayesinde, web sitenizin farkl\u0131 ekran boyutlar\u0131nda (masa\u00fcst\u00fc, tablet, mobil) sorunsuz bir \u015fekilde g\u00f6r\u00fcnt\u00fclenmesini sa\u011flayarak, kullan\u0131c\u0131lar\u0131n\u0131za kesintisiz bir deneyim sunar. T\u00fcm bu nedenler, CSS’i web geli\u015ftirme d\u00fcnyas\u0131n\u0131n temel ta\u015flar\u0131ndan biri haline getirir.
\n <\/aside>\n
\n CSS’i anlaman\u0131n ilk ad\u0131m\u0131, onun temel yap\u0131 ta\u015flar\u0131n\u0131 kavramakt\u0131r: se\u00e7iciler (selectors), \u00f6zellikler (properties) ve de\u011ferler (values). Bu \u00fc\u00e7 bile\u015fen bir araya gelerek, HTML elementlerine hangi stilin uygulanaca\u011f\u0131n\u0131 belirleyen kurallar\u0131 olu\u015fturur. Her bir CSS kural\u0131, bir veya daha fazla se\u00e7ici ile ba\u015flar, ard\u0131ndan k\u00fcme parantezleri i\u00e7inde bir veya daha fazla \u00f6zellik-de\u011fer \u00e7ifti gelir. Bu yap\u0131, web sayfan\u0131zdaki belirli bir \u00f6\u011feyi hedeflemenize ve ona \u00f6zg\u00fc bir stil tan\u0131mlaman\u0131za olanak tan\u0131r.\n <\/p>\n
\n Bir CSS kural\u0131n\u0131n ilk ve en kritik b\u00f6l\u00fcm\u00fc se\u00e7icidir. Se\u00e7ici, stil uygulamak istedi\u011finiz HTML elementini veya element grubunu i\u015faret eder. CSS’te bir\u00e7ok farkl\u0131 se\u00e7ici t\u00fcr\u00fc bulunur ve do\u011fru se\u00e7iciyi kullanmak, kodunuzun hem okunabilirli\u011fini hem de etkinli\u011fini art\u0131r\u0131r. \u0130\u015fte en s\u0131k kullan\u0131lan se\u00e7ici t\u00fcrleri:\n <\/p>\n
class<\/code> \u00f6zniteli\u011fine g\u00f6re stil uygular. Bir s\u0131n\u0131fa birden fazla element sahip olabilir ve bir element birden fazla s\u0131n\u0131fa sahip olabilir. Bu, esnek ve tekrar kullan\u0131labilir stiller olu\u015fturman\u0131n en yayg\u0131n yoludur. S\u0131n\u0131f se\u00e7iciler bir nokta (.) ile ba\u015flar.<\/li>\n- ID Se\u00e7iciler (ID Selectors):<\/strong> Bir HTML elementine uygulanan
id<\/code> \u00f6zniteli\u011fine g\u00f6re stil uygular. Bir ID, bir web sayfas\u0131nda yaln\u0131zca bir kez kullan\u0131lmal\u0131d\u0131r, yani benzersizdir. ID se\u00e7iciler bir diyez (#) i\u015fareti ile ba\u015flar. Genellikle belirli, tekil elementleri hedeflemek i\u00e7in kullan\u0131l\u0131r.<\/li>\n- Nitelik Se\u00e7iciler (Attribute Selectors):<\/strong> Bir HTML elementinin belirli bir niteli\u011fine (\u00f6rne\u011fin,
href<\/code>, type<\/code>, data-*<\/code>) veya nitelik de\u011ferine g\u00f6re stil uygular.<\/li>\n- Pseudo-class Se\u00e7iciler:<\/strong> Bir elementin belirli bir durumuna (\u00f6rne\u011fin, bir ba\u011flant\u0131n\u0131n \u00fczerine gelindi\u011finde
:hover<\/code>, bir input’a odaklan\u0131ld\u0131\u011f\u0131nda :focus<\/code>) g\u00f6re stil uygular.<\/li>\n- Pseudo-element Se\u00e7iciler:<\/strong> Bir elementin belirli bir b\u00f6l\u00fcm\u00fcne (\u00f6rne\u011fin, bir paragraf\u0131n ilk harfi
::first-letter<\/code>, bir elementin \u00f6ncesine veya sonras\u0131na i\u00e7erik eklemek i\u00e7in ::before<\/code>, ::after<\/code>) stil uygular.<\/li>\n<\/ul>\n\n A\u015fa\u011f\u0131daki kod blo\u011fu, farkl\u0131 se\u00e7ici t\u00fcrlerinin nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair basit \u00f6rnekler sunmaktad\u0131r:\n <\/p>\n
\n\/* Element Se\u00e7ici *\/\np {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n}\n\n\/* S\u0131n\u0131f Se\u00e7ici *\/\n.highlight {\n background-color: yellow;\n color: black;\n}\n\n\/* ID Se\u00e7ici *\/\n#main-header {\n color: navy;\n text-align: center;\n}\n\n\/* Nitelik Se\u00e7ici (type=\"text\" olan t\u00fcm input'lara) *\/\ninput[type=\"text\"] {\n border: 1px solid #ccc;\n padding: 8px;\n}\n\n\/* Pseudo-class Se\u00e7ici (ba\u011flant\u0131ya fare geldi\u011finde) *\/\na:hover {\n color: red;\n text-decoration: underline;\n}\n\n\/* Pseudo-element Se\u00e7ici (paragraf\u0131n ilk sat\u0131r\u0131) *\/\np::first-line {\n font-weight: bold;\n}\n <\/pre>\n<\/code><\/p>\n
\u00d6zellikler ve De\u011ferler: HTML Elementlerine G\u00f6rsel Kimlik Kazand\u0131rmak<\/h3>\n
\n Se\u00e7icilerle hedefledi\u011fimiz elementlere uygulamak istedi\u011fimiz stil de\u011fi\u015fikliklerini \u00f6zellikler ve de\u011ferler arac\u0131l\u0131\u011f\u0131yla belirtiriz. Bir \u00f6zellik, de\u011fi\u015ftirilecek g\u00f6rsel niteli\u011fi (\u00f6rne\u011fin, color<\/code>, font-size<\/code>, margin<\/code>, background-color<\/code>) temsil ederken, bir de\u011fer bu \u00f6zelli\u011fin nas\u0131l ayarlanaca\u011f\u0131n\u0131 (\u00f6rne\u011fin, red<\/code>, 16px<\/code>, 20px<\/code>, #f0f0f0<\/code>) tan\u0131mlar.\n <\/p>\n\n Her \u00f6zellik, belirli bir dizi ge\u00e7erli de\u011fere sahiptir. \u00d6rne\u011fin, color<\/code> \u00f6zelli\u011fi renk adlar\u0131 (red<\/code>, blue<\/code>), RGB, HEX veya HSL kodlar\u0131 (#FF0000<\/code>, rgb(255,0,0)<\/code>) gibi de\u011ferler alabilir. font-size<\/code> \u00f6zelli\u011fi piksel (px<\/code>), em (em<\/code>), rem (rem<\/code>), y\u00fczde (%<\/code>) gibi birimlerle ifade edilebilir. Bu \u00f6zellik-de\u011fer \u00e7iftleri, HTML elementlerinize tam olarak istedi\u011finiz g\u00f6rsel g\u00f6r\u00fcn\u00fcm\u00fc kazand\u0131rman\u0131z\u0131 sa\u011flar.\n <\/p>\n\n\/* \u00d6rnek bir CSS kural\u0131 *\/\nh1 { \/* Se\u00e7ici: T\u00fcm h1 ba\u015fl\u0131klar\u0131n\u0131 hedefle *\/\n color: #333; \/* \u00d6zellik: color, De\u011fer: #333 (koyu gri) *\/\n font-size: 2.5em; \/* \u00d6zellik: font-size, De\u011fer: 2.5em *\/\n margin-bottom: 20px; \/* \u00d6zellik: margin-bottom, De\u011fer: 20px *\/\n}\n <\/pre>\n<\/code><\/p>\n
\n Bu temel yap\u0131 ta\u015flar\u0131n\u0131 do\u011fru bir \u015fekilde birle\u015ftirmeyi \u00f6\u011frendi\u011finizde, web sayfalar\u0131n\u0131zdaki her bir elementi hassas bir \u015fekilde kontrol edebilir ve profesyonel g\u00f6r\u00fcn\u00fcml\u00fc tasar\u0131mlar olu\u015fturabilirsiniz. Se\u00e7icilerin g\u00fcc\u00fcn\u00fc anlamak ve farkl\u0131 \u00f6zellik-de\u011fer kombinasyonlar\u0131n\u0131 denemek, CSS ustal\u0131\u011f\u0131na giden yolun ilk ad\u0131m\u0131d\u0131r.\n <\/p>\n
CSS ile Web Sayfalar\u0131n\u0131 Stilleme Ad\u0131m Ad\u0131m: Uygulamal\u0131 Bir Rehber<\/h2>\n
\n CSS'in temel kavramlar\u0131n\u0131 anlad\u0131ktan sonra, s\u0131ra bu bilgileri ger\u00e7ek d\u00fcnya senaryolar\u0131nda uygulamaya gelir. Bir web sayfas\u0131na CSS stil kurallar\u0131n\u0131 \u00fc\u00e7 farkl\u0131 yolla dahil edebiliriz: inline stil, dahili stil (internal) ve harici stil (external). Bu y\u00f6ntemlerin her birinin kendine g\u00f6re avantajlar\u0131 ve kullan\u0131m durumlar\u0131 vard\u0131r. Ayr\u0131ca, CSS'in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve birbiriyle \u00e7eli\u015fen kurallar\u0131n nas\u0131l \u00e7\u00f6z\u00fcld\u00fc\u011f\u00fcn\u00fc anlamak i\u00e7in \u00f6zg\u00fcll\u00fck (specificity) kavram\u0131 da b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.\n <\/p>\n
CSS'i HTML Sayfalar\u0131na Nas\u0131l Dahil Ederiz?<\/h3>\n\n- \n Inline Stil (Sat\u0131r \u0130\u00e7i Stil):<\/strong> Do\u011frudan HTML elementinin
style<\/code> \u00f6zniteli\u011fi i\u00e7ine yaz\u0131l\u0131r. En y\u00fcksek \u00f6zg\u00fcll\u00fc\u011fe sahiptir ancak esneklik ve yeniden kullan\u0131labilirlik a\u00e7\u0131s\u0131ndan zay\u0131ft\u0131r. Genellikle sadece \u00e7ok \u00f6zel, tek seferlik de\u011fi\u015fiklikler i\u00e7in kullan\u0131l\u0131r.<\/p>\n\nBu paragraf inline stil ile bi\u00e7imlendirilmi\u015ftir.<\/p>\n <\/pre>\n
<\/code>\n <\/li>\n
- \n Dahili Stil (Internal Style Sheet):<\/strong> HTML belgesinin
<\/code> b\u00f6l\u00fcm\u00fcne <\/p>\n