Projekt graficzny strony internetowej - CSS

Div + Div + ... + DIV = Layout strony

DIV to elementy blokowe. Element blokowy to taki, który zajmuje całą szerokość elementu, w którym się znajduje (tzw. rodzica), pod warunkiem, że zostanie wypełniony treścią. Elementy html nie wypełnione treścią nie zostaną wyświetlone wcale, chyba że określimy ich parametry w CSS.
Rodzicem wszystkich elementów wyświetlanych na ekranie jest element BODY, tzn. wszystkie elementy html wyświetlane w przeglądarce są zagnieżdżone w elemencie body. Element body, jeśli nie określimy inaczej, zajmuje szerokość całego okna naszej przeglądarki. Jeśli okno naszej przeglądarki będzie liczyło 1200px, tożsamo szerokość elementu body wyglądać będzie.

Width, czyli o szerokości Jak już wspomnieliśmy o oknie przeglądarki internetowej to wspomnijmy również o tym, że każdy z nas może mieć inną szerokość tego okna. Od czego to zależy? Zależy to od rozdzielczości monitora, na którym pracujemy. Rozdzielczość podawana jest w pikselach w stosunku szerokość na wysokość, czyli np. 1366px na 768px, tzn. że naraz możemy zobaczyć 1366 pikseli wszerz i 768 pikseli wzdłuż. Ważne jest to ze względu na wybór szerokości strony, którą tworzymy. Jeśli ktoś używa monitora o szerokości np. 1200px, a my stworzymy stronę o szerokości 1300px, to żeby zobaczyć te 100px będzie musiał za każdym razem przewijać stronę w bok.

Przykłady wspólne

Przykład 1

Utwórz stronę z jednym div’em o klasie container i przygotuj plik CSS zawierający odpowiednie zapisy.
Rozwiązanie

W pliku CSS:

  .container {}

Jeden krótki paragraf

Przykład 2

Utwórz stronę z jednym div’em o klasie container o długości 300px. Przygotuj plik CSS zawierający odpowiednie zapisy.
Rozwiązanie

W pliku CSS:

  .container {
     width: 300px;
  }

<div class="container">Jeden krótki paragraf</div>

Przykład 3

Utwórz stronę z jednym div’em o klasie container o długości 300px i tle zielonym. Przygotuj plik CSS zawierający odpowiednie zapisy.
Rozwiązanie

W pliku CSS:

   .container {
     width: 300px;
     background-color: green;
  }

<div class="container">Jeden krótki paragraf</div>

Przykład 4

Utwórz stronę z dwiema kolumnami położonymi obok siebie o równych szerokościach. Każdej z nich nadaj kolor tła oraz umieść w nich napis kolumna 1, kolumna 2

 .article {
     width: 400px;
     background-color: #d7d7d7;
  }
 .col-1 {
    float: left;
    width: 50%;
    background-color: #499afa;
    height: 200px;
 }
 .col-2 {
    float: left;
    width: 50%;
    background-color: #fab949;
    height: 200px;
 }

<div class="article">
  <div class="col-1"></div>
  <div class="col-2"></div>
</div>