programming-1873854_1920

Obecnie strony internetowe cieszą się wielką popularnością, jednak strona internetowa oprócz przekazywania treści powinna też przyciągać uwagę za pomocą wyjątkowej i unikalnej szaty graficznej. Gdy projektujemy szatę graficzną, to z pomocą przychodzi nam CSS.

Co to jest CSS?

Kaskadowe arkusze stylów (Cascading Style Sheets) w skrócie zwane CSS to język który pomaga przy budowie stron opartych na HTML. Powstał on w roku 1996 i obecną jego wersją oraz najpopularniejszą jest CSS3.

Do czego użyjemy języka CSS?

Gdy zrobimy stronę w czystym HTMLu będziemy mieli ograniczone pole manewru, jeżeli chodzi o dostosowanie jej wyglądu do naszych potrzeb. Strona napisana w czystym HTMLU nie będzie też responsywna, czyli nie będzie dopasowana wyglądem oraz wielkością do różnych urządzeń. Jednak tutaj z pomocą przychodzi nam CSS, który wprowadza mnóstwo znaczników które znacznie ułatwią nam stylowanie naszych elementów HTML oraz dostosowanie strony do różnych urządzeń.
Od czego zacząć?

Można powiedzieć że CSS dla zielonych jest bardzo prosty do nauki. Na początek wystarczy nam zwykły dokument w HTML z przygotowanym podstawowym tekstem w znaczniku.
Owszem, czcionkę i kolor możemy zmienić w htmlu, jednak jest dużo wartości których już w nim nie wystylujemy. Poza tym w css pójdzie nam to dużo szybciej. Na początek nauczmy się dodawać CSS wewnątrz pliku HTML, jest to najprostszy sposób aby zrozumieć jego działanie. Pierwsze co musimy zrobić to u góry naszego dokumentu HTML, damy mu znać za pomocą specjalnej komendy że będziemy używać CSS, zrobimy to za pomocą prostego kodu:

<style>

</style>

Wszystkie komendy które będziemy wpisywać w CSS, należy umieścić w środku znacznika <style>.

Kolejną rzeczą którą powinniśmy wiedzieć zanim zaczniemy stalować nasz tekst, jest to jak wygląda podstawowa składnia css, a więc na początku mamy nazwę selektora który będziemy stylować, następnie otwieramy klamry {} po których wpisujemy atrybuty i ich wartości. Wygląda to mniej więcej tak:

Składnia

Selektor{

wartość1: jakaś wartość;

wartość2: jakaś wartość;

}

Pamiętajmy aby każdą wartość zakończyć średnikiem, inaczej nasze stylowanie nie będzie wykonywane prawidłowo. Dodatkowo warto wspomnieć iż css nie pokazuje błędów, dla tego zwracaj uwagę czy wszystko jest napisane poprawnie, czasami przez brak średnika może wyniknąć kilka błędów co jest główną przyczyną złego wyświetlania się stylowania.

Stylujemy nasz pierwszy znacznik HTML

Gdy znamy już podstawy możemy przejść do stylowania naszego tekstu CSS dla zielonych. Tak więc zacznijmy od dodania naszego znacznika p oraz poinformowania HTML że w naszym dokumencie jest stylowanie CSS. Nasz kod powinien wyglądać tak:


<style>


</style>
<p> CSS Dla zielonych</p>

Chcemy aby nasz tekst miał czcionkę o rozmiarze 11px, posiadał kolor zielony..Zacznijmy od dodania selektora p oraz rozmiaru czcionki. Taki rozmiar zmieniamy za pomocą wartości font-size, może być on ustalony w różnych proporcjach, jednak my na początek będziemy używać px,nasz kod powinien wyglądać teraz tak:


<style>

p{

font-size:  11px;

}
</style>
<p> CSS Dla zielonych</p>

Po zapisaniu i otworzeniu strony zmiany powinny być już wprowadzone. Kolejnym krokiem jaki wykonamy jest zmiana koloru na zielony, wykonujemy to za pomocą wartości color. Nasz kod będzie wyglądał wtedy tak:

 


<style>


p{

font-size:  11px;

color:  green;

}



</style>

<p> CSS Dla zielonych</p>

 

Kolor ustalany jest w języku angielskim, listę dostępnych kolorów bez problemu znajdziemy na spisie kolorów w internecie. Bardziej popularne jest zastosowanie koloru w postaci heksadecymalnej, jednak na początku zalecam używać nazw angielskich, aby nie wprowadzać za dużo informacji.

Co dalej?

Jak widać postawiliśmy swoje pierwsze kroki w języku CSS. Teraz spróbuj wystylować swój tekst tak, aby czcionka była większa lub mniejsza, oraz pozmieniać kolor. Nie jest to trudny język do nauki na początku, jednak w późniejszym etapie poznamy trudniejsze zagadnienia, przez które będziemy mogli tworzyć piękne responsywne strony internetowe.