Wprowadzenie do CSS

CSS (Cascading style sheets) czyli kaskadowe arkusze stylów to narzędzie, które pozwala nam widzieć Internet piękniejszym. To właśnie ono daje kolory Internetowi, dlatego warto jest się z nim zapoznać.

Co to jest CSS. Podział arkuszy.

CSS, to język stosowany do opisu prezentacji dokumentów HTML oraz XML. Pozwala na kontrolę wyglądu i układu elementów na stronie internetowej, definiując m.in. kolory, czcionki, odstępy i pozycje elementów. CSS zapewnia oddzielenie treści strony od jej formy, co ułatwia zarządzanie i zmiany w wyglądzie witryny. Arkusze stylów dzielą się na: wewnętrzne arkusze stylów, znajdujące się w atrybucie style="" w znacznikach, osadzone arkusze stylów znajdują się w znaczniku <style> w części dokumentu head oraz zewnętrze arkusze stylów znajdujące się w osobnym pliku .css, aby dołączyć go do pliku html musimy użyć znacznika <link> tak ,jak w kodzie poniżej:

<link rel="stylesheet" type="text/css" href="ścieżka/do/pliku/css" />

Jak działa CSS

CSS składa się z selektora - czyli elementu wskazującego daną część elementu html, może to być nazwa znacznika np. a, code itp. albo nazwa klasy .class czy id #id. Są też inne metody wskazywania elementów, aby się o nich dowiedzieć odwiedź ten artykuł. następnie znajdują się nawiasy klamrowe i w śroku nawiasów właściwość: wartosć; W pliku wygląda to tak:

.class {
  width:20px;
}
#id{
height: 20px;
}

Właściwość width - określa szerokość elementów należących do klasy class na 20px, a height określa wysokość elementu z id id na 20px

Podstawowe właściwości CSS

Pokażmy je na przykładzie. Tu mamy potrzebny html:

<a href="#">Przykład</a>

A tu potrzebny css.

a{
  color:red;
  font-size:2rem;
  font-family:Arial;
  background-color:black;
  margin: 10px;
  padding:5px;
  border: 2px dotted blue;
  width: 50px;
  height: 30px;
  display: block;
}

A wygląda to tak:

Aby dowiedzieć się więcej o znacznikach, kliknij we właściwość w kodzie powyżej, tu omówimy podstawy: color: Określa kolor tekstu.
font-size: Ustawia rozmiar czcionki.
font-family: Definiuje rodzaj czcionki.
background-color: Ustawia kolor tła elementu.
margin: Określa marginesy wokół elementu.
padding: Określa wewnętrzne odstępy wokół zawartości elementu.
border: Tworzy obramowanie wokół elementu.
width: Określa szerokość elementu.
height: Ustawia wysokość elementu.
display: Kontroluje sposób wyświetlania elementu w dokumencie.