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 Twitter, Instagram, Telegram ve Youtube hesaplarımızı takip edebilirsiniz.
