CSS nedir ve bölümleri nelerdir?

CSS nedir

CSS nedir ve bölümleri nelerdir?

ABONE OL 

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 Nedir?

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>

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>

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>

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.

Google News’ten bize abone olmak için TIKLAYIN.

Teknoloji kategorisindeki haberlerimize ulaşmak için TIKLAYIN.

Görüşlerinizi yorum yaparak bizimle paylaşın.

Daha fazla haber için TwitterInstagram, Telegram ve Youtube hesaplarımızı takip edebilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.