CSS Dili ile Çalışmanın Temelleri

HTML dilinin temel etiketlerini zaten inceledik ve şimdi güzelleştirme zamanı geldi. Metnin rengini, boyutunu, arka planını ve daha birçok şeyi değiştirme imkanımız olsun isteriz. Bu, CSS dili kullanılarak yapılır.

Genellikle CSS komutları (stiller), web sitemizdeki tüm HTML sayfalarına özel bir etiketle bağlanan ayrı bir dosyada saklanır.

Bu yaklaşımın avantajı, bir tane CSS dosyası olmasına rağmen herhangi bir sayıda, hatta binlerce HTML dosyası olabilmesidir. CSS dosyasında bir yerde, örneğin tüm paragrafları kırmızı renge boyayacak bir değişiklik yaparsak, bu değişiklikler CSS dosyamızın bağlı olduğu bin HTML sayfasının tamamında uygulanacaktır. Çok kullanışlı ve hızlı.

Stil dosyasının uzantısı .css olmalıdır. Böyle bir dosyayı bir HTML sayfasına bağlamak için, head etiketine şu yapı yazılmalıdır:

<link rel="stylesheet" href="fileName.css">

Aşağıdaki örnekte, HTML dosyamıza styles.css dosyası bağlanmaktadır:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<p>
			This is a paragraph with text.
		</p>
	</body>
</html>

Tüm sayfalarınıza bağlanan bir styles.css dosyası oluşturun.