HTML/CSS, Poradniki webdevelopera

Czym jest CSS?

0

CSS, czyli kaskadowe arkusze stylów (od ang. Cascading Style Sheets) to język służący do oscylowania serwisów internetowych. Tak jak HTML służy do określenia struktury strony, tak CSS służy do określenia układu elementów, typu czcionek, kolorów, rozmiarów elementów.

Standardy CSS są utrzymywane przez konsorcjum World Wide Web Consortium (W3C), który zapewnia narzędzia do walidacji (weryfikacji poprawności) kodu: https://validator.w3.org/

Przekładając na nasze

Przekładając z polskiego na nasze to, CSS to nic innego jak język służący do nadawania tagom HTML ich charakterystycznego wyglądu. Przedstawimy przykład, który powinien rozjaśnić całą idee tego języka:

Założenia przykładu:
Chcemy utworzyć kontener o wielkości 300px x 150px, który będzie czerwony, w środku ma się znajdować napis „Witaj CSS”

Struktura HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
 <title>Zadanie CSS</title>
</head>
<body>
 <div class="kontenercss">
  <p>Witaj CSS</p>
 </div>
</body>
</html>

Strukturę, można skopiować i zapisać do pliku z rozszerzeniem .html np. index.html
Gdy otworzymy plik zobaczymy w widoku tylko goły tekst „Witaj CSS”.

Tak jak opisywaliśmy wyżej, HTML to tylko struktura, za wygląd będzie odpowiadał kod CSS. Na potrzeby artykułu całe oscylowanie dodamy w znacznikach <style></style> w sekcji <head></head>.

Uwaga! Znacznie lepszym rozwiązaniem jest podłączyć zewnętrzny plik .css – jeżeli chcesz się dowiedzieć jak to zrobić, zapraszamy do zapoznania się z naszym artykułem: Jak dodać css do HTML?

W sekcji <head></head>, dodajemy nasze oscylowanie:

<!DOCTYPE HTML>
<html lang="pl">
<head>
 <title>Zadanie CSS</title>
 <style>
 .kontenercss{
 max-width:200px;
 padding:50px; 
 text-align:center;
 background:red;
 }
 </style>
</head>
<body>
 <div class="kontenercss">
  <p>Witaj CSS</p>
 </div>
</body>
</html>

Jak widzimy to CSS odpowiada za wygląd naszej strony – poniżej dołączamy efekty naszej pracy:

Efekt pracy css

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *