CSS Giriş, CSS Nedir? (Videolu)


CSS (Cascading Style Sheets) stil kullanmamız için oluşturulmuş bir teknolojidir. Web sayfalarına görsel bir tasarım eklememizi sağlar.

HTML’ in eski sürümlerinde web sayfalarını görselleştirebilmek için tek tek element özellikleri giriliyordu. HTML 4 ile birlikte CSS teknolojisi piyasaya sürüldü. Böylece yüzlerce sayfalık web projelerini bile tek bir stil sayfası ile şekillendirebiliyoruz.

Youtube

Dailymotion

CSS Giriş, CSS Nedir? ile bilgiuscom
Vimeo

İzlesene

css giriş, css nedir? | izlesene.com

CSS SÖZ DİZİMİ

CSS yazarken Selector ve Declarations şeklinde iki temel yapıdan oluşur.

Selector Stil uygulayacağımız elementi belirtir.

Declarations: Stil vereceğimiz elemente ait özelliklerin olduğu kısmı gösterir.

h1                              —–> SELECTOR
{
color : red ;                               Bu kısım DECLARATİONS  (İki parantez arasındaki kodlar)
text-align : center ;
}

color :     red ;
özellik     değer

h1 etiketinin color özelliğine red değeri verilmiş.

 

AÇIKLAMA SATIRLARI

/* ve */ arasında gösterilir.

h1

{
/* açıklama satırı */
color : red ;
text-align : center ;
}

color : red ;
özellik değer

SELECTOR

Selector iki şekilde gösterilir:

ID: Tek bir elemente stil uygulanacak isek kullanır.

Class: Bir grup elemente stil uygulanacak ise kullanılır.

ID Selector

Element tanımında id=”still” tarzında bir ifade kullanılması gerekir. ID tanımlarken # karakteri kullanılır.

#stil1
{
color:red;
text-align:center;
}

<h1 id = “stil1” > </h1>

CLASS Selector

Element tanımında class=”still” tarzında bir ifade kullanılması gerekir. ID tanımlarken .  karakteri kullanılır.

.stil1
{
color:red;
text-align:center;
}

<h1 class = “stil1” > </h1>

 CSS NASIL UYGULANIR?

Bir HTML sayfasına üç biçimde CSS uygulanır.

External CSS  — harici

Internal CSS   — dahili

Inline CSS

External CSS

Harici bir CSS dosyası oluşturulur.  CSS dosyanın uzantısı .css olmak zorundadır. HTML sayfamızın <head> bölümünde yer alır. <link> ifadesi ile HREF özelliğiyle CSS dosyasını belirteceğiz.

CSS DOSYASI

.stil1
{
color : blue ;
text-align : center ;
}
———————————

HTML DOSYASI

<head>

<link rel = “stylesheet” type = “text/css”href = “stil.css”>

</head>

<body>

<p class = “still”> Stil uygulanmış paragraf </p>

</body>

INTERNAL CSS

Harici bir dosya kullanmadan HTML sayfamız içerisinde stil tanımlaması yapıyoruz. <head> etiketleri içerisinde bulunuyor, <style> etiketi ile tanımlanır.

<head>

<style type=”text/css”>

.stil1

{
color : blue ;
text-align : center ;
}

</style>

</head>

<body>

<p class = “stil1”> stil uygulanmış paragraf </p>

</body>

 

INLINE CSS

Element etiketi içerisinde stil tanımlaması yapılır. style özelliğiyle gösterilir.

<p style = “color : blue ; text-align : center “> </p>

Author: Ali Göksel Bektaş

Simenty kurucu ortağı. Küçüklüğünden beri website yapan Ali bulunduğu web sektöründe 10 yıldan fazla tecrübesı vardır. Bisiklet sürmeyi, kek yemeyi ve rahat koltukları sever.

2 thoughts on “CSS Giriş, CSS Nedir? (Videolu)”

  1. çok güzel anlatmışsız çok yardımcı oldunuz sayenizde konuyu anladım emeginize saglık.:)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.