Otázky HTML a CSS

inline elementy (span, i, input) sa daju zarovnat na stred pomocou text align. (stred rodica)
block musi mat specifikovanu sirku a zarovna sa s margin 0px auto.
reset.css alebo normalize oddeluj do samostatneho css. nemiesaj to do tvojho csska.
dalsia vec, pozri sa na syntax scss. lepsie spravis

na zaciatok je dobre to nemiesat.
ale cim je projekt vacsi, tym mas viac css suborov napr. kvoli jquery pluginom, a vtedy je dobre mat vysledne css v jednom subore, nech je co najmensi pocet requestov na server. na to sa pouziva bud obycajny 'concat' css suborov alebo pomocou import v scss.
lessik: ja som trosku skepticky ohladom scss pre zaciatocnika, ktory nepozna poriadne css, takze ja by som odporucal s tym este pockat

Prípadne môžeš použiť css @import, alebo môžeš použiť niečo, čo všetky css súbory spojí do jedného a minimalizuje ich, možností je viac.

Syntax scss je co davam do google a nic mi nenajde je to nejKe usporiadanie css ?

presne preto zacni s obycajnym css, k scss sa dostanes neskor
pre info hladaj: preprocessor sass

Nepozeraj Sass, hľadaj SCSS. Technicky ide zvyčajne o rovnaký program, syntax je ale iná. Rozdiel je v tom, že obyčajné CSS je zároveň aj správne SCSS, takže je jednoduché vziať aktuálny CSS súbor a pridať doň pár vecí, ako napr. sa pre farbu používanú na viacerých miestach urobí konštanta, takže sa bude meniť len na jednom mieste (pri Sass by sa to celé muselo prepisovať).

chrono: ano, len pre upresnenie. preprocesor sa nazyva sass, ktory pouziva dva rozne typy syntaxe - sass a scss. sass je stara verzia, o nej uz ani nie je vela popisane na webe. scss je nova verzia. a ci zadas sass alebo scss tak ti v podstate vyskocia vysledky so syntaxou pre 'scss'.

Ako povedal hatto, nemusis to hned pouzivat. Len je to lepsie a praktickejsie.
Dam ti tu taky priklad ako to funguje u nas vo firme.

Vsimni si nazvy .scss suborov. V main.scss @importujem .scss subory, tj. header, footer, navigation.scss etc.
Cize vlastne kazdy "prvok" na stranke ma svoj samostatny akoby "css" subor.
Tie sa nasledne skompiluju do jedneho CSS suboru, ktory tiez minimalizujem.

Ďakujem super. Akože budem pokračovať css ale časom keď budem na plno ovládať tak pojdme do tohto čiže ak som to spravne pochopil každa časť ma svoj súbor a tam je nastaveny vyzor napr header atd ze ?

Nie, môžeš použiť jeden súbor, prípadne to môžeš rozdeliť do viacerých.

Maju tie podjebniky na zaciatku menasuboru nejaky zvlastny účel?

Majú. Sass vytvorí css súbory pre všetky súbory, ktorých názov sa nezačína znakom _ (pri samotnom @import sa ani v takom prípade ten znak neuvádza)

Taketo css je dobre ? Mne to pride najviac prehladne doteraz co som robil.A nemam tam nejake chyby co by ste inak urobili ?

1. pre body a article by som nedaval fixnu sirku, 1200px na tablete ani mobile nepozres resp. sa ti to nebude dobre zobrazovat. takze v tychto pripadoch relativne jednotky - percenta.
2. do <article> by som nedaval v tomto pripade <div>. snaz sa to urobit bez neho. lebo ak to raz budes robit s textom, ktory sa bude pisat v administracii vo wysiwyg, tak <div> nemas medzi zakladnymi moznostani, to nie je element textu ale odiel stranky. takze snaz sa to nastylovat bez divov. logicky aj ani semanticky je ten kod ale ok.
a kvoli tomu ti vznikol aj opakujuci sa kod v css


bud to mozes urobit takto


alebo vyhodis tie first a second section a urobis toto:

alebo pouzit max-width pri pixeloch. A namiesto divov s classom section, by som dal element <section> nech to neni vsetko len div.

Ok urobim tam a chcem sa opytat hentake css je dobre ze nemusim davat kazdemu elementu class ?

Na tú otázku nie je jednoznačná odpoveď (pretože oba spôsoby majú výhody aj nevýhody).

to co napisal chrono, nie je jednoznacna odpoved.

ja preferujem pouzivat triedy a nie elementy. preco? lebo budem mat <h3>title</h3> a seo expert sa rozhodne ze to nemoze byt h3 ale len <p> tak treba menit aj css. ked to bude <h3 class="some-title">title</h3> a v css budem pouzivat iba triedy, tak, sa nestane nic ak zmenim na <p class="some-title">title</p>, fungujem dalej. alebo ked sa rozhodnom miesto viacerych div pouzit list elementov <ul><li>.. tiez nemusim menit css atd.

ale ked robit css pre text, ktory pochadza z wysiwyg, tak tam triedy (defaultne) nemas a je potrebne to robit na zaklade elementov.

ale vo vseobecnosti - triedami nic nepokazis, na to tam su.

Ludia je toto iste v css ?

Nie je (v niektorých prípadoch ale môže byť, záleží od HTML kódu).

sú všetky p elementy, ktoré sú priamym potomkom .class

sú prvé p elementy každej podskupiny elementov, ktoré sú, priamym, ale aj nepriamym, potomkom .class

Napr. pri kóde:
vyhovejú tomu .class>p elementy p1, p2 a p3 a .class p:first-child vyhovejú zase elementy p1, p4 a p7

Zdravím učím sa robiť stránky a snažím sa urobiť jednu stránku prikladám obrázok a zároveň aj kód ako som pokročil a mám pár otázok:
1.Ako by ste dali obrázok vy prečo keď ho vložím do section tak sa na neho neaplikuje 60%?
2.Prečo keď dám margin-right tak sa text neodtlačí z pravej strany.
3.Keď aplikujem margin-top: na .post-head tak sa neodtláča od vrchu.
4.Tu ľavú stranu by ste inač zapísali ?

1. preco by sa neaplikovalo tych 60%? (inak odporucam v tomto pripade dat obrazok ako display:block)
2. nema sa ti od coho odtlacat kedze nic nie je napravo. zrejme si chcel pouzit padding-right. (a nastuduj si ako funguje border-box ak chces aby si to zachovalo tych 60% aj s paddingom)
3. odtlaca, ale v tychto pripadoch hra svoju ulohu aj margin-bottom nadpisu, line-height a padding. v tomto pripade sa 'prekryva' margin-bottom toho h1 a margin-top p. ak das margin-bottom viac ako 15 tak uz vidis ze sa prejavuje (pravdupovediac neviem preco je to tak, mozno niekto tu to bude vediet vysvetlit)
4. nie je tam toho vela, takze nemas kde urobit chybu ale zrejme by som miesto <article> pouzil <main> alebo <section> kedze to obaluje celu hlavnu sekciu, a tam kde pouzivas <section> to by som dal ako <article> kedze to obaluje priamo clanok

Ďakujem tu časť v pravo mozem dat celu do aside a id='wraper' a potom floatovat ? A ak floatovat tak ako ? Aj to v lavo aj to v pravo float lefta dat im sirku aby sa zmestili vedla seba ? alebo jeden float left a druhy float right a dat im sirku aby sa zmestili ?

1. nie id ale class. v css sa treba ID vyhybat.
2. ja float nepouzivam takmer vobec, lebo potom treba riesit clearfix a podobne. da sa to krasne urobit pomocou display:inline-block alebo flexbox. float je primarne na to, aby si vedel nastavit obtekanie obrazkov v texte

Tak tu je môj výsledok je niečo čo by ste zmenili ? Ďakujem za rady ten float som pouzil ucim sa podla webrebela a tak teraz ta úloha bola zameraná na ten float hlavne .

Urobil som ďalšiu stránku podla predlohy. Sú veci ktoré by ste mi odporučili robiť inak respektívne čo robím zle.

nie je tam velmi co komentovat a radit ti. jedine co by si mohol poupravovat je html5 elementy.
preco halloween je section aj ked je to iba clanok? sekcia je nejaka vacsia cast stranky, ktora je je logicky prepojena. napr. v tvojom pripade by si mohol mat section articles-list (zoznam clankov). a v tej sekcie kazdy ten clanok je ako <article> a v tom article by som pouzil <header> pre nadpis a popripade datum alebo ine informacie a zase ten link by som vlozil do elementu footer.
sidebar mozes dat ako aside a potom aj ten header bude mat zmysel.
html5 elementy ako main,section, article, aside boli navrhnute tak aby si v nich mohol opat vytvarat logicku strukturu - header, main, article, footer.

ale samozrejme toto je iba zo semantickeho hladiska, fungovat to bude aj ked tam budu obycajne divy.

a este rada, nepouzivat v css elementy, ale iba triedy (pokial je to samozrejme mozne). lebo ak napr. kvoli seo bude potrebne zmenit article na div, h1 na p atd, tak nebudes musiet upravovat css kod ale iba html

Jaj tak je dobre používať aj veľa classov ? Lebo ako takto mi to príde prehľadnejšie než keď tam mam ku všetkému class ale tak zas dobre kvôli tomu seo. Ešte sa musím naučiť označovať classy ale to mi moc nejde nejako dávam tomu bar aké názvy

1. ano, na to su tie classy a mozes ich dat kolko chces ale realne viac ako 2-3 nepotrebujes.
2. "ale tak zas dobre kvôli tomu seo" => to si ma len zle pochopil ono to nie je kvoli seo, to som len uviedol priklad zo zivota, kedy je poziadavka na zmenenie typu elementu. so seo to v podstate nema nic
3. a ohladom pouzivania nazvov tried odporucam system BEM (http://getbem.com/introduction/). na fore su ludia, ktori su proti nemu, ale momentalne je to trend a povazuje sa to za najefektivnejsie. tiez sa k tomu priklanam a pouzivam ho. ale ci uz budes pouzivat tento system alebo vlastne pomenovania, vzdy je dobre tam mat nejaku logiku, aby ked niekto dostane tvoj projekt sa v tom vedel vyznat.

BEM je hlavne pre ľudí, ktorý si nevedia poradiť s css specifity (a problém obchádzajú tak, že používajú oveľa viac tried, ktoré robia viac-menej to isté, len sa volajú inak).

PS: Ak si sa nezačal zaoberať aj s "Css preprocessors/postprocessors", možno by bol vhodný čas sa tým začať zaoberať (momentálne asi Sass a pre budúcnosť pravdepodobne PostCSS).