Izgled veb stranica bio bi prilično monoton bez CSS-a, budući da ovaj stilski jezik upravlja izgledom teksta, njegovom veličinom, bojom, kao i pozicioniranjem elemenata na stranici.
Šta je CSS?
CSS, ili Cascading Style Sheets, predstavlja jezik koji definiše način na koji se HTML elementi prikazuju na ekranu ili pri štampanju. World Wide Web Consortium (W3C) je kreirao CSS 1996. godine.
HTML elementi originalno nisu bili opremljeni funkcijama koje bi olakšavale formatiranje veb stranica. Od programera se očekivalo samo da pišu osnovne oznake za stranicu. Uvođenje oznaka kao što je <font> pri pokretanju HTML 3.2, donelo je nove komplikacije za razvojni tim.
S obzirom na to da su veb stranice postale vizuelno bogatije, sa obojenim pozadinama, raznovrsnim fontovima i različitim stilovima, ponovno pisanje koda postalo je izuzetno komplikovano i dugotrajno. W3C je uveo CSS kako bi se rešili ti izazovi, a CSS je nastavio da se razvija tokom godina.
Zašto koristiti CSS?
#1. Efikasnost CSS-a
CSS nas oslobađa potrebe za ponavljanjem oznaka za fontove, poravnanje elemenata, okvire, boje, stilove pozadine i veličine na svakoj pojedinačnoj veb stranici.
#2. Ušteda vremena
Izgled celokupne veb lokacije može se lako promeniti modifikovanjem jedne spoljne CSS datoteke.
#3. Kompatibilnost sa različitim uređajima
Današnji korisnici pristupaju veb sajtovima koristeći raznovrsne uređaje sa različitim veličinama ekrana, uključujući računare, tablete i pametne telefone. CSS pojednostavljuje izradu veb stranica koje se prilagođavaju veličini ekrana svakog uređaja.
#4. Jednostavnije održavanje aplikacija
Moderne veb aplikacije su u stalnom razvoju. CSS omogućava promene pojedinačnih komponenti ili čak celokupne veb lokacije bez potrebe za izmenama u osnovnom kodu.
Kako se CSS koristi sa HTML-om za kreiranje veb lokacija?
HTML je standardni jezik za označavanje koji se koristi za kreiranje veb stranica. Sa druge strane, CSS definiše kako se te veb stranice (izrađene pomoću HTML-a) prikazuju. Idealna veb stranica kreirana pomoću HTML-a i CSS-a sadržala bi HTML datoteku sa tekstom, linkovima ka slikama i HTML oznakama.
HTML datoteka može biti povezana sa zasebnom CSS datotekom pomoću <link> oznake, ili koristiti interne ili ugrađene CSS stilove. HTML datoteka može sadržati naslov definisan sa <h1> i pasus označen sa <p>. Uz pomoć CSS-a, možete naložiti pretraživaču da sav sadržaj unutar pasusa prikaže podebljano, ili da sadržaj naslova bude veličine 50 piksela i zelene boje.
U narednom odeljku ćemo prikazati kako HTML i CSS funkcionišu u praksi.
Vrste CSS-a
#1. Spoljašnji CSS
Da bi CSS bio klasifikovan kao spoljašnji, neophodno je da postoji HTML datoteka i odvojena CSS datoteka sa ekstenzijom .css. Na primer, style.css. CSS datoteka se povezuje sa HTML datotekom/dokumentom pomoću <link> oznake.
Primer spoljašnje CSS datoteke:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
CSS datoteka se može povezati sa sledećim HTML dokumentom:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>
</head>
<body>
<div class = "main">
<div class ="GF">Geek Flare!!!! </div>
<div id ="TP">
Your favourite tech portal
</div>
</div>
</body>
</html>
Oznaka <link> povezuje eksterni stilski list sa HTML dokumentom, dok atribut href određuje lokaciju eksternog stilskog lista.
Konačna veb stranica će se prikazati na sledeći način:
Spoljašnji CSS je najpreporučljiviji pristup jer olakšava kreiranje komponenti koje se mogu ponovo koristiti i omogućava univerzalne izmene u celoj bazi koda.
#2. Interni CSS
Interni CSS je idealan kada je potrebno stilizovati samo jedan HTML dokument na jedinstven način. Skup pravila stila se piše unutar <head> sekcije HTML dokumenta.
Primer internog CSS-a:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Renderovana veb stranica će se prikazati na sledeći način:
Interni CSS nije idealan u većini slučajeva jer povećava veličinu koda u HTML dokumentu, što može uticati na brzinu učitavanja.
#3. Inline CSS
Inline CSS podrazumeva primenu CSS stilova direktno unutar tela HTML elementa. Na primer, možete stilizovati pasus, naslov ili čak div element koristeći inline CSS.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:red; font-size:50px;
font-style:bold; text-align:center;">
Inline CSS Demonstration
</p>
</body>
</html>
Renderovani dokument će se prikazati na sledeći način:
Inline CSS nije pogodan za skaliranje veb aplikacija, s obzirom na to da je potrebno vreme za dodavanje CSS svojstava svakoj HTML oznaci.
U nastavku su neki od najboljih online kurseva i knjiga za savladavanje CSS-a.
Izrada responzivnih veb stranica pomoću HTML-a i CSS-a
Ovaj kurs, posvećen izradi responzivnih veb lokacija u stvarnom okruženju, objašnjava kako se kreiraju veb stranice koje se prilagođavaju različitim uređajima koristeći HTML5 i CSS3. Za ovaj kurs nije neophodno prethodno iskustvo u veb razvoju. Kurs obrađuje koncepte kao što su model kutije, rešavanje konflikata selektora, šeme pozicioniranja i nasleđivanje.
Ovo je idealan kurs ukoliko želite da naučite kako da planirate, skicirate, kodirate, testirate i optimizujete profesionalnu veb lokaciju.
Napredni CSS i Sass
Napredni kurs o CSS-u i Sass-u vas uvodi u mehanizme rada CSS-a, istražujući teme poput kaskade, specifičnosti i nasleđivanja.
Kurs obuhvata mnoge moderne CSS tehnike za kreiranje moćnih i responzivnih veb stranica. U okviru kursa, takođe ćete naučiti o Sass-u i kako ga koristiti u projektima prilikom dizajniranja CSS-a, globalnih varijabli i upravljanja medijskim upitima.
Ovaj kurs je takođe pogodan ukoliko želite da savladate CSS animacije, jer pokriva @keyframes, animacije i prelaze.
Naučite CSS
Learn CSS by Codecademy vas uči kako da pomoću CSS-a vizuelno transformišete HTML u atraktivne veb stranice. Kurs je podeljen u 8 lekcija i 6 projekata koji vam omogućavaju da testirate svoje znanje.
Glavne veštine koje ćete steći na ovom kursu su dodavanje stilova HTML elementima, povezivanje HTML i CSS datoteka, i kreiranje jedinstvenih izgleda za veb stranice.
Izradite svoju prvu veb stranicu pomoću HTML-a i CSS-a
Kurs o izradi prve veb stranice objašnjava kako da koristite HTML5 i CSS3 za kreiranje responzivnih veb lokacija. Ovaj besplatni kurs je podeljen u 4 modula i potrebno je oko 10 sati da se završi. Za ovaj kurs nije neophodno prethodno programersko iskustvo.
Osnove CSS-a
Osnove CSS-a kreirao je W3Cx. Neke od tema koje se obrađuju na ovom kursu su; najbolje prakse u veb dizajnu, osnovni CSS selektori i izbor CSS svojstava. Kurs je podeljen u 5 modula, i potrebno je oko 5 nedelja da se završi ukoliko posvećujete 5-7 sati nedeljno učenju.
Uvod u CSS3
Ovaj kurs o CSS3 predstavlja kaskadne stilske listove. Kurs je pripremio Univerzitet u Mičigenu i podučava kako se pišu CSS pravila, uspostavljaju dobre programerske navike i testira kod. Potrebno je oko 12 sati za završetak ovog kursa, nakon čega dobijate sertifikat o završenom kursu.
Uvod u HTML i CSS
Ovaj uvodni kurs o HTML-u i CSS-u objašnjava kako da kreirate stilizovane i dobro strukturisane veb stranice koristeći HTML i CSS. Kurs podučava polaznike kako da kreiraju veb stranice pomoću strukture nalik stablu, a zatim ih stilizuju koristeći CSS.
Ovaj besplatni kurs je pogodan za početnike i koristi model učenja koji se prilagođava individualnom tempu. Potrebno je oko 3 nedelje da se završi ovaj kurs, koji predaju stručnjaci iz industrije.
CSS Tutorial
CSS Tutorial je besplatan kurs na W3schools. Kurs je podeljen na poglavlja kako bi se olakšalo razumevanje. Svako poglavlje sadrži primere i vežbe. Platforma ima interaktivni prostor gde možete eksperimentisati sa različitim konceptima preko dugmeta „Probajte sami“.
CSS: Definitivni vodič
Knjiga CSS: Definitivni vodič je korisna ako želite da naučite osnove CSS-a, od selektora i specifičnosti, do kaskada. Knjiga takođe detaljno opisuje flexbox, pozicioniranje i float trikove.
Ovu knjigu možete koristiti i ako želite da naučite kako da koristite CSS za kreiranje 2D i 3D transformacija, prelaza i animacija. Definitivni vodič je dostupan u Kindle verziji i u mekom povezu.
Prilagodljivi veb dizajn sa HTML5 i CSS
Ova knjiga o responzivnom veb dizajnu pomoću HTML5 i CSS objašnjava kako da kreirate prilagodljive veb lokacije koje su otporne na buduće promene, koristeći HTML5 i CSS.
Nakon što savladate veštine iz ove knjige, veb lokacije koje kreirate radiće besprekorno na računarima, tabletima i mobilnim telefonima. Knjiga je napisana u formatu koji je lako pratiti i dostupna je u mekom povezu i Kindle formatu.
HTML i CSS: Dizajniranje i izrada veb stranica
Ova knjiga o HTML-u i CSS-u idealna je za sve, bilo da ste hobista, student ili profesionalac.
Autor izlaže sadržaj ove knjige kroz informativnu grafiku i životne fotografije kako bi olakšao razumevanje različitih koncepata. Resurs je predstavljen u jedinstvenoj strukturi, što olakšava pregledanje svih poglavlja.
Modern CSS
Ova knjiga o modernom CSS-u: Savladajte ključne koncepte CSS-a za savremeni veb razvoj podučava CSS kroz primere koda, dijagrame i snimke ekrana.
U svojim prvim poglavljima knjiga predstavlja boje, birače, model kutije, kombinatore i specifičnosti. Zatim, knjiga uvodi stilizovani tekst, pozicioniranje, gradijente, okvire, Z-indeks i kontekste slaganja. Takođe ćete naučiti o naprednim temama kao što su prelazi, animacije, transformacije, flexbox i CSS mreže.
Završne reči
Uloga CSS-a u savremenim veb lokacijama je neizostavna. Osim što veb stranice čini vizuelno privlačnim, CSS olakšava navigaciju kroz različite veb stranice.
Učenje CSS-a može biti jednostavno ako koristite gore navedene resurse. Neki od ovih kurseva su besplatni, dok se drugi plaćaju.
Nakon toga, možete pogledati CSS varalice za programere i dizajnere.