VGH: Jak edytować styl na vgh #1 - wstęp

Jak zapowiadałam wcześniej, uruchamiam cykl postów, za pomocą których wyjaśnię jak edytować styl na stronach zakładanych na vgh.pl. Jeszcze na wstępie chcę zaznaczyć, że poradnik będzie bardzo, ale to bardzo łopatologiczny. Głównie jest on skierowany dla osób, które w ogóle nie mają pojęcia jak tzw. ugryźć to CSS, bądź jest to dla nich czarna magia. Postaram się wytłumaczyć wszystko krok po kroku, jak dziecku które chce się nauczyć liczyć od 1 do 10. 

Przypominam, że pierwszy poradnik na temat edycji  stylu został stworzony przez Kei92 i możecie go znaleźć na w.org - tutaj.

W części pierwszej dowiesz się czym jest CSS, jak umieścić kod na swojej stronie, poznasz słownictwo stosowane przy CSS, jak wygląda struktura oraz zasadnicze elementy kodu.

Co to jest CSS?
CSS czyli "Kaskadowy Arkusz Stylu" inaczej nazywany "style" to język służący do formatowania treści strony www, czyli elementów utworzonych w HTML. Nawiązując do jakiejś metafory, która mogłaby to bardziej zobrazować, to sam HTML można porównać do szkieletu człowieka, zaś CSS do reszty wyglądu człowieka m.in. koloru skóry, oczu, włosów itd... Cóż mam nadzieje, że takie porównanie lepiej może przybliżyć czym jest dokładnie CSS.

Jak umieścić kod na stronie?

Arkusz stylu jest zamieszczony w sekcji head strony. Plik ma rozszerzenie .css. Aby zobaczyć cały arkusz, stań gdziekolwiek kursorem na stronie, a następnie kliknij prawy przycisk myszy, a potem pokaż źródło. Od góry odszukaj pliku z rozszerzeniem .css. Dokument, który otworzyłeś jest arkuszem stylu twojej strony.
Ponieważ na vgh.pl nie ma dostępu do FTP, więc nie możemy zmienić tego arkusza, a jedynie nadpisać kod.
Aby wprowadzić zmiany w wyglądzie swojej strony kod CSS musisz umieścić w jednym z paneli. Najlepiej gdy cały kod jest umieszczony w lewym panelu, jak najwyżej. Na stronach z oprogramowaniem php-fusion, jako pierwsze wczytują się panele lewe, potem środkowe, a na koniec panele prawe. Aby dodać nowy panel to wejdź w Panel administracyjny -> Zarządzanie stroną -> Zarządzanie panelami -> Dodaj nowy panel.

Kod CSS musi być umieszczony w tagi otwierające i zamykające arkusz. Wygląda to następująco:

<style type="text/css">

</style>

Pomiędzy tagi style, będzie umieszczony kod CSS.

Struktura kodu
Kod CSS składa się z: selektorów, atrybutów, wartości oraz znaków interpunkcyjnych m.in: nawiasów klamrowych, dwukropków i średników.

Selektorami mogą być np.: a, p, b, table, tr, td, div, .nazwa, #nazwa itd. (lista selektorów w kolejnym poście), czyli odwołujemy się do elementów HTML.
Atrybutami mogą być np.: font-size, color, font-family, font-weight itd., czyli są to własności które formatujemy - wielkość czcionki, kolor tekstu, rodzaj czcionki, pogrubienie czcionki, itp...
Wartość określa dokładną wartość atrybutu, np. 10px, #ff0000, Arial, bold itd. Wartości oczywiście przynależą do swoich atrybutów i jeżeli zmieniamy kolor selektora, to dla color zastosujemy wartość koloru wyrażoną w systemie HEX (#ff0000) lub RGB (rgb(255, 0, 0)), a np. nie wstawimy wartości Arial, która określa rodzaj czcionki.

Przykład w którym zmienimy kolor selektora p:

HTML:
<p>Jakiś tekst</p>

CSS:
<style type="text/css">
p     {
color:#ff0000
}
</style>

Efekt:
Jakiś tekst

Jeśli dodajemy więcej atrybutów, to kod CSS będzie wyglądał następująco:

Przykład w którym dodatkowo powiększymy czcionkę i rodzaj czcionki selektora p:

HTML:
<p>Jakiś tekst</p>

CSS:
<style type="text/css">
p     {
color: #ff0000;
font-size: 20px;
font-family: Impact
}
</style>

Efekt:
Jakiś tekst

Ważne: pamiętaj aby zwrócić uwagę na znaki interpunkcyjne, gdyż zgubienie nawet dwukropka w kodzie, może spowodować nie wyświetlenie pożądanego efektu.

Podsumowanie
Z tego krótkiego wstępu powinieneś wiedzieć co to jest CSS, style, jak otworzyć plik .css, jak i gdzie dodać swój kod CSS, czym jest selektor, atrybut, wartość.

Kolejna część
W następnym poście omówię rodzaje selektorów oraz przedstawię listę wszystkich selektorów występujących w arkuszu .css na vgh wraz z opisem, za co dany selektor jest odpowiedzialny.

Prośba [!!!]
Od 3. części poradnika, będziemy uczyć się edycji stylu na przygotowanej przeze mnie stylizacji. Jak na razie jeszcze nie mam na nią pomysłu. Prawdopodobnie zrobię coś w rodzaju magazynu, ogólnego i chciałabym się dowiedzieć jaką chcielibyście kolorystykę? Coś ciemnego, jasnego? Wrzucajcie linki do screenów. To mi ułatwi pracę :)