Podstawy CSSa [KONKURS]

By 5 lutego 2015Inspiracje, Wydarzenia
Wpis-Header-35

Dzisiejszy wpis jest uzupełnieniem podstaw HTMLa, które umieściliśmy jakiś czas temu na naszym blogu. Warto doczytać go do końca, bo mamy w nim dla Was konkurs.

Lekcja

Jeśli chcecie sprawdzić naszą lekcje HTMLa, to dostępna jest ona tutaj. Dziś pora na CSSa.

CSS (ang. Cascading Style Sheet) czyli kaskadowe arkusze stylów  to język służący do opisu prezentacji treści na stronach WWW. Arkusz stylów to nic innego jak lista wytycznych, która mówi nam jak dane treści mają być wyświetlane na stronie internetowej. W ten sposób możemy określić wielkość, krój, kolor czcionek, marginesy, odstępy między wierszami, kolor tła, czy w końcu pozycję na stronie. CSS daje nam znacznie więcej możliwości niż HTML czy XML.

Uwaga, ważne! Poniższy wpis nie jest w żad­nym wypadku kursem tworzenia stron WWW, czy nawet pisa­nia w CSSie. Chcemy jedynie, byś zrozu­mi­ała kon­cepcje języka, potrafiła sko­rzys­tać z bardzo pod­sta­wowego for­ma­towa­nia i ori­en­towała się co jest czym w kodzie CSSa. Ta wiedza może okazać się przy­datna również gdy tworzysz swo­jego bloga na Word­Pressie i cza­sem siada Ci formatowanie.

Głównym założeniem CSSa jest odseparowanie struktury dokumentu od formy prezentacji, a mówiąc bardziej po ludzku by zwiększyć czytelność kodu i ułatwić nam życie. Wyobraźmy sobie, że nie korzystam z platformy WordPress do tworzenia bloga, a piszę je sama dodając po prostu kolejne podstrony. Bez CSSa, każdemu nagłówkowi w tym wpisie musiałabym za pomocą HTMLa określać rozmiar, kolor, krój czcionki czy odstęp od reszty tekstu. I musiałabym robić to nie tylko zawsze w ramach całego wpisu, ale też w ramach każdego z wpisów. Brzmi jak kupa roboty, prawda? Co więcej łatwo wtedy o pomyłkę. CSS wyciąga to formatowanie do swojego pliku, a my tworząc stronę korzystamy z tagów odpowiadających odpowiedniemu formatowaniu.

Model kaskadowy

Pewnie zastanawiacie się, czemu kaskadowe arkusze stylów? To po prostu sposób określenia hierarchii stylów w dokumencie. Same style można zdefiniować na kilka sposobów:

  • bezpośrednio w kodzie strony jako atrybut dowolnego znacznika
  • w nagłówku
  • globalnie dla danego dokumentu
  • oraz przez dołączenie zewnętrznego arkusza (co jest najczęściej stosowane, bo pozwala na spójność projektu).

Mieszanie zastosowanych stylów jest możliwe i często spotykane, dlatego konieczne jest określenie ważności poszczególnych metod.
Zasada kaskadowości przyjęta przez twórców wygląda następująco:  najpierw ładowane i uwzględniane są zewnętrze arkusze, potem te wpisane do nagłówka, a na samym końcu style wpisane bezpośrednio do znacznika. Umożliwia to kontrolę nad dokumentem, a w przypadku sprzeczności zastosowanie te, które są najbliżej dokumentu.

Składnia arkuszy

CSS składa się z reguł dedykowanych konkretnym implementacjom stylów np. tym dla HTMLa, SVG i innym. Taka reguła składa się z selektora, który określa grupę elementów, których ma dotyczyć dane formatowanie, oraz z deklaracji, która definiuje formatowanie.

selektor { właściwość: wartość }

Przykładowa deklaracja takiego selektora może wyglądać tak.

h1 {color:green;}

Co oznacza, że każdy element, który jest oznaczony jako h1 będzie wyświetlany na zielono.

Poniżej kolejny przykład, spróbuj sama opisać, jak sformatowany będzie tekst.

.Tesla {
   display:block;
   margin: 10px auto 20 px 30 px;
   padding: 0.75em 2em;
   width: 400 px;
   border-style: solid;
   border-width: 5px;
   border-color: red;
   background-color: yellow;
}

Widzicie tutaj charakterystyczne elementy takie jak : block, margin, padding, border. Są one elementami modelu blokowego. CSS zakłada, że wszystkie elementy umieszczane są w dodatkowej przestrzeni o kształcie prostokątów. I każdą z tych przestrzeni możemy kontrolować:

  • Marginesy (ang. margins) — odstępy dzielące poszczególne elementy — bloki.
  • Obramowanie (ang. border) — linie rozdzielające marginesy i dopełnienie.
  • Dopełnienia (ang. padding) — odstępy pomiędzy elementem a otaczającą go ramką – nazywane również marginesami wewnętrznymi.
  • Zawartość (ang. content) — właściwa zawartość.
Źródło: http://www.codeproject.com

Źródło: http://www.codeproject.com

Podsumowując, arkusze CSS są bardzo przydatne jeśli chodzi na pracę z formarowaniem wyświetlanych treści. To właśnie ich, a nie formatowania za pomocą HTML używa się teraz najczęściej. Zamiast określać wszystkie cechy naszego nagłówka za pomocą HTML, definiujemy w nim tylko tag np. <h1>, który ma zadeklarowane formatowanie w CSSie.

Formatowanie w HTML poprzez deklaracje konkretnych cech – kolory, kroje fontów, czy odstępy, powinniśmy traktować jako sytuacje nadzwyczajne, to CSS powinien być  głownie za nie odpowiedzialny. Dzięki temu znacznie ułatwiamy sobie pracę, a nasz kod będzie o wiele bardziej przejrzysty. Zainteresowanych tematem odsyłam do materiałów dodatkowych, bo od CSSa, podobnie jak od HTMLa nie uciekniecie w swojej codziennej pracy :)

Materiały dodatkowe / dokumentacja

  1. Kurs CSS w przykładach (PL)
  2. Kurs CSSa na Codecademy (EN)

KONKURS

Tak jak zapowiedzieliśmy mamy dla Was konkurs. Dzięki wspaniałemu Coder’s Lab – pierwsza w Polsce Szkoła Programowania, mamy dla Was bilet oraz dwie 25% zniżki na najbliższe szkolenie podstaw HTMLa i CSSa. To dwa dni pełne nauki i praktyki ( o tym, jak wygląda takie szkolenie możecie przeczytać na blogu Troyanna). Ze swojej strony mogę dodać dwie rzeczy: nie da się uciec od HTMLa i CSSa i nawet, jeśli nie lubisz front-endu, jeśli wiesz, że będziesz robić backend to i tak czasem będziesz musiała coś tam pozmieniać, a po drugie to świetna opcja dla ludzi, którzy dopiero co zaczynają przygodę z programowaniem.

Konkurs dotyczy najbliższego terminu czyli 21-22.02.2015 r., a szkolenie odbywa się w Warszawie. Szczegóły kursu dostępne są tutaj.

Zasady konkursu są bardzo proste:

Prosimy Cię o odpowiedź dlaczego to właśnie Ty powinnaś/powinieneś wygrać nasz konkurs. Odpowiedzi należy umieszczać w komentarzach. Forma dowolna. 

Komisja konkursowa w składzie Ania, Kuba, Tesla wybierze zwycięzców i opublikuje ich nazwiska w tym wpisie. Konkurs trwa od dzisiaj do środy, 11.02 do północy. 

Licencja Creative Commons

Jeśli uważasz powyższą lekcję za przydatną, mamy małą prośbę: polub nasz fanpage. Dzięki temu będziesz zawsze na bieżąco z nowymi treściami na blogu ( i oczywiście, z nowymi częściami kursu Javy). Dzięki!

  •  
  •  
  •  
  •  
  •  
  • ixjakub

    Właśnie ja nie powinienem wygrać konkursu. Bo albowiem ponieważ z tego powodu, że znam więcej niż podstawy HTML i CSS. :( Ale przede mną nauka PHP (już zacząłem), JavaScript, jQuery i inne takie tam. :)

    • Hehe, a przed nami mam nadzieję, jeszcze inne fajne współprace z nagrodami dla Was. A wtedy powinno znaleźć się coś o JS czy JQuery ;)

  • Artur

    Cześć. Na początku powiem, że świetny blog ;) Czytam dość regularnie, Strasznie mnie motywuje w moim postanowieniu – chcę się przekwalifikować na Frond-End Developera. Inaczej mówiąc od zera do kodera heh ;)
    Czemu miałbym wygrać bilet na szkolenie? Byłby to dla mnie świetny początek w świecie kodowania, poznałbym nowych ludzi (ludzi z branży), zobaczył jak szkolenia prowadzą najlepsi z Coder’ Lab. Wierzę, że otrzymałbym konkretne wsparcie merytoryczne – wskazówki nt. „co dalej?” (i pewnie jeszcze większego motywującego kopa). Myślę że to wszystko nadałoby jeszcze większy sens moim działaniom ;) Mam prawie 30 lat. Wiele osób mówi, że już za późno na start w pracy programisty, ale ja chce im udowodnić, że tak nie jest, że zawsze jest czas na zmianę torów jazdy w swoim życiu i że ciężką pracą można to osiągnąć.
    P.S. A poza tym mieszkam w Warszawie, więc jestem na miejscu ;)

    Pozdrawiam
    Artur

  • Anna Matuszak

    Dlaczego to ja powinnam wygrać konkurs? Bo napisałam w tym celu HTML-a;) Strona w linku poniżej
    http://przeklej.org/file/M2DrwH/index.html

  • Agata

    Hej, bardzo podoba mi się Wasz blog. Zazdroszczę Ani, że ma mentora, który ją kieruje w wędrówce do programowania. I oczywiście determinacji jaką posiada w dążeniu do celu :)
    Fajna inicjatywa z tym konkursem :) Szkoda tylko, że szkolenie odbywa się w Warszawie(mam trochę daleko).
    Sama uczę się w domu tworzenia stron internetowych i nawet wiążę z tym przyszłość. Chciałabym zostać „freelance web developer”- ale z moim słomianym zapałem pewnie mi się nie uda.. :(
    Macie może jakieś motywacje? Rozpisujecie plan działania? :)

    Proszę nie brać tego komentarza pod uwagę podczas wybierania zwycięzcy konkursu(Warszawa jest zbyt daleko, chciałam się tylko wypowiedzieć).

  • Sylwia

    Hej, świetny i baaardzo motywujący blog, a co do konkursu – programowaniem zainspirował mnie mój mężczyzna i bardzo chciałabym mu pokazać, że mogę, umiem i dam radę. Za jego sprawką zaraziłam się tez inną rzekomo bardziej męską pasją – motocyklami. I tak w tajemnicy poszłam na kurs prawa jazdy kat. A,zdałam i przede mną aktualnie 4 sezon na dwóch kołach :) Tak więc taki kurs to coś idealnego dla mnie ( może tym razem też mała tajemnica nie zaszkodzi… ;) ) marzy mi się stworzenie serwisu o tematyce motocyklowej, którego to projekty kłębią się w głowie od jakiegoś czasu…No cóż, nawiązując do historii ;) moje hasło : Kobiety na motory i kompilatory !! :)
    PS. poprawna forma to „motocykle” ale czym byłoby hasło bez rymu :D
    Pozdrawiam !

  • agta

    Dlaczego ja powinnam wygrać konkurs?
    Tak jak Ty Aniu, dopiero od niedawna zaczęłam naukę programowania. Skończyłam zupełnie inny kierunek studiów, ale po zderzeniu się z rzeczywistością (czyt. ofertami pracy), postanowiłam zrobić coś innego.
    Programowanie pokazuje mi zupełnie inny wymiar nauki i pracy. Dla mnie jest trochę jak sport, trzeba pokonywać swoje słabości i przede wszystkim liczy się praca własna. Czasami jest ciężko, kiedy zderzamy się z jakimiś barierami, nieważne czy jest to błąd w programie czy np. inni ludzie, którzy pytają „Chce Ci się jeszcze uczyć?”. Nauka programowania daje mi ogromną satysfakcję i napędza na każdy dzień. Chciałabym wygrać konkurs, ponieważ przybliży mnie do osiągnięcia mojego celu: zostania programistą.

  • olga

    Blog jest swietny i niesamowicie motywujacy. Dzieki! Otwiera oczy, ze my kobiety, czesto o bardzo roznych kwalifikacjach zawodowych mozemy nauczyc sie czegos nowego i zwyczajnie zmienic branze. Dlaczego to ja powinnam wygrac ten konkurs? Bo kurs stacjonarny da mi zdecydowanie wieksza mozliwosc nauki. Jestem mloda mama i w domu czesto trudno na spokojnie usiasc mi przy komputerze.

    • olga

      Komputer opanowany przez Małego Ludka! A mama miała się uczyć! Help!

  • ewa

    dzieńdoberek! podłączam się do konkursu, bo nagroda główna kusi ;) Krok po kroku zmierzam do celu, czyli profesjonalnego tworzenia grafik i stron www- choć, jak większość piszących tutaj osób, działałam dotąd w zupełnie innej bajce :) Rysowanie na ekranie zaczęłam niedawno i od zera… gorąco proszę o możliwość nauki html :) ps. w końcu odkryłam, że praca z pasją przestaje być pracą! blog i jego twórcy zainspirowali mnie, by coś w swoim życiu zawodowym zmienić- za co wielkie dzięki! w załączniku-kolorowe myśli html-owe-czyli właściwe zgłoszenie konkursowe.

  • Aneta Włodarczyk

    Dlaczego chciałabym wygrać konkurs? Bardzo ważną dla mnie kwestią jest obecność kobiet w brażny IT. Sama zaczynam dopiero naukę programowania, początkuję w Pythonie. Byłam na warsztatach DjangoGirls w Berlinie i one zainspirowały mnie do tego, żeby upowszechnić programowanie wśród dziewczyn i kobiet. Zaczynam projekt Pyladies Warsaw, w którym będę organizować warsztaty z programowania w Pythonie przyjazne kobietom. Notabene prawdopodobnie warsztaty będę się odbywać w Coder’s Lab :) Będę też aplikować z projektem do programu menroingowego Lean In STEM. A czemu akurat CSS i HTML? Jako, że dopiero wchodzę w programowanie i IT, chciałabym mieć ich solidne podstawy, żeby móc później dzielić się wiedzą dalej i wiedzieć o czym mowa, bo jak sami napisaliście – od nich nie da się uciec. Pozdrawiam ciepło!

  • Anna Podczaska

    Dobry wieczór :) Chciałabym wygrać, bo podstawy programowania, których liznęłam nieco w „internetach”, pozwoliły mi się poczuć pewnie po raz pierwszy w moim życiu. Brzmi trochę pompatycznie, ale tak jest :). Zrobiłam się zachłanna i chciałabym więcej, plus – samodzielna nauka jest super, ale kierunek kogoś z doświadczeniem jest bezcenny. Myślę, że ten kurs byłby dla mnie pierwszym krokiem i solidną podstawą ku poszukiwaniu praktyk w jakiejś firmie. Tak szybko, to chyba trochę ryzykownie, ale to właśnie praktyka czyni mistrza, prawda? :)
    Pozdrawiam Was i trzymam kciuki za wszystkich, którzy poczuli się oświecieni programowaniem ;))

  • test

    R

  • Fille

    Jestem zmuszona do zmiany branży i poszukania pracy zdalnej. Nie odbieram tego jako przeszkodę, ale szansę na zmianę. Jako nową drogę wybrałam rozwój w branży IT, która umożliwi mi pracę z dowolnego miejsca. Chciałabym zacząć od podstaw oferowanych w tym kursie, aby móc je potem wykorzystać przy pracy nad moją stroną i zdobyć konkretne podstawy do nauki kolejnych języków. Jestem ciekawa świata programowania i możliwości jakie daje tworzenie kodu. Chcę mieć namacalny dowód swojej pracy w postaci strony, a nie odhaczoną listę wykonanych zadań z korpo.

  • Magda

    Szkoda, że nie w Kato!

  • Paweł

    Moja odpowiedź jest prosta: Nie CSS HTML wolę HTML w CSS
    a Rozwijając skrót:

    Nie
    Chcę Samemu Studiować Hektarów Tekstu Między Lunchami
    wolę
    Hucznie Teorię (z) Mistrzowskimi Lektorami w Coderslab Studiować Sobotami
    (oczywiście z Kobietami :))

  • Klaudia

    Kupiłam sobie książkę… a jest taka GRUBA :(:(:( … chciałabym w praktyce NA ŻYWO z innymi ludźmi mieć możliwość przejścia przez kurs HTML + CSS. jak Cię widzą tak Cię piszą, dlatego front jest najważniejszy ;)

  • Rachel Bungle

    Chciałabym odbyć Kurs HTML i CSS ponieważ – pół żartem, pół serio:
    Chciałabym w końcu móc w 100% legalnie zagadać do pewnego przystojnego webdevelopera nie hasłem „Would you like to Lorem Ipsum dolor sit on my lap?” lub „I am very font of you because you are just my type!”. Zdecydowanie lepiej brzmiałoby: „Your face is forever deep-etched in my heart” lub „You look perfectly put together, Do you display this well in IE?”.

    Mówiąc najpoważniej w świecie: aktualnie zajmuję się grafiką komputerową. Jednak z czasem doszłam do wniosku, że zdecydowanie bardziej cieszy mnie kodowanie stron. Wytrwale pretenduję do zajmowania się frontendem w przyszłości. Odbyłam już kurs na Codecademy, staram się samodzielnie dokształcać jednak wiem, że nie jest to wystarczające! Dlatego też chciałabym poduczyć się kodowania pod okiem kogoś, kto po prostu dobrze się na tym zna. W dodatku miło będzie poznać inne osoby, dla których kodowanie stron internetowych jest przyjemnością i pasją!

  • monika

    bo nie chce być już urzędnikiem państwowym!!!

  • Kkamka

    Hej, Chciałabym wygrać ten konkurs ponieważ, wiem że praca przy tworzeniu stron to była by tym co lubię robić. A przecież o to w życiu chodzi aby robić to co się lubi. Obecnie pracuję w zupełnie innej branży, wiele razy próbowałam pracować właśnie z technologiami internetowymi ale niestety zniechęcałam się gdy mi coś nie wychodziło. Myślę żę taki kurs napędził by mnie i już bym nie wątpiła w siebie i szła w tym kierunku robiąc w końcu to co chce robić.