WD 003 – CSS Temel Seviye – Muhammet Esat BÜYÜKBULUT

Table of Contents

CSS Nedir?

CSS, HTML dosyalırımızın stilini belirlemek için kullandığımız stil şablonlarıdır.

Faydalı Kaynaklar

CSS Nasıl Eklenir?

HTML dosyamıza CSS eklememizin üç yolu bulunmaktadır:

External CSS : Dışardan b
Internal CSS : head etiketinin içinde style etiketiyle tanımlanır.
Inline CSS : html element’inin içinde style attribute’ü ile tanımlanır.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- external css -->
    <link rel="stylesheet" href="css/style0.css"> 
    
    <!-- internal css-->
    <style> 
        p{
            color:olive;
        }
    </style>
</head>
<body>
    <!-- inline css -->
    <h1 style="color :blue;">Merhaba</h1>
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti minus, quaerat iure esse sint dignissimos enim. Molestias asperiores aut, ratione earum optio cupiditate labore, vitae nisi ad velit recusandae. Illum?</p>
    
    <h2>Dünya</h2>
</body>
</html>

Selectors

Uygulanacak stil kurallarının hangi elemanlara etki edeceğini seçiyoruz:

https://www.w3schools.com/cssref/css_selectors.php

h2{
    color:red;
}


h1{} /* sadece h1 */
p{}  /* sadece p */
h1, p{} /* h1 veya p */


#logo{} /* id = logo */
.info{} /* class = info */
#logo, .info{ } /* id veya info*/
#logo.info{} /* id ve info*/


ul li a {}
/* 
<ul>
    <li>
        <a>
*/


.info span{}
/* 
<bla class=info>
    <span>
*/


.info .primary{}
/* 
<bla class=info>
    <sla class=primary>
*/

*{} /* tüm elemanlar */

CSS Specificity

Aynı elemanı tanımlayan birden fazla css kuralı varsa hangisinin geçerli olacağını belirtir.

Priority	Example	Description
Inline style	<h1 style=”color: pink;”>	Highest priority, directly applied with the style attribute
Id selectors	#navbar	Second highest priority, identified by the unique id attribute of an element
Classes and pseudo-classes	.test, :hover	Third highest priority, targeted using class names
Attributes	[type=”text”]	Low priority, applies to attributes
Elements and pseudo-elements	h1, ::before, ::after	Lowest priority, applies to HTML elements and pseudo-elements

Daha fazla kural için:

Colors

p{
    color:tomato;
    color:dodgerblue;

    color:rgb(255,120,120);
    color: rgba(120,210,141,200);
    opacity: 0.6;

    color: #fff;
    color: #ff1133ff;
}

Borders & Radius


#rounded_corner{
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

WD 003 – CSS Temel Seviye