MANUEL RADOVANOVIĆ : Revolucija u veb dizajnu, CSS stilizovanje veb sajta

Malo je onih koji se sećaju polovinom 90tih, kako su izgledali veb sajtovi zasnovanim na tabelama i pretrpani sadržajem. Tad se tačno 17 septembra 1996 godine pojavio CSS - Cascading Style Sheets, jezik za formatiranje pomoću kog se definiše izgled elemenata stranice. Ali još bitnije, CSS je bio predstavljen kao način razdvajanja veb dizajna od sadržaja. Međutim, veb dizajneri nisu tu genijalnu promenu olako prihvatili i bile su potrebne godine da se CSS prihvati sve dok nisu videli šta se sve može postići na vizualnom planu veb sajta. Tek kod CSS verzije 3 je CSS u potpunosti prihvaćen. Što se tiče stariji pretraživača, oni jednostavno kada nalete na CSS3 parametre koje ne mogu obraditi, oni ih jednostavno preskoče. U prethodnom postu smo učili kako da dizajnirate veb stranice koristeći tagove. Takođe smo vas upoznali sa tagom span koji omogućava povezivanje stilova i stilizovanjem. Danas ćemo predstaviti početak rada sa CSS3-om. I pored toga što CSS3 ne možete naučiti kroz jedan post ili čak kroz celu knjigu jer CSS3 se uči praksom i godinama, ovaj post možete shvatiti kao uvod u CSS3 i učenje istog ćemo takođe nastaviti kroz sledeće postove HTML5 & CSS3 tutorijala. Za sada treba da upamtite da korišćenjem jezika CSS - Cascading Style Sheets je jedan od osnovnih načina za stilizovanje i formatiranje veb stranica. CSS3 omogućava odvajanje dizajna i izgleda veb stranice od njenog sadržaja i strukture, što olakšava održavanje i pruža veću fleksibilnost u prilagođavanju izgleda.

( CSS3 menja vizualni deo veb sajta, olakšava održavanje i pruža veću fleksibilnost )

Prvo vam predstavljamo nekoliko ključnih aspekata korišćenja CSS-a za stilizovanje sajta. To su:

Selektori - CSS koristi selektore da identifikuje HTML elemente koje želite stilizovati. Selektori se mogu bazirati na imenu elementa, klasama, ID-jevi ili drugim atributima elemenata.

Pravila - CSS pravila definišu kako odabrani elementi treba da izgledaju. Pravila se sastoje od svojstava, poput color – boja, font, margin – margina i vrednosti koje se dodeljuju tim svojstvima.

Kaskadiranje - osnovna osobina CSS-a je kaskadiranje, što znači da se više pravila može primeniti na isti element, a konačan izgled se određuje prema specifičnosti selektora i redosledu pravila.

Box model - CSS definiše box model za svaki HTML element, što uključuje marginu, padding, border i sam sadržaj elementa. Ovo omogućava precizno upravljanje prostorom i pozicioniranjem elemenata.

Responzivnost - CSS omogućava izradu responzivnog veb dizajna, prilagodljivih različitim veličinama ekrana, uređajima i orijentacijama.

Pseudo-elementi i pseudo-klase - CSS omogućava stilizovanje posebnih stanja elemenata, kao što su hover, to je događaj kad korisnik pređe mišem preko elementa ili active, to je događaj kad korisnik pritisne element.

Klase i ID-jevi – oni omogućavaju ciljanje specifičnih grupa elemenata ili pojedinačnih elemenata, omogućavajući precizno stilizovanje.

Eksterni i ugrađeni stilovi - CSS pravila se mogu definisati unutar samih HTML datoteka, u zaglavljima <style> odeljaka, ili se mogu držati u eksternim CSS datotekama koje se povezuju sa HTML dokumentima.

CSS prelazi - ovo je tehnika koja omogućava postupno prelazak između različitih stilova, npr. za animacije ili tranzicije.

Fleksibilnost i modularnost - CSS omogućava dizajnerima da kreiraju različite slojeve stila i primenjuju ih na različite delove sajta, što olakšava održavanje i skaliranje.

U suštini, CSS je ključan alat za oblikovanje i stilizovanje veb stranica tako da one izgledaju vizualno atraktivno i funkcionalno. I korak po korak ćete savladati stilizovanje najbolje kroz višegodišnju praksu.

Kreiranje stilova na nivou veb stranice

Stilovi se primenjuju na različite načine kako bi se postigao željeni dizajn i izgled web stranice, pružajući veću fleksibilnost i kontrolu nad prezentacijom sadržaja. Međutim, ponekad se javlja potreba da se kreira manja stilizacija koja treba da utiče samo na određenu stranicu, a da se ne odražava na drugim stranicama unutar istog veb sajta. U takvim situacijama, koristi se <style></style> element u "head" sekciji vaše veb stranice kako bi se definisao ovaj jedinstveni stil. Bez obzira na prirodu promena koje vaša stilizacija donosi, one će ostati izolovane i neće uticati na druge stranice unutar vašeg veb sajta. Ova vrsta stilizacije se stoga naziva "stilizacija na nivou veb stranice". U praksi će vam to biti mnogo jasnije. Zato pokrenite Visual Studio Code ili IDE – integrisano radno okruženje, otvorite projekat html_css_tutorial i kreirajte novi fajl lesson7.html . Takođe, u istom projektu kreirajte novi direktorijum i nazovite ga images. Zatim pronađite neku od vaših omiljenih slika u vašem računaru i prebacite jednu sliku u vaš direktorijum images. Ja ću u ovom primeru koristiti sliku mog koker španijela i naziv slike će biti leo1.jpg . Zatim unesite ovaj kôd u fajl lesson7.jpg . Naravno promenite naziv slike sa nazivom vaše slike koju koristite u ovom projektu.

<!DOCTYPE html>

<head>

<title>Creating Page-level Styles</title>

<style>

/* Styling for the whole page */

body {

font-family: Arial, Helvetica, sans-serif;

background-color: #f0f0f0;

margin: 0;

padding: 0;

}

/* Styling for the title */

h1 {

color: #333;

text-align: center;

padding: 20px;

}

/* Styling for a paragraph */

p {

font-size: 18px;

line-height: 1.6;

margin: 0 20px;

}

/* Styling for links */

a {

color: #007bff;

text-decoration: none;

}

/* Styling for the links on mouseover */

a:hover {

text-decoration: underline;

}

/* Styling for the image */

img {

max-width: 100%;

height: auto;

display: block;

margin: 20px auto;

}

</style>

</head>

<body>

<h1>Creating Page-Level Styles</h1>

<p>

This is an example of an HTML5 document with web page-level styling using CSS.

You can <a href="https://www.manuelradovanovic.com">click here</a> for more information.

</p>

</body>

</html>

Kad pokrenete ovu stranicu na serveru rezultat će biti sličan sledećoj slici u zavisnosti od vase slike u projektu.

( Kreiranje stilova na nivou veb stranice, se ne preporučuje u praksi )

Ovaj primer isto možete pogledati u sledećem video-u.

( HTML5 & CSS3 - 7. Creating Page Level Styles )

Kreiranje stilova na nivou veb sajta

U suprotnosti sa prethodnim primerom, postoji jedna dobra praksa kada je u pitanju stilizovanje veb stranica, a to je da stilizaciju treba raditi na nivou celog veb sajta, posebno ako radite na velikim projektima. Ovo se postiže tako što ćete svoje stilove smestiti u posebnu datoteku sa ekstenzijom *.css. Zatim, umesto da iste stilove uključujete direktno u svaku pojedinačnu veb stranicu, dovoljno je da tu CSS datoteku pozovete ili povežete sa svakom stranicom na kojoj želite primeniti stilizaciju. Ovaj pristup ima nekoliko prednosti.

Prvo, omogućava vam da stilove centralizujete na jednom mestu, što znači da sve promene ili dopune koje želite da napravite u vezi sa dizajnom stranica mogu biti obavljene samo u toj jednoj CSS datoteci. Ovo čini održavanje i upravljanje stilovima mnogo lakšim i efikasnijim, posebno kada imate mnogo različitih stranica u projektu.

Drugo, ovaj pristup može poboljšati brzinu učitavanja veb stranica jer se CSS datoteka obično kešira u memoriji pregledača nakon prvog učitavanja. To znači da će se isti stilovi koristiti na svim stranicama koje pozivaju tu CSS datoteku, umesto da se stilovi ponovno učitavaju svaki put.

U suštini, centralizovanje stilova u posebnoj CSS datoteci čini proces razvoja veb stranica efikasnijim, olakšava održavanje i poboljšava brzinu učitavanja. To je posebno korisno za veće projekte gde je konzistentnost i efikasnost ključna. Dodajte našem projektu novi fajl i nazovite ga lesson8.html. Zatim, unesite sledeći kôd.

<!DOCTYPE html>

<head>

<title>Creating Site-Level Styles</title>

</head>

<body>

<h1>Creating Site-Level Styles</h1>

<nav>

<ul>

<li><a href="#">Services</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<h2>About us</h2>

<p>We are learning HTML5 and CSS3...</p>

</section>

<h2>Services</h2>

<ul>

<li>Web Design</li>

<li>SEO Optimization</li>

<li>Responsive Design</li>

</ul>

</section>

</footer>

</body>

</html>

Kreirajte novi direktorijum u vašem projektu i nazovite ga css. Zatim kreirajte novi fajl u njemu i nazovite ga styles1.css. Unesite sledeći CSS kôd.

/* Resetting styles */

body, h1, h2, h3, p, ul, li {

margin: 0;

padding: 0;

}

/* Styling for the body of the page */

body {

font-family: Arial, Helvetica, sans-serif;

background-color: #f0f0f0;

}

/* Styling for the header */

header {

background-color: #333;

color: white;

padding: 20px;

text-align: center;

}

/* Styling for the navigation */

nav ul {

list-style: none;

display: flex;

justify-content: center;

margin-top: 10px;

}

nav li {

margin: 0 15px;

}

nav a {

color: white;

text-decoration: none;

}

/* Styling for the sections */

section {

padding: 30px;

margin: 20px;

background-color: white;

box-shadow: 0 2px 4px rgba(0, 0, 0.1);

}

/* Styling for the footer */

footer {

background-color: #333;

color:white;

text-align: center;

padding: 10px;

}

Kad pokrenete ovu stranicu na serveru rezultat će biti sledeći.

( Koristeći stilizaciju u CSS fajlovima, vi omogućavate stilizaciju na nivou celog veb sajta)

Ovaj primer možete pogledati u sledećem video-u.

( HTML5 & CSS3 - 8. Creating Site Level Styles )

Selektori u CSS-u

Selektori su ključni alat za pravilno stilizovanje i dizajniranje web stranica, omogućavajući preciznu kontrolu nad izgledom elemenata na stranici. Kombinacijom HTML5 i CSS3 selektora, veb dizajneri mogu postići željeni estetski izgled i funkcionalnost svojih veb stranica. Oni su ključni elementi koji omogućavaju dizajniranje i stilizovanje veb stranica. Oni igraju ključnu ulogu u definisanju koje HTML5 elemente treba stilizovati i kako će oni izgledati. Ovi selektori se obično koriste u kombinaciji sa CSS-om kako bi se postigli određeni stilski efekti. Kreirajte novi fajl u projektu i nazovite ga lesson9.html. Unesite sledeći kôd.

<!DOCTYPE html>

<head>

<title>Selectors in CSS</title>

</head>

<body>

<h1>Selectors in CSS</h1>

<p>

This is the text inside a div element with the container class.

</p>

</div>

<p>This is a regular paragraph outside the container.</p>

<h2>A class and an identifier</h2>

<p class="highlight">This is an example of text with the highlight class.</p>

<p id="special">This is an example of text with the identifier special</p>

</body>

</html>

U direktorijumu css kreirajte novi fajl i nazovite ga styles2.css. Unesite sledeći CSS kôd.

/* Style for the title */

h1 {

color: blue;

font-size: 24px;

}

/* Style for the class highlight */

.highlight {

background-color: yellow;

font-weight: bold;

}

/* Style for the container with class container */

.container {

border: 2px solid gray;

padding: 10px;

}

/* Context selector - style for <p> inside .container */

.container p {

font-style: italic;

}

/* Context selector - style for <p> outside .container */

p {

color: green;

}

/* Style for the identifier special */

#special {

color: green;

font-style: italic;

}

Kad pokrenete ovu stranicu na serveru rezultat će biti sledeći.

( Selektori omogućavaju pravilno stilizovanje i dizajniranje veb sajta )

Ovaj primer možete pogledati u sledećem video-u.

( HTML5 & CSS3 - 9. Selectors in CSS )

Merne jedinice

U HTML-u merne jedinice se koriste kako bi se odredila veličina i pozicija elemenata na veb stranici. Dolaskom HTML5 i CSS3 na scenu; uvodi se nekoliko različitih mernih jedinica koje omogućavaju veći nivo fleksibilnosti i prilagodljivosti u odnosu na prethodne verzije HTML-a. Merne jedinice se često kombinuju kako bi se postigla željena postavka elemenata na veb stranici. Važno je napomenuti da je pravilno korišćenje odgovarajućih mernih jedinica ključno za postizanje željenog dizajna i responzivnosti veb stranice na različitim uređajima. Pogledajte merne jedinice koje se koriste u HTML5.

( Merne jedince u HTML5 )

Kreirajte novi fajl u našem projektu i nazovite ga lesson10.html. Unesite sledeći kôd.

<!DOCTYPE html>

<head>

<title>Measurement units</title>

</head>

<body>

<h1>Measurement units</h1>

<p>Box with different sizes</p>

</div>

</body>

</html>

U direktorijumu css kreirajte novi fajl i nazovite ga styles3.css. Unesite sledeći CSS kôd.

/* Style for the title */

h1 {

color: blue;

}

/* Style for .box */

.box {

width: 200px;

height: 150px;

background-color: yellow;

border: 2px solid red;

margin: 20px;

padding: 10px;

font-size: 16px;

line-height: 1.5;

}

Kad pokrenete ovu stranicu na serveru rezultat će biti sledeći.

( Merne jedinice u HTML5 su ključne za pozicioniranje )

Ovaj primer možete pogledati u sledećem video-u.

( HTML5 & CSS3 - 10. Measurement Units )

Određivanje boja u CSS-u

Boje su neizostavan deo svake veb stranice. One ne samo što doprinose estetici dizajna, već igraju ključnu ulogu u komunikaciji sa posetiocima. U CSS-u postoji nekoliko načina da se odrede boje koje će se koristiti za tekst, pozadine, granice i druge elemente web stranice. Odabir prave boje za vašu veb stranicu zavisi od vaših ciljeva, brenda i estetike. Razumevanje različitih načina za određivanje boja u CSS-u omogućava vam veću fleksibilnost i kontrolu nad izgledom vaše veb stranice. Kombinovanjem ovih tehnika možete postići željeni vizuelni efekat i privući pažnju posetilaca. U sledećem primeru ćemo istražiti neke od osnovnih tehnika za određivanje boja u CSS-u . Kreirajte novi fajl u našem projektu i nazovite ga lesson11.html. Unesite sledeći kôd.

<!DOCTYPE html>

<head>

<title>Specifying colors in CSS</title>

</head>

<body>

<h1>Specifying colors in CSS</h1>

<div class="color-box named">Named colors</div>

<div class="color-box hex">Hexadecimal code</div>

<div class="color-box rgb">RGB values</div>

</body>

</html>

U direktorijumu css kreirajte novi fajl i nazovite ga styles4.css. Unesite sledeći CSS kôd.

/* Style for the title */

h1 {

color: blue;

}

/* Style for .color-box */

.color-box {

width: 150px;

height: 150px;

margin: 20px;

padding: 10px;

text-align: center;

font-size: 18px;

line-height: 1.5;

border: 2px solid black

}

/* Named colors */

.named {

background-color: red;

color: white;

}

/* Hexadecimal code */

.hex {

background-color: #00cc66;

color: white;

}

/* RGB values */

.rgb {

background-color: rgb(0, 102, 204);

color: white;

}

Kad pokrenete ovu stranicu na serveru rezultat će biti sledeći.

( Određivanje boja u CSS-u )

Ovaj primer možete pogledati u sledećem video-u.

( HTML5 & CSS3 - 11. Specifying Colors in CSS )

Određivanje boje linkova u CSS-u

Boje linkova su važan dizajnerski element na web stranicama, jer pomažu posetiocima da prepoznaju interaktivne delove sadržaja. U CSS-u, možete precizno kontrolisati boje linkova na svojoj veb stranici koristeći različite CSS svojstva. Određivanje boja linkova uCSS-u omogućava vam veću kontrolu nad izgledom vaše veb stranice i pomaže posetiocima da bolje razumeju interaktivne elemente. Pravilno stilizovanje linkova može poboljšati korisničko iskustvo i doprineti estetici vaše veb stranice. Kreirajte novi fajl u našem projektu i nazovite ga lesson12.html. Unesite sledeći kôd.

<!DOCTYPE html>

<head>