Marzy Ci się strona WWW idealnie dostosowana do Twoich preferencji? A może chcesz się nauczyć, jak dodawać nowe elementy na stronę WWW, czy dokonywać zmian w jej wyglądzie? Z CSS to naprawdę łatwe! To wiedza, która ułatwi Ci zarządzanie swoją stroną WWW! W tym podkaście, a także moim najnowszym e-booku CSS w WordPressie, który miał premierę 14 maja dowiesz się więcej o CSS! Możesz także pobrać bezpłatny rozdział! 

Android | Spotify | iTunes | Spreaker | Stitcher | Soundcloud | YouTube | RSS

CSS co to jest?

By wyjaśnić czym jest CSS, bardzo często przyrównuję stronę internetową do domu. Między stroną internetową a domem jest tak naprawdę wiele podobieństw. Strona internetowa składa się z kodu HTML oraz CSS. Język HTML służy do tworzenia struktury strony internetowej, a także ustawienia kolejności konkretnych elementów, które się na niej znajdują. Za pomocą języka CSS sprawiamy, że poszczególne elementy dobrze wyglądają na stronie internetowej — poprzez definiowanie ich wyglądu. Tym samym, w naszym domu język HTML to mury i rozkład pokojów. Jaki ma mieć kolor, wielkość itp. — za to jest odpowiedzialny CSS.

Dlaczego warto nauczyć się CSS?

Nauka CSS umożliwi Ci stworzenie strony, która będzie Cię godnie reprezentowała w sieci. Wiele motywów WordPress, zwłaszcza darmowych nie daje tak rozbudowanych opcji personalizacji wyglądu jak potrzebujemy. Dzięki CSS dostosujesz wygląd strony WWW do swoich potrzeb. Bez trudu podmienisz czcionki, zmienisz rozmiar, ukryjesz poszczególne elementy, czy zadbasz o oprawne wyświetlanie strony WWW na urządzeniach mobilnych. Tym samym nie będzie Cię nigdy ograniczał Twój motyw na WordPressie – z większością zmian wyglądu poradzisz sobie samodzielnie!

E-book o CSS

Długo zwlekałam ze stworzeniem e-booka o CSS, jednak w końcu ma on swoją premierę. Zadbałam o to, by to była prawdziwa petarda! E-book podzielony jest na część z wiedzą teoretyczną, w której wyjaśniam wszystkie zawiłości CSS, jak i ćwiczenia, dzięki którym na bieżąco możesz przećwiczyć wszystko, czego się uczysz. Co więcej, na końcu książki znajdziesz gotowe kody, które od razu możesz wykorzystać na swojej stronie WWW.

Pobierz bezpłatny rozdział

Chcesz zobaczyć, jak wygląda e-book o CSS w środku? Pobierz bezpłatny rozdział. W ten sposób sprawdzisz, czy mój sposób pisania Ci odpowiada i czy chcesz kupić e-booka. To jednak nie wszystko, poniżej zamieściłam kilka pierwszych opinii, które dostałam o e-booku. Wszystkie od super babek, specjalistek w swoim fachu.

Opinie o e-booku CSS

Agnieszka Skupieńska – To się opłaca

Kiedy chce się prowadzić własny biznes albo blog, trzeba umieć wiele rzeczy. Niekoniecznie po to, żeby wszystko robić samodzielnie, ale chociażby po to, żeby wiedzieć, jak rozmawiać z podwykonawcami. Jedną z takich rzeczy jest tworzenie stron, a HTML i CSS są nierozerwalnie ze stronami związane. W tym e-booku Ola tłumaczy trudne zagadnienia w opisowy sposób. Pierwszy raz spotkałam się z tym, żeby porównywać programowanie z pokojami i kanapami, ale… te metafory działają! Dzięki nim dużo łatwiej sobie wyobrazić, o co chodzi w tym całym CSS.

Ogromny plus za gotowe kody, które można skopiować i wykorzystać na swojej stronie!

Natalia Bednarczyk – Pixels Factory

Bardzo polecam e-book Oli każdemu, kto chce zrobić pierwszy krok (a nawet wiele kroków) do zagłębienia się w świat CSS-a 🙂 A jest to wspaniały świat, który daje niezliczone możliwości w dopasowaniu strony www do swojej wizji.

Proste tłumaczenie

E-book Oli pomaga stawiać te kroki w bardzo przystępny sposób. Już od pierwszej strony Ola chwyta czytelnika za rękę i prowadzi go po CSS-owej ścieżce, tłumacząc poszczególne tematy tak, że nawet ktoś, kto nigdy nie miał do czynienia z CSS-em, w mig załapie, o co chodzi. Ola postarała się, by zagadnienia, które laikowi mogą na pierwszy rzut oka wydać się trudne, były przedstawione jasno i obrazowo, np. wplatając w tekst metafory, które nie tylko uczą, ale też wywołują na twarzy uśmiech (bardzo spodobało mi się tłumaczenie pewnych zagadnień na przykładzie kanapy 🙂 ).

Pytania od czytelników

Świetnym urozmaiceniem są też pytania od czytelników, które sprawiają, że e-book jest pełen odpowiedzi na wątpliwości “z życia wzięte”, co jeszcze bardziej dodaje mu autentyzmu.

Zeszyt ćwiczeń

Strzałem w dziesiątkę jest też dołączony do e-booka zeszyt ćwiczeń, bo nauka CSS-a to przede wszystkim praktyka, która czyni mistrza. To jak z nauką języka obcego – znajomość teorii jest ważna, ale najważniejsze jest to, żeby mówić, pisać, uczyć się “żywego” języka. Tak samo jest z językiem CSS – najwięcej przyswajamy sobie wtedy, kiedy uczymy się na “żywych” przykładach, szukamy odpowiedzi na pytania, szperamy, kombinujemy, zastanawiamy się, dlaczego coś nie działa lub dlaczego zadziałało 🙂

Nie byłabym sobą, gdybym na koniec nie dodała, że e-book jest piękny graficznie! Pełen miłych dla oka zdjęć, ale też minimalistyczny i przejrzysty, co z pewnością będzie pomocne w przyswajaniu zawartej w nim wiedzy.

Jeszcze raz polecam! 10/10 :))

Paulina Szczepańska – One Little Smile

Pamiętam, kiedy 9 lat temu stawiałam pierwsze kroki w prowadzeniu bloga. Chciałam zmienić mnóstwo rzeczy za pomocą CSS, ale robiłam to po omacku. Szukałam w sieci gotowych kodów i wklejałam je na ślepo, nie mając pojęcia, o co w tym wszystkim chodzi.

Gdyby wtedy na rynku pojawił się taki e-book, kupiłabym go bez zastanowienia. Ola wyjaśnia w nim wszystko tak przystępnie, że pewnie uniknęłabym wielu błędów, które zaliczyłam na samym początku.

Przeczytaj transkrypcję podkastu “CSS co to jest?”

Powitanie

Hej z tej strony Ola Gościniak, czyli Jestem Interaktywna. Witaj w kolejnym odcinku mojego podcastu Ola GO. Ten pomoże Ci w stworzeniu idealnej i skutecznej strony internetowej, która będzie godnie reprezentowała siebie oraz swój biznes w sieci. W tym odcinku dowiesz się więcej o CSS w WordPressie, czyli możliwości samodzielnych zmian, które możesz dokonać w wyglądzie swojego motywu w WordPressie. Ten odcinek ukazuje się ze względu na to, że 14 maja 2019 pojawia się w sprzedaży mój e-book CSS w WordPressie na temat CSS i dokonywania właśnie tych modyfikacji.

CSS – co to jest?

Jeśli interesuje cię ta tematyka, masz na przykład motyw WordPress, który nie daje ci takich możliwości personalizacji, jakich potrzebujesz, ten podcast może przypaść do gustu, zresztą, jak i sam e-book, w którym znajdziesz to, co powiem w tym podcaście.

Opowiem Ci o tym, co znajdziesz na kartach pierwszych 20 stron tego e-booka. Myślę, że to odpowie na Twoje pytania, czy CSS jest dla Ciebie, czy to jest to, czego potrzebujesz? W jakich sytuacjach CSS się przydaje? Przechodzimy do tematu. Myślę, że zacznę od tego, dlaczego ten temat pojawia się w tej chwili na blogu.

Jak już wiesz, prowadzę bloga Jestem Interaktywna, ale moja przygoda z tworzeniem stron internetowych zaczęła się dużo wcześniej. Już w podstawówce stworzyłam swoją pierwszą stronę internetową. Potem tworzyłam różne strony internetowe.

Dlaczego ten temat?

Najważniejszym punktem przy tworzeniu stron WWW było dla mnie to, żeby te strony internetowe dobrze wyglądały. To było dość kluczowe. Ja głównie zawsze byłam samoukiem i tworzyłam strony internetowe. Potem też poszłam na studia, gdzie więcej się dowiedziałam na ten temat od strony programistycznej, ale moim konikiem było to, żeby te strony dobrze wyglądały właśnie dzięki CSS’owi.

Ja się nigdy tym za dużo nie chwaliłam. Od początku jestem bardzo mocno związana z WordPressem, natomiast jako freelancerka tworzyłam bardzo dużo strony internetowych, które miały wygląd zaprojektowany przez grafika i ja go wdrażałam.

To dobry moment!

Właśnie do tego CSS nam się przydaje. Dosyć długo na blogu Jestem Interaktywna zwlekałam z tym tematem CSS, bo miałam takie poczucie, że to już jest coś bardziej zaawansowanego, że to już rzeczy, po które sięgamy, kiedy mamy dopieszczać stronę WWW, żeby coś zmienić itp. Dlatego długo nie poruszałam tego tematu. Stwierdziłam, że na początek zajmiemy się tematyką, jak strony internetowe stworzyć, a ich dopieszczaniem będziemy zajmować się później. Tak krok, po kroku będę was wspierała, żeby tworzyć świetne i skuteczne miejsca w sieci. Myślę, że to jest dobry moment, by zacząć rozmawiać o CSS.

Tyle mamy już tutaj wiedzy dotyczącej WordPressa, tyle już edycji kursów WP się odbyło, teraz naturalnie, że pojawia się coraz więcej pytań o CSS. Też dość długo zwlekałam z tym tematem, bo miałam trochę taki problem w głowie, żeby wymyślić, jaka forma tych materiałów powinna się pojawić i tutaj wpadłam w końcu na taki pomysł, że dobrym rozwiązaniem będzie e-book, ale z zestawem ćwiczeń. Po to, żeby od razu można było pracować nad kwestiami praktycznymi CSS.

CSS jest to dodatkowy język, dzięki któremu możemy wprowadzić modyfikacje dotyczące wyglądu strony, natomiast, żeby to wszystko przyswoić trzeba poćwiczyć. Myślę, że ta forma, jak najbardziej będzie Ci odpowiadała.

Co znajduje się w e-booku?

Przejdźmy po prostu do tego tematu, który się znajduje e-booku. Ja tak swoimi słowami będę opowiadała te pierwsze karty e-booka. Żeby to był podcast bardziej w formie takiej luźnej rozmowy, a nie czytania tego, co się w tym e-booku dzieje. Zacznijmy od może takich podstawowych pytań. Być może zadajesz sobie pytanie: co to jest CSS? Do czego się go wykorzystuje? Dla kogo jest on przydatny?

Co to jest CSS?

Bardzo często przyrównuję stronę internetową do domu. Między stroną internetową a domem jest bardzo dużo podobieństw. Uważam, że także tłumaczenie pojęcia CSS tą metaforą jest bardzo dobre. W e-booku do tej metafory często wracam, dzięki temu można naprawdę świetnie wytłumaczyć tematy, które na początku mogą wydawać się trudne.

Strona internetowa składa się z kodu HTML oraz CSS. Język HTML służy do tego, żeby na stronie internetowej stworzyć strukturę i oprócz tego w tej strukturze ustawić kolejność konkretnych elementów, które się na tej stronie znajdują, czyli na przykład pokazujemy w tej strukturze, że tutaj ma być nagłówek tej strony, tutaj ma być jakaś treść główna, czyli np. jakieś najnowsze artykuły, że tutaj ma być stopka, tu ma być guzik i tak dalej. Do tego jest potrzebny HTML, żeby powiedzieć, co gdzie, ma się znajdować.

Natomiast za pomocą języka CSS sprawiamy, że te elementy mają dobrze wyglądać na naszej stronie internetowej. Definiujemy ich wygląd. Wracając do metafory domu – w naszym domu język HTML byłby murami i takim rozkładem konkretnych pokojów. Oprócz tego, że ma się znajdować kanapa, nie wiemy, jak ta kanapa ma wyglądać. Jaki ma mieć kolor itp. – za to jest już odpowiedzialny CSS.

Dzięki CSS-owi powiemy właśnie, że kanapa ma być niebieska, takiej, a nie innej wielkości itp.

Czyli w HTML jest zaznaczona struktura – co, gdzie znajduje się na stronie internetowej. Deklarujemy, jak to wszystko ma wyglądać. Ponieważ nie tylko metaforami Gościniak żyje, to mądrymi słowami taka definicja brzmiałaby:

Język HTML inaczej hipertekst to kod wykorzystywany do tworzenia struktury strony internetowej i jej zawartości, natomiast język CSS cascading style sheets służy do opisu formy jej wyświetlania prezentacji.

To co wolisz? Formułkę? Ja tam wolę metaforę. Dzisiaj nagrywam z kanapy, żeby tutaj dobrze się do tej metafory dopasować.

Okej, to już wiesz, co to jest ten CSS, to teraz komu się przyda?

Jeśli masz stronę internetową na WordPressie i chcesz dostosować motyw do swoich potrzeb, to warto zaznajomić się z CSS. To naprawdę genialne rozwiązanie, zwłaszcza w przypadku, gdy masz darmowy motyw. W wielu darmowych motywach są bardzo okrojone opcje personalizacji wyglądu i jeśli chcesz na przykład sprawić, żeby był inny button, czy inny kolor czegoś tam na przykład, a w ogóle nie ma takich opcji do zmiany, to właśnie wtedy możesz to napisać i to jest bardzo prosta sprawa.

Oprócz tego możesz też stworzyć stronę od zera. Czyli jeśli masz gotowy kod HTML i struktury, to możesz zadeklarować wygląd swojej strony od początku do Końca. To już jest bardziej zaawansowana sprawa, bo tutaj trzeba jednak stworzyć od początku całą stronę internetową.

Czym będziemy zajmować się w e-booku?

W tym e-booku głównie będziemy się zajmować tymi modyfikacjami w WordPressie, czyli jak dostosować motyw w WordPressie do swoich potrzeb, jeśli nie zapewnia takich możliwości personalizacji, jakich potrzebujemy. Jeśli masz swoją stronę internetową na WordPress, to składa się ona właśnie ze struktury, oraz kodu CSS. Przy wielu motywach, zwłaszcza tych darmowych trzeba będzie po prostu więcej tych rzeczy dostosowywać.

Bezpieczny sposób wprowadzania modyfikacji

Reasumując, jeśli masz motyw WordPress, a w ustawieniach motywu nie możesz zrobić takich rzeczy, jakie potrzebujesz, to po prostu twórcy motywu tego nie przewidzieli, albo takie opcje dają dopiero w wersji premium płatnej. Co wtedy zrobić? Najprostszym sposobem będzie wprowadzenie własnych modyfikacji w kodzie CSS.

Jest to bardzo bezpieczny sposób, ponieważ w przypadku jakichkolwiek problemów, wystarczy, że powrócisz do początkowych ustawień i wszystko będzie w porządku. Strona dalej będzie działała prawidłowo. Czyli jeśli po wprowadzeniu modyfikacji w kodzie CSS coś będzie nie tak, to po prostu usuwasz, to co dodałeś i z powrotem wszystko jest okej.

Czyli nie da się w tym przypadku zrobić jakiegoś trwałego uszczerbku. Oczywiście, jeśli to się wprowadza w WordPressie w bezpieczny sposób, który też pokazuje w tym e-booku.

Czyli CSS jest dla osób, które chcą od zera stworzyć swoją stronę internetową oraz dostosować jej wygląd lub dla tych, którzy chcą wprowadzić pewne modyfikacje w sposobie wyświetlania tej strony internetowej, które nie były przewidziane przez twórców strony na etapie jej tworzenia.

Co zmienisz za pomocą CSS?

Możesz śmiało wykorzystywać CSS do zmiany wyglądu swojej strony internetowej. Takich jak na przykład rozmiary, kolory, odstępy, marginesy. Często przy takich modyfikacjach przydaje się ukrywanie elementów, które są zbędne.

Jeśli jednak chcesz na stronie internetowej jakieś nowe elementy np. widgety albo przetłumaczyć napisy z języka angielskiego na polski, bo tego nie zrobisz na CSS.

Na to też warto zwrócić uwagę, tak jak mówiłam wcześniej – za strukturę i te elementy są odpowiedzialne inne rzeczy, CSS możemy tylko zmienić wygląd. Takie rzeczy rozwiązuje się w kodzie HTML. W przypadku, gdy masz stronę na WordPressie, możesz to zrobić za pomocą wtyczek.

Jeśli chcesz dodawać nowe elementy, to już trzeba się posiłkować czymś innym np. nowymi wtyczkami w WordPressie.

Pytania od czytelników

W e-booku znajdują się także pytania czytelników. Chciałam teraz przytoczyć pytanie od Patryka.

Chciałbym nauczyć się języka CSS nawet na przyszłość. Jeśli chodzi o motyw na mojej stronie, to na szczęście nie ma potrzeby niczego w nim ruszać”.

Co mogę powiedzieć Patryk? To jest dobry plan. Jeśli chcesz nauczyć się CSS na przyszłość, po to, by po prostu go używać, możesz na przykład jakieś strony internetowe robić.

Strona w3schools.com

To, co będzie dla Ciebie interesujące w tym e-booku to moduły dotyczące składni języka CSS, gdzie już zajmiemy się poznawanie tego, co tutaj w trawie piszczy.

Dodatkowo, jeśli w tej chwili interesuje Was też specyfikacja HTML, możecie wejść na stronę w3schools.com i tam więcej na ten temat się dowiedzieć. To jest świetna strona internetowa z tutorialami dotyczącymi tych i innych języków, która wiecie, że działa od 98 roku – 21 lat, aż mi się nie chce wierzyć. Ale tak, tyle lat ma już ta strona.

Więc na w3schools.com możecie śmiało wchodzić, tam więcej też na te tematy się dowiedzieć. Ale to co? Przechodzimy do składni. Co prawda, podkast jest krótki, ale możemy już przy okazji liznąć trochę składni języka CSS. Jak to wszystko działa. W jaki sposób musimy zadeklarować konkretne elementy.

Wprowadzenie do CSS

Jedna z czytelniczek, Magda mówi, że taki e-book to świetny pomysł, poprosiłaby o ogólne wprowadzenie i chociaż podstawy pisania kodu. Kiedyś uczyła się HTML, ale dziś już sama niczego nie napisze, ale wiem, gdzie i czego szukać.

Magda chcesz, masz. Lecimy zaraz z wprowadzeniem i podstawami pisania CSS.
Zaczynamy chyba znowu od metafory naszej domowej, bo czemu nie, kto nam zabroni, prawda? Teraz przy okazji tego, że zajmujemy się składnią CSS. Dowiedz się więcej o takiej ogólnej składni i idei języka CSS.

Wiecie, jak używać CSS, a teraz być może zaczęliście się zastanawiać, jak to zrobić? CSS nie jest trudnym językiem, bardzo łatwo można się go nauczyć. Dzięki naszej metaforze z domem zrobimy to bardzo łatwo. Pamiętacie?

Mamy nasz dom, nasze mieszkanie, na razie gołe mury i w tym domu na przykład kanapę. Chcielibyśmy, żeby po prostu ładnie wyglądał nasz dom. By nadać styl poszczególnym elementom wybieramy dany element. Dobra, niech będzie ta kanapa.

Pierwsze pytanie, jakie musimy sobie zadać brzmi: Co chcemy ostylować?
Drugie pytanie jak? Tutaj konieczne będą takie pytania dodatkowe, bardziej szczegółowe, czyli jaką cechę chcemy ostylować oraz jaką nadać jej wartość. Czyli na przykład ten konkretny rozmiar oraz kolor, jaki będzie to konkretny rozmiar, czy kolor?

Myślę, że to intuicyjne, tak jakbyśmy wybierali konkretne elementy naszego mieszkania.

Przykład ostylowania

Czyli mamy przykład, pytanie:

Co? Kanapa.

Tak, to kanapę chcemy ostylować, sprawić, żeby dobrze wyglądała.

Następnie było pytanie Jak? Na pytanie, jaka cecha mówimy kolor.

Jaki kolor ma mieć kanapa?

Jaki kolor może mieć Gościniakowej kanapa?

Niech będzie turkus! A co tam, zaszalejemy!

Więc mamy pytanie: jak? Jaka cecha? Kolor? Jaka wartość tej cechy? Turkus!

Możemy tak dalej iść – jesteśmy w tej kanapie, możemy zapytać: Jaka cecha kolejna? Niech będzie to rozmiar. Jaka wartość? Niech będzie to dwumetrowa sofa na 3 osoby. Możemy tak dalej kolejne cechy kanapy określać za pomocą kolejnych cech.

CSS na przykładzie guzika

Tak właśnie wygląda kod CSS, czyli wybieramy konkretny element, któremu chcemy nadać styl, potem pytamy jaka cecha, jaka wartość tej cechy i w ten sposób po prostu sprawiamy, że te elementy zaczynają wyglądać. Czyli liczba cech wybranych do zmiany wyglądu, jakiegoś konkretnego elementu zależy od nas i od tego jaki wygląd chcemy tej nadać tej rzeczy.

Na przykład dobra, na przykład kanapie. Czyli dokładnie tak samo dbamy o styl elementów na stronie internetowej. Najpierw musimy określić, co chcemy ostylować, jakie nadać cechy oraz wartości.

Niech będzie to na przykład guzik. Chcemy dodać na naszej stronie internetowej konkretny guzik. W tej chwili mamy na stronie zwykły link, a chcemy by był to piękny np. różowy guzik z białym tekstem.

To, co zrobimy? Znowu zadajemy pytanie „co”. Czyli deklarujemy, jakiemu elementowi chcemy nadać ten styl? Znowu mamy dwa pytania, czyli: jaka cecha? No to niech to będzie kolor tła tego guzika, jaka wartość różowy kolor. Znowu jaka cecha tekst, kolor tekstu, jaka wartość biały.

Składnia CSS

Dokładnie tak to wygląda. Czas na składnię, bo wiesz już, jaka jest koncepcja, jak to po kolei idzie i jakie pytania musisz sobie zadać? To teraz idziemy do składni. Czyli na to pytanie, co, musimy zastąpić tak zwanym selektorem. To może być wybrany jakiś konkretny element, jakaś grupa elementu, to może być jakaś klasa np. w HTML. Tym się nie będziemy w tym podkaście zajmować. Dowiesz się w e-booku dokładnie, jak taki selektor wyznaczyć.

My na potrzeby tego podkastu przyjmijmy, że jest to po prostu nazwa tego elementu, żeby też poćwiczyć tę składnię. Natomiast tutaj mogą być klasy w HTML poprzedzone kropką, identyfikatory poprzedzone hashem, nazwy tych elementów w HTML-u. Dzięki temu my po prostu wyznaczamy jaki konkretny element chcemy sprawić, żeby miał zdefiniowany styl w naszej klasie.

Jaka cecha?

Następne nasze pytanie: jaka cecha? Wybieramy już z listy zdefiniowanych już cech. Czyli tutaj już musimy poznać te nasze cechy w sensie zdefiniowania, żeby móc je nadawać. W większości przypadków są to nazwy w języku angielskim np. Color Background Color.

Wartość

Kolejna rzecz to jest już wartość, którą nadajemy według naszych preferencji, jak ma wyglądać strona. Te wartości w różnych jednostkach możemy podawać, o czym też wspominam więcej w e-booku, więc jak będzie wyglądał ten nasz kod CSS?

Spróbujmy tę naszą kanapę, o której rozmawialiśmy przed chwilą przełożyć do CSS’a. Czyli to, co opisywaliśmy wcześniej. Jak by to wyglądało w CSS’ie?

Kanapa, czyli nasz selektor. Nawias wąsiasty, czyli ten taki klamrowy, następnie byśmy mieli kolor turkusowy, to będzie kolor napisany po angielsku color, dwukropek cyjan (turkusowy) to będzie kolor podobny. Średnik, następnie szerokość to będzie width, dwukropek, 2 m, średnik po każdej takiej deklaracji.

Po każdej deklaracji, jaka cecha, jaka wartość tej cechy dajemy średnik i na zakończenie nawias wąsiasty – ja go tak nazywam, bo przypomina wąsy. Ale tak naprawdę mów się nawias klamrowy. W ten sposób pokazujemy, że między nawiasami klamrowymi znajdują się style dotyczące tej kanapy. Jeśli jesteś wzrokowcem, to zapraszam Cię do artykułu z tego podkastu, gdzie ta notacja będzie zapisana, żebyś mógł sobie podejrzeć, jak to wygląda.

Selektor

Czyli najpierw podajemy selektor, który najczęściej znajdujemy w HTLMu, jest to zazwyczaj klasa, kwalifikator itp. W kolejnych modułach e-booka dowiesz się dokładnie, jak wyznaczyć te elementy i skąd je brać.

Następnie nawiasie klamrowym znajdują się cechy oraz wartości w każdej cesze jest dwukropek i dla przejrzystości też można dodać spację, ale to nie jest konieczne. Następnie wypisujemy wartości i na zakończenie takiej linii średnik i przechodzimy do następnej linijki. I kolejna cecha – wartość, cecha – wartość, ile tych cech wartości dla konkretnego elementu potrzebujemy po wymianie wszystkich cech dla danego elementu, zamykamy ten nawias, przechodzimy do następnej linii, możemy zdefiniować styl nowego elementu przykład guzika.

Stylowanie guzika CSS

Mieliśmy wtedy różowy z białym napisem byłby

guzik {
background-color: pink;
color: white;
}

Po tych nawiasach można dodawać enter, dzięki temu kod CSS będzie wyglądał przejrzyście. Teraz zadanie dla Ciebie!

Ćwiczenia do zrobienia

W artykule poświęconym temu podkastowi pojawi się rozdział e-booka o CSS. Znajdują się w nim dodatkowe ćwiczenia.

Z czego składa się strona internetowa?

Jaki jest cel CSS-a?

Dla kogo CSS jest przydatny?

Co zmienisz z CSS’em?

Opisz swoimi słowami, czym jest CSS.

Natomiast kolejne zadania:

Za pomocą języka CSS opisz 5 rzeczy, które leżą na Twoim biurku. Zamiast wartości użyj słowa w języku polskim.

Czyli na przykład, niech to będzie

długopis {
color:white;
}

Wypisz, jakie elementy chcesz zmienić na swojej stronie WWW. Ta lista przyda Ci się na dalszym etapie pracy.

Dzięki tej liście będzie Ci łatwiej przejść do działania, jeśli zainteresuje Cię e-book CSS, którego premiera jest 14 maja 2019 roku. U mnie na blogu Ola Gościniak znajdziesz ten e-book – 100 stron samej wiedzy dotyczącej CSS, a oprócz tego wraz z e-bookiem otrzymujesz zestaw ćwiczeń, to jest 40 stron różnych zadań, dzięki którym przekujesz na praktykę swoją wiedzę o CSS. Możesz także sprawdzić, czy udzielone przez Ciebie informacje są poprawne, dzięki temu sprawdzisz, czy wszystko jest poprawne.

Jaki jest e-book o CSS?

Ten e-book jest do tego, by nauczyć się samodzielnie wprowadzać zmiany w wyglądzie motywu Twojej strony internetowej, by wyglądała dokładnie tak, jak chcesz, czyli dowiesz się, jak zmienić wygląd swojej strony internetowej. Będzie dużo metafor, żeby te techniczne rzeczy, które często wydają się trudne, były łatwiejsze do ujarzmienia i zrozumienia i też wprowadzenia w życie. Dodatkowo ostatni moduł jest poświęcony praktycznym zastosowaniu, w formie kodów, które możesz pobrać, żeby potem wprowadzić je na swojej stronie internetowej.

Znajdują się tam kody – przykładowe formularze, menu, które możesz wprowadzić na swojej stronie internetowej. W 5 modułach znajdziesz 30 rozdziałów, dodatkowo w tych rozdziałach odpowiadam na różne pytania od interaktywnej społeczności.

Chciałam, żeby ten e-book był dla Was, jak najbardziej praktyczny dlatego zebrałam dziesiątki różnych pytań, które nas nurtują w kwestiach związanych z CSS, aby odpowiedzieć na nie właśnie w tym e-booku.

Czyli oprócz tego, co znajdowało się w podkaście, dowiesz się także, jak wygląda kod HTML, w jaki sposób znajdować selektory do zmiany, czy jak znaleźć ten element, który chcemy zmienić na stronie. Następnie dowiesz się, w jaki sposób wpisywać kod, w jaki zdefiniować jednostki, selektory, pseudoelementy, pseudoklasy.

Chcesz nauczyć się CSS?

Daj znać w komentarzu, czy wiedza dotycząca CSS Ci się przyda? Czy wolisz takie modyfikacje zlecać innym?

A tutaj wypisałam linki poruszane w podkaście:

• E-book CSS
• Bezpłatny rozdział e-booka
• W3Schools

Skąd pobrać podkast Ola GO?

• Na blogu – lista wszystkich podkastów
• Android – słuchaj na Androidzie w swojej aplikacji
• Spotify – kliknij lub skorzystaj z lupki i frazy „Ola Gościniak”
• iTunes – słuchaj podkastu na urządzeniach od Apple
• Spreaker – korzystaj z aplikacji lub na stronie
• Soundcloud – kliknij lub skorzystaj z lupki i frazy „Ola Gościniak”
• Stitcher – słuchaj za pomocą aplikacji
• Kanał RSS – skopiuj adres RSS i wklej go w aplikacji, której używasz
• Pobierz – Pobierz ten odcinek i słuchaj tam, gdzie chcesz.

Ola Gościniak

Pomysłodawczyni marki Jestem Interaktywna, ekspertka WordPress, mentorka biznesów online, blogerka, przedsiębiorczyni, wykładowczyni akademicka, autorka e-booków, książek m.in. bestsellerowej „Bądź Online” oraz kursów online WordPress i WooCommerce, organizatorka Interaktywnej Konferencji, autorka cenionego podcastu wyróżnionego przez Forbes Woman. Więcej →