Css background color özelliği.
KODYAZAR HTML CSS PHP C#

CSS FOOTER YAPMA

Hoşgeldin kodyazar. Bu derste web sitelerinde genelde sayfanın en alt kısmında bulunan footer bölümünden yapmayı anlatacağım. Sadece css ile footer alanı yapabilirsiniz. Bu footer alanını sayfanızda kullanabilirsiniz. Daha geliştirebilir, renklendirebilirsiniz. Kendinize özgü hale getirebilirsiniz. Öncelike index.html ve style.css dosyamızı açalım. Daha sonra index.html dosyasına aşağıdaki kodları yazın.

index.html dosyası
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Css ile background color özelliği.</title>
              <link rel="stylesheet" href="style.css">
          </head>
          <body>
          <div id="footer-div">
          <footer>
          <h1>Hello World!</h1>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam rerum assumenda doloremque fugiat? Ex pariatur iusto reprehenderit accusantium, quia deleniti delectus quis facere assumenda, doloribus, necessitatibus modi quas dicta minus.</p>
          </footer>
          <footer>
          <h1>Hello World!</h1>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam rerum assumenda doloremque fugiat? Ex pariatur iusto reprehenderit accusantium, quia deleniti delectus quis facere assumenda, doloribus, necessitatibus modi quas dicta minus.</p>
          </footer>
          <footer>
          <h1>Hello World!</h1>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam rerum assumenda doloremque fugiat? Ex pariatur iusto reprehenderit accusantium, quia deleniti delectus quis facere assumenda, doloribus, necessitatibus modi quas dicta minus.</p>
          </footer>
          </div>
          </body>
          </html>
        
style.css dosyası
/*  Footer */
#footer-div{
    width: 100%;
    height: 300px;
    background-color: #fff;
    float: left;
}
footer{
    width: 33%;
    float: left;
}
footer h1{
    margin-left: 10%;
    margin-right: 10%;
}
footer p{
    color: #000;
}

        

style.css dosyasında, html etiketlerinde bulunan footer etiketini kullandık. Öncelikle #footer-div classıyla genel bir div oluşturduk. 100% genişlik kullandık ve sayfanın genişliğinin tamamen kullanmasını sağladık. 300px uzunluk değeri verdik. Footer etiketi ve içinde bulunan h1(başlık), p(paragraf) etiketi bu genel divde bulunacak. Css dosyasında footer classını çağırıyoruz ve gerekli kodları yazıyoruz. Daha sonra footer classının içinde bulunan h6 ve p etiketini css dosyamızda belirtiyoruz. Bu işlemi footer h6 ve footer p yoluyla yapıyoruz. Footer kodları bu kadar. Siz bu kodları renklendirebilir, boyutlandırabilir daha güzel hale getirebilirsiniz.