Aplikacje webowe5 min Czytania

😎 Podstawy CSS

Jeśli chcesz stworzyć aplikację internetową, która będzie wyglądała estetycznie i przyciągnie uwagę użytkowników, musisz nauczyć się podstaw CSS. ✨

Co to jest CSS?

CSS to kaskadowe arkusze stylów (ang. Cascading Style Sheets), czyli język służący do opisu wyglądu dokumentów HTML. Pozwala na dodanie kolorów, czcionek, marginesów, wyrównania i innych elementów wizualnych do Twojej strony internetowej.

1. Podłączenie CSS do dokumentu HTML

Aby użyć CSS, należy go podłączyć do dokumentu HTML. Można to zrobić na kilka sposobów:

W sekcji <head> dokumentu HTML dodać tag <style> z kodem CSS:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tytuł strony</title>
    <style>
        /* tutaj dodajemy kod CSS */
    </style>
</head>
<body>
    <!-- Treść strony -->
</body>
</html>

W sekcji <head> dokumentu HTML dodać link do zewnętrznego pliku CSS:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tytuł strony</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Treść strony -->
</body>
</html>

W tym przypadku plik z kodem CSS powinien znajdować się w tym samym katalogu co plik HTML.

Dodać styl bezpośrednio do elementu HTML:

<p style="color: red;">Tekst na czerwono</p>

Jest to jednak mniej zalecane rozwiązanie i powinno być stosowane tylko w sytuacjach wyjątkowych.

2. Selektory

Selektory służą do wybierania elementów HTML, do których chcemy zastosować style CSS. Najprostszym selektorem jest nazwa elementu, np. p dla paragrafów, h1 dla nagłówków pierwszego poziomu itp. Można także wybierać elementy po klasie (<div class="nazwa-klasy">) lub po identyfikatorze (<div id="identyfikator">). Selektor klasy zaczyna się od kropki ., a identyfikator zaczyna się od znaku #.

Przykłady selektorów:

/* selektor elementu */
p {
    font-size: 16px;
    color: #333;
}

/* selektor klasy */
.nazwa-klasy {
    background-color: #f7f7f7;
    padding: 10px;
}

/* selektor identyfikatora */
#identyfikator {
    border:1px solid blue;
    margin: 10px;
}

3. Właściwości CSS

Właściwości CSS określają, jakie style mają być zastosowane do wybranych elementów HTML. Poniżej przedstawiamy kilka najważniejszych właściwości CSS:

color — kolor tekstu.
background-color — kolor tła.
font-size — wielkość czcionki.
font-family — rodzaj czcionki.
text-align — wyrównanie tekstu.
padding — odstęp wewnętrzny elementu.
margin — odstęp zewnętrzny elementu.
border — obramowanie elementu.

Przykład zastosowania właściwości CSS:

p {
    color: #333;
    font-size: 16px;
    font-family: Arial, sans-serif;
    text-align: justify;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
}

4. Przydatne linki

Jeśli chcesz nauczyć się więcej o CSS, to warto skorzystać z różnych źródeł. Poniżej przedstawiamy kilka przydatnych linków:

CSS dla początkujących — kurs CSS na stronie W3Schools.
CSS Cheat Sheet — ściąga z najważniejszymi właściwościami CSS.
CSS Validator — narzędzie do sprawdzania poprawności kodu CSS.
CSS-Tricks — blog poświęcony CSS.

To tylko kilka z wielu źródeł, które mogą Ci pomóc w nauce CSS. Pamiętaj, że najważniejsze jest regularne ćwiczenie i eksperymentowanie z kodem.

Podsumowanie

CSS to nieodłączny element tworzenia stron internetowych. Dzięki niemu można nadać stronie atrakcyjny wygląd i dostosować ją do różnych urządzeń. W artykule przedstawiliśmy podstawowe pojęcia i składnię CSS, ale to dopiero początek drogi do opanowania języka stylowania stron internetowych. Z czasem warto poszerzać swoją wiedzę i umiejętności w tym zakresie.

Powodzenia! 💪🏻