CSS nedir ve bölümleri nelerdir?

 CSS nedir ve bölümleri nelerdir?

CSS nedir? Ve bölümleri öncelikle css (Cascading Style Sheets) nedir onu öğrenelim.

CSS, temelde web sitenizdeki html elementlerinin renk, boyut, yazı karakteri gibi her türlü görsel özelliklerini değiştirmenizi sağlar.

CSS’e giriş

Css 3’e ayrılır. Bunlar genel css, harici css ve yerel css olarak sıralanıyor.

Genel CSS

bu şekilde yazılacaksa html sayfasının <head></head> bölümüne yazılır.

Örnek

<html>
<head>
<style type = “text/css”>
h3{color:red;
font-size:16px;}
</style>
</head>
<body>
<h1 style = “color:red;”></h1>
<h1>BAŞLIK VE BAŞLIK 2</h1>
<h1>BAŞLIK VE BAŞLIK 3</h1>
<h1>BAŞLIK VE BAŞLIK 4</h1>
<h1>BAŞLIK VE BAŞLIK 5</h1>
<h3>BAŞLIK VE BAŞLIK 5</h3>
</body>
</html>

Çıktı

Harici CSS

harici bir CSS dosyasında yaptığınız değişiklikler web sitenize global olarak yansıtılacaktır. Harici bir CSS dosyasına bir bağlantı, yine sayfanın <head> bölümüne yerleştirilir.

Örnek

harici açılan css kodları;

h2{color:pink; font-size:30px; text-align:justify;}
.sinif{color:pink; font-size:30px; text-align:right;}
.arka{background-color:green;}

html kodları;

<html>
<head>
<style type = “text/css”>
.yazi{color:red; font-size:20px; text-align:right;}
#jhonnybravo{color:Blue; font-size:50px; text-align:center;}
</style>
<link href=”harici.css” rel=”stylesheet” type=”text/css”>
</head>

<body >
<h1 class = “sinif”>BAŞLIK VE BAŞLIK 1</h1>
<h1>BAŞLIK VE BAŞLIK 2</h1>
<h3 class = “yazi”>BAŞLIK VE BAŞLIK 3</h1>
<span style = “color:blue;”><h1>BAŞLIK VE BAŞLIK 4</h1></span>
<h2>BAŞLIK VE BAŞLIK 5</h2>
<h3 id=”jhonnybravo”>BAŞLIK VE BAŞLIK 5</h3>
</body>
</html>

Çıktı

Yerel CSS

Yerel CSS, belirli bir HTML etiketi için kullanılır. <style> parametresi ile belirli bir HTML etiketini stillemek için kullanılır.

Örnek

html kodları;

<html>
<head>
<style type = “text/css”>
.yazi{color:red; font-size:20px; text-align:right;}
#baslik5{color:Blue; font-size:50px; text-align:center;}
h2{color:pink; font-size:30px; text-align:justify;}
.sinif{color:pink; font-size:30px; text-align:right;}
body{background-color:green;}
</style>
</head>
<body >
<h1 class = “sinif”>BAŞLIK VE BAŞLIK 1</h1>
<h1>BAŞLIK VE BAŞLIK 2</h1>
<h3 class = “yazi”>BAŞLIK VE BAŞLIK 3</h1>
<span style = “color:blue;”><h1>BAŞLIK VE BAŞLIK 4</h1></span>
<h2>BAŞLIK VE BAŞLIK 5</h2>
<h3 id=”baslik5″>BAŞLIK VE BAŞLIK 5</h3>
</body>
</html>

Çıktı

Bugün CSS’in bölümleri ve css nedir? başlıklı yazımızı paylaştık bir dahaki yazımızda html e başlangıç yapacağız.

Dipnot: Bu kodları kullanarak aynı çıktıları alabilirsiniz. Bu kodları çalıştırmak için not defteri yada notepad++‘ı kullanabilirsiniz.

İlginizi Çekebilir

Epic Games’ten güzel haber: 2 oyun ücretsiz

Türk Telekom üçüncü çeyrek sonuçlarını açıkladı

Azerbaycan Blockchain tabanlı kimliğe geçiyor

Gökhan Kaya

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir