Naučite CSS za 5 minuta - Vodič za početnike

Kratki vodič o dizajnerskom jeziku na webu.

CSS (Cascading Style Sheets) je ono što web stranice čini dobrima i prezentabilnima. To je važan dio modernog web razvoja i mora ga imati svaki web dizajner i programer.

U ovom ću vam članku dati kratki uvod koji će vam pomoći da započnete s CSS-om.

Pokrenuli smo i besplatni cjelovečernji CSS tečaj o Scrimbi. Kliknite ovdje da biste je provjerili.

Pretpostavljam da imate osnovno razumijevanje HTML-a, ali osim toga ne postoje preduvjeti za ovaj vodič.

Početak rada

Počnimo s učenjem kako možemo uključiti CSS u svoje projekte. To obično radimo na tri načina.

1. Ugrađeni CSS

Prvo, CSS možemo uključiti izravno u naše HTML elemente. Za to koristimo styleatribut, a zatim mu dajemo svojstva.

Hello world!

Ovdje mu dajemo svojstvo colori postavljamo vrijednost na blue, što rezultira sljedećim:

Također možemo postaviti više svojstava unutar styleoznake ako smo htjeli. Međutim, ne želim nastaviti tim putem, jer stvari postaju neuredne ako je naš HTML pretrpan s puno CSS-a.

Zbog toga je uvedena druga metoda koja uključuje CSS.

2. Interni CSS

Drugi način uključivanja CSS-a je upotreba styleelementa u headodjeljku HTML dokumenta. To se naziva unutarnjim oblikovanjem.

  h1 { color: blue; }   

U elementu stila možemo dodijeliti stil našim HTML elementima odabirom elemenata i pružiti atribute stila. Baš kao što smo primijenili colorsvojstvo na gornji h1element.

3. Vanjski CSS

Treći i najpreporučljiviji način uključivanja CSS-a je korištenje vanjske tablice stilova. Izrađujemo tablicu stilova s .cssproširenjem i uključujemo njegovu vezu u HTML dokument, poput ovog:

U gornji kod uključili smo vezu style.cssdatoteke pomoću linkelementa. Zatim svi CSS napišemo u zasebnu tablicu stilova koja se naziva style.csstako da se njime lako može upravljati.

h1 { color: blue; } 

Ta se tablica stilova također može uvoziti u druge HTMLdatoteke, pa je ovo izvrsno za ponovnu upotrebu.

CSS birači

Kao što smo ranije razgovarali, CSS je jezik dizajna koji se koristi za oblikovanje HTML elemenata. A da biste elemente oblikovali, prvo ih morate odabrati. Već ste vidjeli uvid u to kako to funkcionira, ali zaronimo malo dublje u CSS selektore i pogledajmo tri različita načina na koje možete odabrati HTML elemente.

1. Element

Prvi način za odabir HTML elementa je jednostavnim korištenjem imena, što smo i učinili gore. Pogledajmo kako to funkcionira:

h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } 

Gornji primjer gotovo je samorazumljiv. Mi smo odabirom različitih elemenata kao što su h1, p, divi daje im različite stilske atribute. U font-sizekontrolira veličinu teksta, colorpostavlja boju teksta i margindodaje razmak oko element.

2. Razred

Drugi način odabira HTML elemenata je pomoću atributa class. U HTML-u svojim elementima možemo dodijeliti različite razrede. Svaki element može imati više klasa, a svaki se razred može primijeniti i na više elemenata.

Pogledajmo na djelu:

This is heading

 .container { margin: 10px; } 

U gornjem kodu dodijelili smo klasu containerelementu div. U tabeli stilova odabiremo našu klasu koristeći .classNameformat i dajemo joj 10pxmarginu.

3. ID

Kao i klase, također možemo koristiti ID-ove za odabir HTML elemenata i primjenu stila na njih. Jedina razlika između klase i ID-a je ta što se jedan ID može dodijeliti samo jednom HTML elementu.

This is a paragraph

 #para1 { color: green; font-size: 16px; } 

Gornji primjer prikazuje kako dodijeljujemo ID elementu odlomka, a kasnije pomoću selektora ID-a u tablici stilova odabiremo odlomak i primjenjujemo stil na njega.

Fontovi i boje

CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:

1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)

2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)

For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS is Coooooool!!!!

.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; } 

As you can see in the above example, we have a div element with the class of container. Inside this div, there is an h1 tag with some text inside it.

In the stylesheet, we select the container class and set its width, height, background-color, and text-align.

Finally, we select the .heading1 class — which is applied to the h1 tag — and give it the attributes of font-family and color.

Conclusion

You might feel a bit overwhelmed by all this information, but don’t worry.

Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.