[Musik spiller] ALLISON Buchholtz-AU: So vi dybest set bare at give dig en nedtrapning af CSS, fordi vi ved, at det ikke var omfattet i alle sektionerne. Og vi virkelig ønsker at sikre, at du fyre har dette værktøj til din rådighed, fordi det har evnen til at gøre dine hjemmesider ser meget pænere. 

Og hvis du bygger en hjemmeside, så du sikkert ønsker at gøre det temmelig. Jeg mener, behøver du ikke at, men jeg vil foreslå det. [Griner] Hvis du vil have brugere til at bruge det, kan du ønsker at gøre det lidt [uhørligt]. Så vi vil forsøge at give dig lige nogle grundlæggende værktøjer og forståelse, så når du går ud og du er forske ting om CSS, det er ikke komplet volapyk, ligesom CSS undertiden at være. 

TOMAS REIMERS: Ja. Allison sagde, at det ganske godt. Så jeg gætte det første, vi bør starte med er det, der er CSS? Så CSS er awesome. CSS-- 

ALLISON Buchholtz-AU: Det er navnet på vores seminar. 

TOMAS REIMERS: Ja. Det er virkelig vigtigt, at du forstår, at den tid. Hvis du kun tage væk en ting, er det, at CSS hvis awesome. To er CSS står for Cascading Style Sheets. Så på sin kerne, CSS er et typografiark, hvilket betyder det giver dig mulighed for at style en webside. Og så, hvad det betyder, er det en måde at tilføje stil til dine hjemmesider. Så ved stil, mener vi alt det er ikke structural-- så ting som farver, baggrund billeder, grænser, ligesom, polstring, marginer. Vi taler om, hvad alt, betyder en smule. 

Så vi har lige gået videre og åbnede både af dem op i gedit. Så dette er index.html. Og det er main.css. Så main.css har intet. ALLISON Buchholtz-AU: Ingen stil hidtil. TOMAS REIMERS: Ingen. Og som du kan se, er det en virkelig grim site. ALLISON Buchholtz-AU: Det er bare almindelig. TOMAS REIMERS: Ja. Ja, det er ikke grim, det er bare minimalistisk. Og så har vi her index.html. Og så for en hurtig resumé af HTML, Allison, du vil bare tale om siden? 

ALLISON Buchholtz-AU: Ja. Så selvfølgelig har vi vores HTML tag, som netop navne HTML-fil. Vi har vores header her, med CSS Awesomeness, which-- hvis du går tilbage. Hvor er det? 

TOMAS REIMERS: Oh. Ja, du kan se. ALLISON Buchholtz-AU: Og bemærk header er denne fane header lige heroppe. Og så "Hello, world!" er den tekst, vi har bare visning på nettet side, som is-- gå tilbage. Back. Som er lige i vores krop her-- den almindelig tekst. Også en ting at mærke til, hvis man ser her, Tomas slås op disse to fra vores dias. Så så længe du har alle tre af disse, er du fint. De kan være i denne rækkefølge, de ønsker. Hvad er vigtigst er bare, at du har hver af disse tre ting. 

TOMAS REIMERS: Cool. Tilføj en doc type? ALLISON Buchholtz-AU: Ja. TOMAS REIMERS: Ja. Cool. ALLISON Buchholtz-AU: Tilsyneladende, mine mikrofoner kan ikke lide mig. TOMAS REIMERS: Åh, giv os et sekund bare mens Allison skifter hendes mikrofon. Så ja. Så vi har vores hovedside. Det er lidt unstyled. Vi har ikke meget. Vi skal bare dybest set tekst. Vi har typografiark. Vi har titlen. Så bare bare-udbenet komponenter gør en hjemmeside. 

Så derfra, lad os taler om, hvad CSS er og hvordan den ser ud, og alt dette. Så for at-- ALLISON Buchholtz-AU: Tilbage til dias. TOMAS REIMERS: Tilbage til dias. Og Allison kan tage over. 

ALLISON Buchholtz-AU: Woo. OK. Så i din CSS-fil, du kommer til at have en masse af disse ting kaldet selektorer. Det vil bare være det baggrund af din CSS-fil. Det er bare kommer til at være masser og masser af disse. Så vælgeren. Dette er blot den generelle anatomi. Vi kommer til at gå gennem eksempler, for hvis du fyre aldrig så min afdeling, jeg føler ligesom ting i det abstrakte ikke rigtig mening. Det hjælper altid at se eksemplerne. 

Så vi har nogle vælgeren. Det kommer til at være nogle identifikator for hvad vi ønsker den stil at gælde for. Og så kan vi have nogen sæt regler og værdier. Så vælgere, som du måske se kunne være noget i retning af kroppen, eller afsnit med P, eller header, eller hvad, hvad du vil have dine HTML-tags til at være. 

Så i dette tilfælde har vi krop. Og vi har nogle regel, som svarer til hvad din stil refererer til. Så i dette tilfælde, har vi baggrundsfarve og skrifttype vægt. Så dette vil ændre på baggrund af noget indenfor ethvert organ tag i vores HTML-fil. Og det vil give det på denne lyseblå værdi. 

Så det kommer til at gøre det baggrund lyseblå. Og derefter noget i kroppen er vil have en skrifttype vægt fed. Så det er bare at gå til fed alle vores tekst. Og dette er blot en vælgeren. Men du kunne have meget mange af disse. Og da vi kommer til at vise senere, en lille smule mere i, hvordan at værker og flere eksempler der. Noget du vil tilføje? 

TOMAS REIMERS: Nej. Allison fik det. Vi bare at skære op en eksempel her på vores eksempel site. Så lad os faktisk tage dette. Det er perfekt. Så jeg bare at kopiere og indsætte denne ret ind i vores main.css fil. Og jeg har tænkt mig at gemme det. Og så vil vi køre den. Så side bemærkning, en af ​​de mest frustrerende ting er, hvis du ikke gemme en fil, og så du, ligesom, genindlæse siden, og lignende, hvorfor ikke ændringen sker der? Det sker. Så her er vi så, at vi gjorde vores hjemmeside en lyseblå baggrund og nogle fed tekst. 

Jeg bør også nævne, hvis du fyre har spørgsmål om noget vi laver, er du velkommen fri til at stoppe os og bede os. Vi er helt villige til felt spørgsmål. 

ALLISON Buchholtz-AU: Det er klart, med CSS, alt bygger på sig selv. Så hvis en ting ikke giver mening nu, vi ønsker ikke at for at mose dig ned senere. 

TOMAS REIMERS: Så lad os slags dissekere dette. Så du ønsker at starte med vælgeren her? 

ALLISON Buchholtz-AU: Ja. Som jeg sagde før, krop er blot vores selector her. Så hvis vi går tilbage over til vores index-- ah. 

TOMAS REIMERS: Hvilket jeg lige lukket. Giv mig et sekund. Så Filer, Åbn, index.html. ALLISON Buchholtz-AU: Cool. Så hvis du bemærker her, vi have disse krop tags, ikke? Så vælgeren blot svarer til de mærker, vi taler om. Så kroppen lige her. Så det, vi siger, er everything-- kan vi gå tilbage? Jeg ville ønske, jeg kunne bare Ligesom trykke på skærmen. Det ville være så meget køligere. 

Så noget inden de body tags, som vi så var bare, ligesom den tekst, og kroppen i almindelighed henviser til, ligesom, baggrunden. Hvis du nogensinde ønsker at ændre baggrunden, der kommer til at være i en krop tag. Bare har disse regler, der gælder for dem. 

Så hvis vi skulle gå til index.html og-- faktisk, kan vi få noget uden for kroppen? Hvis vi havde, ligesom, en sidefod eller noget, ville det ikke for dette. Men noget inden disse krop tags går at blive påvirket af dette organ vælgeren, som vi har lavet. Så hvis du skulle skrive noget andet there-- 

TOMAS REIMERS: Lad os køre den hjem. Så hvis vi havde en div-- så det er bare en anden tag, du kan have. Jeg har tænkt mig at lukke den. Eller lad os gøre dette et afsnit. Så p står for stykke. Og inden for det pågældende stykke. Og så siger jeg: "Det er tekst." Cool. Og så lavede jeg denne regel gælder for et afsnit i stedet for kroppen. Du vil se, hvordan det gælder kun for den nydannede stykke, højre, ikke det hele. Giver det mening? 

ALLISON Buchholtz-AU: Så dette er alle kroppen, men nu vores selector bare svarer til afsnittet. Så vi skal bare fed og blå for denne specifikke stykke, fordi det er den eneste der er indesluttet i p tag. 

TOMAS REIMERS: Giver det mening sortere af, hvordan tingene indkapsler andre ting? ALLISON Buchholtz-AU: Også bare sige, ligesom, en af ​​de bedste måder til virkelig blive fortrolig med CSS er at bare gøre ting som dette, bare prøve det. Det er meget simpelt at skrive noget ud, ramte Refresh, og se hvad der sker. Og som med de fleste CS, eksperimentering kan ofte føre til en meget bedre intuitiv forståelse. Endnu mere så end os bare, lignende, taler til dig. 

TOMAS REIMERS: Absolut 100% enige på dette punkt. Så hvis vi gå tilbage til dette, lad os starte dissekere præcis, hvad disse to gør. Så vi har to regler herom. Så den første er baggrundsfarve. Og du kan se, at vi har sat det svarende til en værdi, lyseblå. 

Så i CSS, CSS er sortering meget løs om, hvordan du får lov til at definere farver. Så du kan definere dem ved navn. Du kan også gøre noget lignende "red." Og så hvis vi går tilbage til dette, vil du se, at baggrunden er rød. Du kan også få really-- Jeg tror, ​​du kan få temmelig kreativ med dette, kan du ikke? 

ALLISON Buchholtz-AU: Jeg tror, ​​du kan bruge hex. Kan du ikke? 

TOMAS REIMERS: Ja. Så du kan bruge hex. Men jeg tænker navn-wise. Er der ikke? ALLISON Buchholtz-AU: Du kan gøre en hel del. Temmelig meget ligesom de fleste farver, som du kan name-- ligesom, jeg tror laks er én. 

TOMAS REIMERS: Vi skal prøve laks. ALLISON Buchholtz-AU: Jeg tror chartreuse er derinde. TOMAS REIMERS: Ja. Se? Så du kan få temmelig kreative. 

ALLISON Buchholtz-AU: Du kunne få temmelig kreative. Ligesom, hvis du kan tænke på farve navn, er det sandsynligvis i der. Hvis du virkelig ønsker fint detalje, kan du gå hex. 

TOMAS REIMERS: Ja. Så hexadecimal. Hvis du fyre huske denne tilbage fra din gamle Pset, Image Recover, du fyre skulle beskæftige disse hex værdier. Og slags at opsummere, hvad det er, hex har tre værdier, der er gemt i den. Så det er i grupper på to trin. De to første repræsenterer rød værdi. Den anden repræsenterer den grønne værdi. Og den sidste er blå? 

Så FF sker at repræsentere en hexadecimal 255. Så du har 255 rød, 255 grøn, og 0 for blå. Og værdier mellem 0 og 255. 

PUBLIKUM: Right. Så det væsentlige, kunne vi søge internettet for alle farver, vi ønsker, og identificere de faktisk kendte farvespektrum combo, og så kunne vi sætte det i? ALLISON Buchholtz-AU: Præcis. Så du har temmelig meget fuld kontrol i løbet af de farver, du ønsker inden for CSS. Skal vi til at tale om baggrundsbilleder senere? Eller ønsker vi at gøre det? 

TOMAS REIMERS: Ja. Absolut. Så først, bare for at vise, at rød og grøn er gul. Og hvis du har brug for nogle hjælp til at finde det, du kan Google noget lignende "farvevælgeren." ALLISON Buchholtz-AU: Åh, det er så godt. Jeg elsker Farvevælger. 

TOMAS REIMERS: colorpicker.com er et godt eksempel. Og her, vil du se, at du har en fuld Photoshop-lignende farvevælgeren. 

ALLISON Buchholtz-AU: Mm-hm. Også de smarte ting er du kan generere farvesammensætninger så du ikke behøver, lignende, modstridende farver. TOMAS REIMERS: Og så her er hexkoden heroppe. Så du kan altid finde online dybest set steder at få hexkoden fra. Det er ikke slags, der bare, ligesom, vi se farverne i verden i antal. Det er mere, at vi går online og finde, hvad farve vi ønsker, og derefter tage nummeret ned. Fordi det er bare en rigtig nem måde at referere tingene i CS. 

ALLISON Buchholtz-AU: Og så er der also-- Jeg glemmer det nøjagtige navn på webstedet. Men der er helt sikkert, jeg tror, ​​noget fra Adobe der genererer farveskemaer for dig, der er virkelig cool, fordi du definitely-- det nogle gange svært at regne ud, Åh, hvis jeg ønsker at bruge denne farve, hvad der kunne være en anden nyttig én at bruge et andet sted på min side til, lignende, gør det rart og sammenhængende. 

TOMAS REIMERS: Allison taler om én af Adobe kaldet Kuler, tror jeg. Det er K-U-L-E-R. ALLISON Buchholtz-AU: det tror jeg. Jeg er temmelig sikker på det er den ene. 

TOMAS REIMERS: Min favorit har altid været Color Scheme Designer. 

ALLISON Buchholtz-AU: Ooh. 

TOMAS REIMERS: Hvilken er nu-- 

ALLISON Buchholtz-AU: Ah, det er smukt. 

TOMAS REIMERS: Og du kan stort set sige, ligesom, Jeg vil tre farver ved siden af ​​hinanden. Og så lad os gøre noget rart. Og så kan du få et eksempel af, hvad der kunne se ud. Og så hvis du holder markøren over et af dem, det giver dig hexkoden. 

Så lige som en god måde at starte tænker farveskemaer eller hvilke farver i en hjemmeside kan gå godt sammen. Fordi det kan være overraskende ikke så nemt at samle, som du tror. Og så den anden cool ting Jeg har altid fundet om dette websted er, hvis du rammer Eksempler, det vil vise, hvad et eksempel website kan se ud ved hjælp af denne farveskema. Anyway. 

Tilbage til den faktiske CSS. ALLISON Buchholtz-AU: Men selvfølgelig, vi kender disse referencer kan være nyttigt. TOMAS REIMERS: Nej, de absolut kan være nyttig. Så den anden regel, Allison? 

ALLISON Buchholtz-AU: Ja. Den anden regel er bare svarende til vores skrifttype. Så tekstvægt er bare lidt of-- så vægten ville være, hvis du vil bare, ligesom, normalt eller lignende, tyndere skrifttyper, eller i dette tilfælde, ligesom, fed. Jeg glemmer. Hvad er det, hvis du ønskede det-- er der en tyndere en end bare, ligesom, normalt? TOMAS REIMERS: Jeg faktisk ikke vide, om der er en tyndere én. ALLISON Buchholtz-AU: Jeg glemmer. Så tekstvægt vi typisk bare bruge for fed. Hvis du ønsker at få virkelig ind det, vi vil vise dig. W3Schools har alle de forskellige ting, du kan gøre for skrifttyper. Men dybest set, hvis du nogensinde ønsker at ændre noget om skrifttype, det altid vil være, lignende, font-noget. Så det vil være ligesom, font-family, hvis du er forsøger at ændre den faktiske type. Det bliver font-style, hvis du ønsker at gøre det ligesom skråskrift, eller kursiv eller whatnot. Eller endda font-farve, hvis vi ønskede at ændre det. 

TOMAS REIMERS: Yup. Så du kan ændre det. Og slags bare for at resumé nu, så du kan se, at vi har vælgeren heroppe. Vi har disse krøllede parenteser. Og så har vi regler afgrænset af semikoloner. Giver det mening? Ja? Cool. Så hvis det er god-- 

ALLISON Buchholtz-AU: Back. TOMAS REIMERS: Lad os tale specifikt om, hvad slags vælgere vi har. Fordi lige nu har vi slags netop vist tags. Men du fyre kunne se det plausibelt. Sige du har to stykker på en side, og du ønsker at være i stand til at style én, men ikke den anden, du ikke bare ønsker at begrænse dig selv at skulle bruge forskellige faktiske HTML tags til at give dem forskellige stilarter. 

Så vi har tre grundlæggende typer af selektorer. ALLISON Buchholtz-AU: Ja. Så vi har tag, hvilket er, hvad vi har talt om lige nu. Så det er lidt ligesom din krop eller p. Og så har vi klasse, som er når vi definerer det i vores CSS-fil, det altid vil være dot, uanset du vil have navnet på din klasse til at være. Og det kan anvendes på flere ting. 

Sig du har fem stykker og to af de tre af dem skal stylet samme, du vil anvende en klasse for det. Og det er bare den måde, vi gør det. Vi vil give dig et eksempel på hvor dette rent faktisk dukker op. Men hvis du havde måske nogle tag p, efter det, ville du skrive, klasse lig uanset klasser du vil anvende på den. Så uanset klasse selektorer, vi ønsker at gælde for denne specifikke stykke, vi kunne bare skrive sådan. Selvfølgelig, jeg tror et eksempel vil gøre det meget mere konkret. 

Den anden har vi er id, som vi betegner med en hash eller pund eller hashtag. TOMAS REIMERS: Octothorpe. ALLISON Buchholtz-AU: Octothorpe. Det virker også. Og dette bør virkelig være unik. De bør kun gælde for én ting på din side. Så uanset om det er et særligt punkt, eller nogle punkt på en liste, eller hvad, dette skal være unikt. Og på samme måde, som vi netop sige, ligesom, class = "Class1 Class2," dette kan bare være id af hvad vi har. TOMAS REIMERS: Ja. Så lad os helt sikkert tale om eksempler her. Og jeg bare at dykke lige tilbage i koden. Så lad os se på vores HTML. Og så vi lige nu har et afsnit. Dette er tekst. Jeg bare at ændre det. "Dette er tekst 1." Og så vil vi har en "Dette er tekst 2." 

ALLISON Buchholtz-AU: andet. TOMAS REIMERS: Yup. Så vi har nu "Dette er tekst 2," ikke? Og vi kommer til at se, at hvis vi genindlæse siden, hvad vi vil finde er vi skal find-- ALLISON Buchholtz-AU: Ooh. TOMAS REIMERS: Ja. Vi skal finde en "Dette er tekst 1 "og" Dette er tekst 2. " 

ALLISON Buchholtz-AU: Og ud dejlig gul farve. 

TOMAS REIMERS: Og du vil se at vores selector lige nu, som gælder for P'er, eller stykker, påvirker dem begge, fordi de begge opfylder betingelse, at de er både et p tag. Det gør den samlede mening. Så spørgsmålet er, godt, hvad hvis vi ønskede at kun få en? Så præcis som Allison sagde, vi har to andre måder at gøre det. Jeg har tænkt mig at starte med id. 

ALLISON Buchholtz-AU: Lad os starte med id. 

TOMAS REIMERS: Og begge af disse er attributter. Så egenskaber eksisterer i HTML. Og hvad de er, er noget, som du tilføjer inde i tag, som er adskilt fra tag navn. Så du kan have flere egenskaber. Ja? 

ALLISON Buchholtz-AU: Jeg skulle lige at sige, fra dit eksempel fra Pset 7, hvis nogen af ​​jer forsøger at tilpasse ting til centrum, du måske har brugt "Tekst align = center." Og du bemærket det sandsynligvis skulle have centreret din tekst eller dit navigationslinje. Så det er bare også en attribut at du kan være bekendt med. TOMAS REIMERS: Der er en masse af attributter, som du vil se. Ja. Ligesom god reference til Pset 7. Vi har id. Du kan også have klasse, ting som dette. En enkelt tag kan have mange egenskaber. Så starter med id, lad os lade som om vi ønsker at have et id of-- jeg ikke kender. Vi kalder det særlige, fordi denne ene, vi er vil gøre fed, og understrege, og uanset hvad. ALLISON Buchholtz-AU: Det er gonna være super speciel. TOMAS REIMERS: Så det en, har vi id særligt. Så den måde at vælge det, så er i main.css, snarere end at have en p tag, du gør #special, OK? Og det vælger ting med id særligt. Betyder det give mening for alle? PUBLIKUM: Ja. TOMAS REIMERS: Cool. Så nu, hvis vi går tilbage, vi see-- hovsa. Ja. Vi vil se, at den kun vælger den ene med id særligt. Ja? Lyder cool. Ja. 

PUBLIKUM: Kan noget har en attribut af både klasse og en id? 

TOMAS REIMERS: Ja. PUBLIKUM: OK. Og hvad sker der, hvis du så give det nogle regler i CSS, at konflikten? TOMAS REIMERS: Absolut. Vi definitivt vil at tale om det. Så præcis, hvad du fik på, kan du også have klasser. Så lad os lade som om, jeg havde tre stykker og jeg ønskede at style den første to, men ikke den tredje. Nå, kan din første idé være, ja, jeg kunne bare give den anden et id. Men du ikke kan, fordi en id, præcis som Allison sagde, skal være unik. 

Så i stedet for et id, hvad du kan bruge, er du kan bruge en klasse. Og en class-- hvad det giver du skal gøre, er dybest set siger, dette hører som en del af en gruppe. I dette tilfælde vores gruppe kaldes Special. Og hvad vi skal gøre, så er vi kommer til at say-- stedet pund, vi kommer til at bruge prik. OK? Og se, at pundet og prik kun findes inden for den CSS-fil, ikke inden for HTML. ALLISON Buchholtz-AU: Ja. Vigtig forskel. 

TOMAS REIMERS: Jeg har havde så meget kamp, fordi jeg satte hash i HTML og så bare følte dum i lang tid. Se, hvordan det vælger begge dem med denne klasse? Cool. 

Nu kan tingene have flere klasser. Lad os sige, jeg ønskede at gøre den første to har en baggrund af gul og de to har en skrifttype farve blå. OK. Jeg ved ikke rigtig, hvorfor jeg havde ønsker at gøre det, men jeg kan. 

ALLISON Buchholtz-AU: måske ikke anbefales det til din hjemmeside. Men til vores formål, vil det gøre. 

TOMAS REIMERS: Det er ikke en god farveskema. ALLISON Buchholtz-AU: Nå, gul og blå er min high school farver. Jeg ved det ikke, selv om. TOMAS REIMERS: Allison høje skole havde en stor farveskema. [Latter] Så det, vi kan kalde dette er Lad os kalde denne-- så vi har særlige og vi har temmelig. Jeg foreslår, for dette, du bruger meget mere beskrivende navne. ALLISON Buchholtz-AU: Ja, jeg ville kalde dette, ligesom, gul eller blå. 

TOMAS REIMERS: Vi er ikke virkelig gør en reel hjemmeside, hvorfor vi ikke gør det. Men hvis du rent faktisk havde en reel hjemmeside, du måtte have, ligesom, artiklen header, artikel indhold, første ord, sådan noget, som giver dig at være langt mere beskrivende. Disse er virkelig ligesom variabler. De bør navngives på en måde, hvor du kan, like-- yeah, som sådan. Perfekt. 

Så baggrundsfarve. Og så vil vi say-- så måde at ændre farve er blot "farve". Og vi vil gøre det blå. Det er cool. Så nu har vi den først to har særligt. Næste kommer til at have "class = pretty." ALLISON Buchholtz-AU: Og så vil du ønsker at tilføje "pretty" til den midterste. TOMAS REIMERS: Yup. Og derefter til den midterste, at tilføje "pretty," hvad sker der er du bare have en plads. Så klassen attribut er et rum-separeret liste af alle klasser der gælder for denne tag. OK? Det er ikke som denne tilhører en slags særlig klasse kaldet "Særlige, rum, smukke." Det tilhører to classes-- speciel og smuk. Ja? Cool. 

Og så hvis vi ser på, hvad der sker, er vi kommer til at se, at første har gul baggrund, sort tekst. Anden en-- 

ALLISON Buchholtz-AU: --has fed gul baggrund med blå tekst. Og vores sidste man bare har den blå tekst, som vi har fået tildelt. 

TOMAS REIMERS: Cool? Hvordan selektorer arbejde? Awesome. 

ALLISON Buchholtz-AU: Ønsker vi at taler om konflikten nu så? 

TOMAS REIMERS: Så ja. Absolut. Så hvad sker der, hvis du har en konflikt, ikke? Lad os lade som om den første opstiller noget like-- ALLISON Buchholtz-AU: Måske dette ændrer baggrunden? TOMAS REIMERS: Ja. Så vi kommer til at gøre "pretty" ændre baggrunden til laks. ALLISON Buchholtz-AU: Du er kun med alle de flotte farver i dag, Tomas. TOMAS REIMERS: Ja. Fordi jeg fandt ud af jeg kan bruge laks som en reel farve. Så vi kun kommer til at gøre det. Jeg synes også, Sunset er en rigtig farve. PUBLIKUM: Sunset er en rigtig farve? ALLISON Buchholtz-AU: Lad os prøve det. TOMAS REIMERS: Efter denne demo bare fordi i tilfælde messer op, Jeg ønsker ikke at blive debugging. Så vi ved laks er en rigtig farve. Så nogen gæt på hvad der kommer til at ske? 

ALLISON Buchholtz-AU: Enhver idé? 

Publikum: [uhørligt]. 

TOMAS REIMERS: Ja. Så du fik det helt rigtigt. Dybest set, det tager sidste regel, at den blev givet. 

ALLISON Buchholtz-AU: Så det er hvor cascading træder i kraft. 

TOMAS REIMERS: Så husk hvordan vi havde at cascading style sheets? Så ved at vi slags betyde at vi har en masse regler der anvendes oven på hinanden, og de kan også tilsidesætte hinanden. 

ALLISON Buchholtz-AU: So uanset er i bunden vil tilsidesætte, hvad er på toppen. Du kunne have regler, der helt negere noget på forhånd. Det er også derfor, du ønsker at være forsigtig, når du er styling, så du er ikke at skabe regler, du bare helt tvingende. 

TOMAS REIMERS: Eller måske du ønsker at overskrive regler. 

ALLISON Buchholtz-AU: Eller måske du gør. Ja. 

TOMAS REIMERS: Lad som om du har en klasse, som gælder for de fleste ting, men lad os sige, du ønsker at ændre baggrundsfarve til rød og skrifttypen til Fed for de fleste ting, men for en, du kun vil baggrundsfarven at være rød, men du vil have alle de andre egenskaber, kan du gøre noget lignende "font-weight = normal," som så ville fortryde, at fed forandring. Ja? Igen, den bedste måde, tror jeg Allison sagde det er bare øve. 

ALLISON Buchholtz-AU: eksperimenter. 

TOMAS REIMERS: Praksis, praksis, praksis, og eksperimentere. Jeg kender en masse mennesker, der tror CSS er bare en masse gæt-og-kontrol ved slutningen af ​​dagen, hvor hvis du ønsker at gøre something-- lignende, du har en idé, men du stadig sandsynligvis brug at prøve det for at sikre, du ved, hvad det ligner. 

PUBLIKUM: Når du anvender klasser, mere end én til samme punkt eller sektion, gør det uanset hvilken rækkefølge du kan skrive dem ind i anførselstegn? 

TOMAS REIMERS: Nej, slet ikke. 

ALLISON Buchholtz-AU: Det afgørende er rækkefølgen i din CSS style sheet. PUBLIKUM: Kan du gentage spørgsmålet? TOMAS REIMERS: Oh. ALLISON Buchholtz-AU: Indenfor klasse, når du giver klasser til noget i HTML, gør det noget, hvilken rækkefølge de er i? Det betyder ikke noget ordren. Det afgørende er rækkefølgen af ​​de klasse selektorer i din CSS, inden for dit typografiark. 

TOMAS REIMERS: Sound god? 

ALLISON Buchholtz-AU: Lovely. 

TOMAS REIMERS: Og så vi kommer til at fortsætte at-- ALLISON Buchholtz-AU: Hvad har vi så? Jeg glemmer. Åh, vi bare nødt eksempler. Men vi har slags gjort dem. Vi har gjort eksempler på farten. 

TOMAS REIMERS: Vi får at kombinere selektorer snart. 

ALLISON Buchholtz-AU: Åh, vi får at kombinere selektorer. TOMAS REIMERS: Så nogle eksempler er vi # Dog-- pund, eller hashtag, eller octothorpe, eller hvad du vil ringe at-- skarpe. 

ALLISON Buchholtz-AU: Sharp hund. 

TOMAS REIMERS: Så har du .pets. Noget har et id af hund, der er kun én hund på siden. Noget har et id på kat, er der kun én kat. Der kan være mange kæledyr på siden. Det er derfor, vi gav, at klasser. Du har et eksempel på s. Og så så en af ​​de sidste eksempel, som er noget, vi ikke har talt om, er, hvad der sker, når du kombinere dem. Så p.pets. 

Så for at, lad os gå tilbage til kode og indføre another-- ja. Så tilbage her. 

ALLISON Buchholtz-AU: Jeg lyst til dette er really-- gerne bare kigge gennem eksempler er virkelig den måde at lære dette. Så det er, hvad vi laver. 

TOMAS REIMERS: Så lad os lade som om vi kun ønsker at markere tekst 2, ikke? Så vi kan absolut ikke gøre det med en id. Godt, vi kunne gøre det med en id, men det har ikke en id. Jeg kunne tilføje en, men lad os lade som om at jeg ikke ønsker at tilføje en eller det allerede har noget andet. Jeg kan ikke gøre det med det. Koden er bestemt ikke enestående, ikke? Og det er heller klassen. Men du kan kombinere disse ting. Lad os sige, vi ønskede at gøre noget som kun gælder for ting, som har klassen særlige og der har klassen smuk. 

Så hvad du kan gøre er i main.css, du kan sige, lad os først slette denne. Du kan kombinere disse. Så du kan gøre .special. Ingen plads. Bare .special.pretty. Det betyder noget som både er særlige og smukke. Giver det mening? Og hvis vi går her, hvad du kommer til at se er denne regel gælder kun for anden, som har begge af disse. Og du kan gøre det for en masse ting. Du kan say-- lad os foregive jeg kun ønskede at gøre ting, som har klassen pretty og som også er et afsnit tag. Så p.pretty. Lad os lade som om, at jeg havde noget temmelig på tag krop. OK? Jeg kan køre dette, og jeg kan se, at det kun er kommer til at gælde for ting, der er afsnit med klassen smuk. Og du kan kombinere disse, dybest set, så mange som du vil. Så du kan bare sætte dem sammen. Giver det mening? ALLISON Buchholtz-AU: So denne type er mere nyttigt da blev Tomas sagde tidligere, måske du har en meget kompliceret hjemmeside, og du allerede har en masse af disse regler er skrevet, og du behøver kun at kombinere to fra før. Ligesom stedet for at skrive hele ny selector og ændre det der, du kan bare kombinere dem, hvor den overlapper. 

TOMAS REIMERS: Eller du måske finde out-- undertiden der er én klasse, som gør font farve som blå, og der er en anden klasse, som gør baggrunden blå. Og det bare ikke vil arbejde. Så du skriver et særligt tilfælde, hvor like-- men hvis det har både, hvad du er kommer til at gøre, er at du kommer til at gøre dette til en denne blå nuance og dette denne anden blå nuance. Right? 

ALLISON Buchholtz-AU: God for den slags undtagelser. TOMAS REIMERS: Så for at tænker over problemer der kan opstå, når du kombinere dem. Cool. Så tilbage til vores præsentation. ALLISON Buchholtz-AU: Vi er der næsten. TOMAS REIMERS: Og det er stoppet tilslutning. ALLISON Buchholtz-AU: Åh, nej. ALLISON Buchholtz-AU: CS på kontoret, internet går ned. Åh, ironien. 

TOMAS REIMERS: Så heldigvis kan vi præsentere uden internettet, tror jeg, fordi vi har alle dias her. Så lad os tale om det forholdet mellem tags. ALLISON Buchholtz-AU: Right. Så bare lidt at gå ud af hvad Tomas sagde dette er blot en anden måde at gøre det. Så vi har nogle forældre vælger med et barn vælgeren. Så i dette eksempel her, har vi nogle krop med en klasse Navbar, klasse knappen. Ah. 

TOMAS REIMERS: Åh, undskyld. 

ALLISON Buchholtz-AU: Og dybest set, hvad det betyder er at vælge alle de børn, som alle disse former for selektorer, inden for denne forælder vælgeren. Og det er de eneste, det nogensinde kommer til at gælde for. Jeg ved ikke, om du har en bedre måde of-- TOMAS REIMERS: Så jeg gætte måde at tænke om dette er huske før hvordan vi lidt ligesom sætte dem sammen. Og så betyder et element som matcher alle disse. Hvad det siger er, jeg Du skal matche alt inden some-- jeg vil dig med at finde en selector. Og så inden for denne, jeg vil have du til at matche nye ting. Right? Så i CSS, det handler om slags at være i stand til at matche disse elementer. Og du kan forsøge at matche emner i andre emner. 

Så lad os rent faktisk gør et eksempel, og vi mener, der vil afklare. Så lad os lade som om vi har særlige, særlig smuk, uanset hvad. Og så har vi et link, OK? Så husk, et er et link. Det kommer ikke til at gå nogen steder. Og vi kommer til at give det linket klasse, tror jeg. Lad os give det class-- give mig en idé. ALLISON Buchholtz-AU: Cool. TOMAS REIMERS: Coo-- lad os gå det klassen smuk. Hvorfor ikke? 

ALLISON Buchholtz-AU: OK. TOMAS REIMERS: So lige nu smukke ting kommer til at gøre baggrunden blå, baggrund farve laks. Det giver mening. Og hvis vi gør denne-- 

ALLISON Buchholtz-AU: Ønsker du at tilføje tekst så hyperlinket faktisk dukker op? TOMAS REIMERS: At ville være en god opkald. ALLISON Buchholtz-AU: Fordi højre nu er vi bare skal nok få noget. TOMAS REIMERS: Så det er et link. "Dette er et link." Åh, og det vil at være et andet link. Lad os give det klassen "cool." Du har ret. Cool. Så lige nu er vi kommer til at få fat i denne. Vi kommer til at kaste en. Vi har en i særlige tag, og vi har også kommer til at have en i den smukke tag. Og lige nu, hvad vi vil gøre, er vi kommer til at gøre cool-- hvad ønsker vi det at gøre? ALLISON Buchholtz-AU: Kan vi gøre det større? TOMAS REIMERS: Lad os give det en kant. ALLISON Buchholtz-AU: Vi kunne grænse. TOMAS REIMERS: Ja. Så vi kommer til at gøre noget lignende, grænsen is-- og vi er vil forklare alt dette i en anden. For nu-- 

ALLISON Buchholtz-AU: Til kassen model. TOMAS REIMERS: Men for nu, er vi bare at give det en kant. Så hvad det betyder er, du er kommer til at se disse links. Og du kommer til at se, at de har disse, ligesom, grimme sorte kanter, som er cool. 

ALLISON Buchholtz-AU: Vores hjemmeside er så smukke. 

TOMAS REIMERS: Ja. Vores hjemmeside er awesome. Så disse to er links, og de ser ud. Lad os lade som om jeg kun ønskede at gøre dette hvis det ikke var inden for noget som havde en baggrund af laks. Så husk, at denne ene har en baggrund af laks, fordi det er af klasse smuk. 

Men vi vil gerne sige, at der kun køler der er i klassen særlige, ikke i klassen smuk, bør have denne grænse. Nå, hvad du kan gøre, er du kan sige, .special, rum, .cool. Og hvad der er at gøre, når du tror om det, er det dybest set siger, OK, finde mig alt der matcher særligt. Så inden for disse tags, find mig alt, hvad der er cool. ALLISON Buchholtz-AU: Så en anden måde der kan være godt at tænke over dette, bringe den tilbage til C, er ligesom ideen om rækkevidde. Så når du har nogle vælgeren, ligesom dem at vi har arbejdet for før dette, hele din webside, alle dine HTML er inden for din rækkevidde, ikke? Men når vi har disse forældre-barn relationer, det er som om du indsnævre hvor du søger at et bestemt sted, som om, ligesom, vi ser inden for en bestemt funktion i stedet af hele vores fil. PUBLIKUM: Så med det i tankerne, ville det har gjaldt, hvis vi havde changed-- ALLISON Buchholtz-AU: Ordren? PUBLIKUM: --the klasse i CSS at .cool, rum, .special? ALLISON Buchholtz-AU: Ja, fordi så at ville sige, omfang det til alt hvad der har køligt, og derefter se på, hvad has-- Jeg mener, lignende, i dette tilfælde Jeg tror ikke, det ville have ændret det. 

TOMAS REIMERS: Hvis vi havde sagt hvad? Undskyld. 

ALLISON Buchholtz-AU: Hvis vi omfang den køle af, og derefter kigge efter ting ud af særlige, det ville være det samme, faktisk. 

TOMAS REIMERS: Så det ville ikke være. 

ALLISON Buchholtz-AU: Det ville ikke? Åh, åh godt. Jeg tager fejl. 

TOMAS REIMERS: Så grunden det er different-- fælles mistake-- er, at lige nu kun linket har kølig, ikke? Jeg gætter mit spørgsmål til jer er, hvad på denne side modsvares af .cool? Der er to mærker her, ikke? Hvilket er denne ene og dette ene. Begge passer cool. Intet andet gør. Så hvis du sagde, .cool, rum, .special, hvad du vil sige, er, inden for disse tags, det særlige? ALLISON Buchholtz-AU: Hm. Det er, hvad det-- højre. Fordi det er ligesom bare noget her. 

TOMAS REIMERS: Så det vælger ingenting. 

ALLISON Buchholtz-AU: betragtninger med særlige, vi er inden for disse tags her. 

TOMAS REIMERS: De og dem. PUBLIKUM: OK. Så disse tags fra skråstreg? 

TOMAS REIMERS: Ja. Giver det mening? Hvordan det er dybest set forsøger at indsnævre omfanget. ALLISON Buchholtz-AU: Ja. Jeg tror, ​​det er nok den nemmeste måde at tænke over det. 

TOMAS REIMERS: Så vi fandt dette, og vi fandt dette begge matchede særligt. Og så beder vi, inden disse fyre, hvad er cool? Og inden for denne ene, denne ene er cool. Inden for denne ene, intet er cool. Så det er den eneste tag, der er tilbage. 

ALLISON Buchholtz-AU: betragtninger køligt er lige inden for disse Tags der. TOMAS REIMERS: Præcis. Og hvad er særligt inden for de? Nothing. Nu, hvad jeg vil sige, er hvis der ikke var plads, du spørger, hvad der er cool og special-- eller hvad er ret og særligt, ikke? Hvis du siger .special.pretty, det er det samme som .pretty.special. 

For hvad fjerne rummet er spørger er, når du siger .special, du spørger, OK, hvilke der er speciel? Og så dem, der dem er også smuk, som er den samme, grammatisk, som at spørge, hvad der er ret, og så dem, hvad er også speciel? Right? Det er forskellen på hvad der er inden for, hvad der er. PUBLIKUM: OK. TOMAS REIMERS: Ja. Awesome. Så med det i tankerne then-- 

ALLISON Buchholtz-AU: Jeg tror, ​​vores sidste ting er (i fancy britisk accent) boksen model. 

TOMAS REIMERS: Den box-- [griner] Jeg elsker den måde Allison siger, at. Så boksmodellen ting. 

ALLISON Buchholtz-AU: Bare have en kasse, vil jeg være din boks model. TOMAS REIMERS: Så lad os tale om det. Så lige nu har vi brugt en masse tid på at tale om vælgere. Ved nu, du fyre er sandsynligvis, ligesom, Førerne af selectors-- du ved, hvordan man præcist vælge det indhold, du ønsker at manipulere på skærmen. 

Så nu er spørgsmålet, hvordan præcis kan du manipulere det? Så jeg gætte den mest grundlæggende måde at tænke på, at er, ja, hvad der præcist er et element i CSS? Vi har brugt en masse tid taler om, hvad der er et tag, eller hvad der er den mest grundlæggende repræsentation af et tag? 

En god måde at tænke på det vil sige, hvilken form er laks? Hvad form er lignende, laks-farvet baggrund? 

PUBLIKUM: Det er et rektangel. 

TOMAS REIMERS: Det er et rektangel, ikke? 

ALLISON Buchholtz-AU: Var det ikke et trick spørgsmål. [Latter] 

TOMAS REIMERS: Ikke forsøger at narre jer dette sent. Så vi har denne rektangel. Og tag er et p, ikke? Så det giver os god tro på, at punkt er repræsenteret som et rektangel, ved mindst i sindet af browseren, som det er. 

ALLISON Buchholtz-AU: Jeg mener, browsere er typisk rektangulære, så det giver mening. 

TOMAS REIMERS: Ideen her er at alle tags i CSS er repræsenteret som et rektangel. Og hver rektangel har fire dele efter CSS, OK? Du har det faktiske indhold. Det er, hvor teksten ligger. 

ALLISON Buchholtz-AU: Måske dit billede. 

TOMAS REIMERS: Ja. Du har polstring, som er blot en form for hvide rum. Så har du en grænse. Og så har du margin, som er hvidt rum uden for det. Så det giver ingen mening til nogen, så vi er vil tale om, at der for et sekund. Så lige her, hvad vi skal gøre er vi kommer til at skabe nogle divs, OK? Undskyld mig, mens I-- 

ALLISON Buchholtz-AU: Jeg har lyst til Vi bør sætte en sød billede i. 

TOMAS REIMERS: Vi absolut bør. 

ALLISON Buchholtz-AU: Jeg føler ligesom alle kunne drage fordel af en søde billede, er alt. 

TOMAS REIMERS: Kan vi alle drage fordel af en-- 

PUBLIKUM: Ja, helt sikkert. TOMAS REIMERS: OK, cool. Så vi bør sætte en sød billede i et sted. ALLISON Buchholtz-AU: Jeg føler mig som en søde bunny kan være nyttigt lige nu. TOMAS REIMERS: Sure. ALLISON Buchholtz-AU: slutningen af ​​ugen. Har noget adorab-- 

TOMAS REIMERS: Hvordan Bout en killing? 

ALLISON Buchholtz-AU: En killing virker også. 

TOMAS REIMERS: Cool, fordi der er et site for det. Det hedder PlaceKitten. ALLISON Buchholtz-AU: Det er godt. TOMAS REIMERS: Ja. ALLISON Buchholtz-AU: Bare for, ligesom, placeholder billeder i dit websted. TOMAS REIMERS: Mm-hm. Der er også PlacePuppy. Og der er PlaceBacon. 

ALLISON Buchholtz-AU: PlaceBacon? Virkelig? 

TOMAS REIMERS: Åh, gør vi ikke har internetadgang her. 

ALLISON Buchholtz-AU: [stønner] Tragisk. TOMAS REIMERS: Ellers Jeg ville vise jer hvordan man kan sætte billeder i dit websted. Vi vil forsøge at få denne arbejder inden vi nødt til at gå. Men for nu, vi er bare vil tale i farver derefter. Vi ønsker at sætte billeder af kittens-- 

ALLISON Buchholtz-AU: Vi gjorde. 

TOMAS REIMERS: --the Internettets ned for øjeblikket at være. Så vi har to divs, og vi er vil give dem to id'er. Vi kommer til at kalde det "Første" og "anden". Så id = "først." Og vi vil give dem to farver. Så hvordan kan vi vælger noget med en id på "første"? ALLISON Buchholtz-AU: Dot eller hash? PUBLIKUM: Sharp. TOMAS REIMERS: Sharp, perfekt. Sharp, hash, uanset we-- 

ALLISON Buchholtz-AU: Masser af ting at kalde det. 

TOMAS REIMERS: OK. Vi kommer til at slå sig ned på hashtag, og det er, hvad vi kommer til at gå med. OK? 

ALLISON Buchholtz-AU: Hashtag. 

TOMAS REIMERS: Så hashtag første. 

ALLISON Buchholtz-AU: So du kan tweete den seminar-- hashtag CSS, hashtag cool. TOMAS REIMERS: Hashtag Awesomeness. ALLISON Buchholtz-AU: Hashtag Awesomeness, ja. TOMAS REIMERS: OK. Så vi har "første" og "anden". Så først, vi vil have en baggrundsfarve rød. ALLISON Buchholtz-AU: Uh, kolon. TOMAS REIMERS: Yup. ALLISON Buchholtz-AU: Jeg vil være din spot-brik. TOMAS REIMERS: Allison har fået mig. Baggrund-farve blue-- 

TOMAS REIMERS: Lilla! 

TOMAS REIMERS: Lilla. ALLISON Buchholtz-AU: Ja. Lilla er min yndlingsfarve, og vi har ikke brugt det endnu. 

TOMAS REIMERS: Violet. ALLISON Buchholtz-AU: Violet. Der virker. 

TOMAS REIMERS: Så er vi vil have to divs. De kommer til at være helt tom. Vi skulle nok have noget tekst. Så "første" bliver "HELLO". Og den "anden" vil say-- 

ALLISON Buchholtz-AU: Farvel. 

PUBLIKUM: - "verden". Hej, farvel. ALLISON Buchholtz-AU: Jeg så dem i koncert den anden uge. TOMAS REIMERS: The Beatles? ALLISON Buchholtz-AU: For reals. De er ikke så stor. Jeg kan ikke lide det. 

TOMAS REIMERS: Vi har "Hello" og "farvel." Og igen, CSS er blot awesome, fordi den genkender vores farver. Behøver ikke at selv bange for, at de eksisterer. De gør. 

ALLISON Buchholtz-AU: De eksisterer. 

TOMAS REIMERS: Så CSS jeg tror har 255 ord til at tale om farve. Hvis du kan tænke på en farve uden for de 255, ligesom, vil jeg være imponeret. ALLISON Buchholtz-AU: Ja. Jeg tror du fyre kan have lige kommet i lige efter. 

TOMAS REIMERS: Så her, vil du se at vi har to kasser lige oven på hinanden, ikke? Goddag og farvel. 

ALLISON Buchholtz-AU: Der er ingen plads i mellem. De er bare smooshed højre på toppen af ​​hinanden. 

TOMAS REIMERS: Så det første Jeg gætter vi burde tale om er lad os også say-- ja. Så CSS repræsenterer dem som en slags kasser. Og som kasser, har de indhold. Og indholdet lige nu er en slags Den HELLO eller farvel og det er det. OK? 

Så en af ​​de første ting, du kan gøre, er at du kan tilføje polstring. Padding siger, hvor meget plads det bør forlade på hver side. Så lad os sige jeg vil sige 10 pixels på hver side. Og jeg vil dissekere at i en anden. ALLISON Buchholtz-AU: Alle disse ting her vil være mest i pixels for resten af ​​seminaret. Du kommer til at se, at det har noget plads omkring det, ikke? Så hvad du ikke kan se her er der denne usynlige slags polstring på hver side, som siger, ligesom, OK, du har din kasse med content-- 

ALLISON Buchholtz-AU: Ønsker du bare trække op inspicere element? 

TOMAS REIMERS: Ja, det er en god idé. ALLISON Buchholtz-AU: Også, jeg finder at inspicere element er en god måde at finde ud af, om noget er i gang forkert, sker der noget uventet, inspektion af tags og se hvad det er ligesom overskrives er nyttigt. 

TOMAS REIMERS: Så jeg er ikke sikker hvis du fyre kan se denne farve. Kan du? Du vil se denne polstring på den slags kant. Og så skal du se de faktiske indhold i blå, ikke? Så det er meget grundlæggende i kassen model. Du har indhold. Så har du polstring. 

PUBLIKUM: Hvorfor gør du ikke bare bruge feltet inde til-- 

ALLISON Buchholtz-AU: Right. Fordi det er bare at vælge elementet lige nu. 

TOMAS REIMERS: Yup. Andre ting. Så lad os tale om det polstring kommando til en anden. Så i CSS, målinger nødt til at have en enhed. Så først skal du beløbet. Så i dette tilfælde, har vi sagt 10. Og så den næste vi har sagt, er pixels, px. Andre dem, du måtte have, er ting som centimeter inches. Du kan gøre ting som, hvad der er 10 inches? Og det vil være latterligt. 

ALLISON Buchholtz-AU: Oh, boy. 

PUBLIKUM: Whoa. 

TOMAS OG ALLISON: Ja. TOMAS REIMERS: Så det er alt polstring. Jeg har tænkt mig at gå tilbage til pixels. 

ALLISON Buchholtz-AU: Pixels tendens til at være, som den standard. Når du ser på en masse hjemmesider, de for det meste arbejder i pixels. TOMAS REIMERS: Så du kommer til at se enten pixels-- de andre dem, du ser er em, som er en em er lig med højden af ​​skrifttypen som du bruger i øjeblikket. 

ALLISON Buchholtz-AU: Mm. TOMAS REIMERS: Det er en god måde at sige, ligesom, jeg vil have så meget plads som min skrifttype er at tage. ALLISON Buchholtz-AU: Vidste ikke, at. Man lærer noget nyt hver dag. TOMAS REIMERS: Der er en masse målinger i CS. Jeg foreslår, at du ser dem op. For alle dine sager, tror jeg pixel bør være tilstrækkelig. Og de er også, hvad du kommer til at se i de fleste eksempler udført online. Så vi vil lade det blive ved pixels. 

Du kan også, skal jeg say-- så polstring sæt alle de polstring. Du kan også gøre noget lignende "Padding-top" til bare set-- ALLISON Buchholtz-AU: Måske vi får vores "Hello" tilbage. TOMAS REIMERS: --to bare indstille polstring på toppen og intet andet. Så de fire kommandoer er padding-top, padding-bottom, padding-venstre, og polstring til højre. 

ALLISON Buchholtz-AU: Ligesom du ville forvente for en kasse. 

TOMAS REIMERS: Ja. Intet er for vanvittigt der. Giver det mening? Så det er polstring. Jeg har tænkt mig at sætte alle de polstring tilbage til 10. Og så jeg har tænkt mig at gå videre til grænsen. 

Så hvad grænsen er er grænse er en underlig kommando. Det tager slags tre ting på én gang. Så den første er, hvor stor du ønsker det skal være som en måling. Igen, jeg kun bruger pixels. Og det sidste, jeg bør tilføje til målinger er den ene ting, som behøver ikke en enhed er 0. Det er faktisk forkert at give 0 en enhed, fordi 0 er 0 tværs inches, pixels, centimeter, uanset hvad. Det hele betyder blot 0, ikke? Så først du give det målingen. 

Så du giver det den stil. Så jeg har tænkt mig at sige "fast". Og vi vil tale om, hvad det betyder. Og så endelig du give det en farve. Så jeg har tænkt mig at sige "sort." Og disse er alle ting, vi har nu set før, med undtagelse af stil, men vi vil tale om det. Så du fyre har set målinger, og du har set farver. Og hvad der sker, er vi får dette flot sort ramme omkring det, ikke? Du fyre se, hvordan vi gjorde det? 

PUBLIKUM: Ja. 

TOMAS REIMERS: Cool. Så hvad er det? Så først og fremmest, det er en pixel. Det er selvindlysende nok, ikke? Ligesom, det er en pixel tyk. Eller det ville være en pixel, men jeg er zoomet ind, så det er en lille smule mere end. 

ALLISON Buchholtz-AU: Og vi har denne latterlige beslutning TV. 

TOMAS REIMERS: Ja. Du kan gøre det større, mindre, uanset hvad. Så her er en to-pixel grænse. Du vil se, det er dobbelt så tyk. Næste ting du har, er farven. Det er ikke interessant. Jeg har ikke tænkt mig at tale om det, virkelig. 

ALLISON Buchholtz-AU: Men stil måske bare en lille smule interessant. 

TOMAS REIMERS: Ja. Så stil, er der kun få dem at jeg ser brugt almindeligt. Første ens faste, næste ens punkteret, og den sidste er knust. Og her er oversået. Du vil se, at de er en flok prikker, right? En god måde at slags få en dejlig kant går, streger er også temmelig populær. 

ALLISON Buchholtz-AU: Og så selvfølgelig, jeg er sikker på der er masser andre stilarter, som du kan få. Og vi har en stor sæt links i slutningen for jer at slags gennemlæse og se på mere cool CSS. 

TOMAS REIMERS: Og så den sidste ting, vi er vil tale om den box modeller reelle hurtig. Åh, og derefter grænse, præcis som polstring, du også har ting som grænse-venstre, grænse-højre, border-top, grænse-bottom, som giver dig mulighed at komme på en bestemt grænse. Så her er bare grænsen venstre defineret. Giver det mening? 

ALLISON Buchholtz-AU: Det er en cool måde at fremhæve ting eller tilføj linjer mellem forskellige elementer. TOMAS REIMERS: Absolut. Så det er vores grænse. Og den sidste avance. Margin er ligesom polstring undtagen det ikke er within-- ALLISON Buchholtz-AU: Det er ikke omkring din element men faktisk omkring hele boks, som vi har været vidne til. 

TOMAS REIMERS: Ja. Allison sagde det perfekt. Det er ikke, ligesom, i din element, det er omkring hele kassen. Det betyder ting som baggrund ikke finder anvendelse på den. Og det dybest set siger, ligesom, jeg vil ikke have noget i denne meget plads for mig. Så ligesom her har vi en margin på 10 pixels. Så intet inden for 10 pixels bør være ved siden af ​​mig. Det er lidt det plads, men slags ikke. Så det er meget grundlæggende i kassen model. Giver det mening? Cool, cool. ALLISON Buchholtz-AU: Awesome. Så nu tror jeg, at vi bare har vores seje ressourcer at du vil få fyre gennem meget hurtigt. Og vi vil actually-- godt, vi har internet endnu? 

TOMAS Reimers: Lad os se om jeg kan åbne up-- lad mig lige se, om jeg kan få internet hurtigt mens Allison taler om noget Allison ønsker at tale om. ALLISON Buchholtz-AU: Så basically-- jeg ikke ved, hvad jeg ellers kan sige på nuværende tidspunkt. Men disse er nogle rigtig gode ressourcer. Disse er dem, der Tomas og jeg har brugt og at vi faktisk anvendes til forberedelse til dette. W3Schools er en, som du fyre skulle have set før. Vi anbefale det til en masse ting med CSS. Jeg ved, jeg anbefale det til min afdeling hele tiden. 

En af de store ting er, at det giver dig mulighed for at slags rod med CSS og se ændringerne går i denne, lignende, dobbelt-vindue se, at det har. Så du behøver ikke at bekymre dig om oprette din egen webside, eller oprette vhost i din lokal apparat og lokal vært, og få alt det arbejde. Det er indlejret lige på siden. 

Og det har disse små lektioner, som du kan gå igennem for at lære mere om vælgere, eller lære om at manipulere din font eller en baggrund, eller et billede. Og du har disse øjeblikkelige resultater, du behøver ikke at gøre noget andet prep arbejde for. Så jeg elsker W3Schools. Det er fabelagtig. Er det til at virke? 

TOMAS REIMERS: Ja. Nej, det er ikke. Vil du have mig til at prøve og genstarte min computer? Eller ønsker vi at-- 

ALLISON Buchholtz-AU: Jeg mener, godt, vil dette også være online. Alle slides vil være online. Så jeg bare varmt anbefale at gøre disse. 

Dette er stor, som blot ligesom en bedrager ark. Det er bare alle de grundlæggende kommandoer, du har. Det er fantastisk, når du er først starter ud din hjemmeside. Fordi måske du ikke gør ønsker at komme ind alle den virkelige Nitty Gritty design-tunge ting. Du skal blot formatere den på en måde, den slags giver mening og vilje gøre for tiden. Og hvis du virkelig vil at komme ind i det, jeg ved dette er, ligesom en af Tomas foretrukne referencer. Vi bruger det til at prep, og det er fantastisk. Det er den Udvikler fra Mozilla. 

TOMAS REIMERS: So Mozilla er de mennesker, der gør Firefox. Og det er bare deres egen developer reference, som jeg synes er fantastisk. Og det har en vidunderlig liste over ressourcer. Så vi have-- 

ALLISON Buchholtz-AU: Og så sidste note er når du forsøger at designe din hjemmeside, hente inspiration fra ting som du mener er temmelig. Eftersyn af elementet, inspicere kildekoden kan være super hjælpsom for at forsøge at finde ud af hvordan at style din egen hjemmeside. 

Ofte føler jeg mig som den bedste måde, udover forsøg, er bare at se på ting, der er smuk. Jeg finder det virkelig svært at bare form for design ting på egen hånd, især i begyndelsen. Så du se på hjemmesider at du nyder at kigge på. Finde ud af, hvad der gør dem appellerer til dig. Og så er du velkommen til prøve og replikere. 

TOMAS REIMERS: Right. Selv lignende websites som dette, kan du se Der er helt sikkert en div i toppen. Og så har du en anden div inden her, som er CSS Awesomeness. Og så har du en masse links her. Hvis du virkelig bare inspicere elementer, kan du sortere på begynde at se, hvad gør websites se ud, og hvordan kan jeg genskabe, at hvis jeg ville. Giver det mening? Så vi har kun tre minutter tilbage. Så spørgsmål? Nogen af ​​dem? Ja. 

Publikum: For farven rektangel, hvordan ville du have-- hvis du ikke ønsker det går på tværs af hele siden, kunne du har gjort det gå på tværs kun halvdelen af ​​siden eller bare teksten? 

TOMAS REIMERS: Ja, absolut. Så lad mig se faktisk. Jeg har to idéer. Så først og fremmest, du kan også bruge procenter. 

PUBLIKUM: Virkelig? 

ALLISON Buchholtz-AU: So noget at se op er relativ positionering. Det er noget, vi har ikke tid til at komme ind, men det er noget, jeg helt sikkert anbefaler jer tjekker. 

TOMAS REIMERS: So procenter. Og se, hvordan vi gjorde det kun 50% af bredden? ALLISON Buchholtz-AU: Hvis du faktisk kender antallet af pixels, kan være mere præcis måde. Du kan rode rundt med det. Men 50%. Hvis vi skulle ændre størrelsen vores browser, det ville gøre det mindre. 

TOMAS REIMERS: Nå, det er dybest set 50% lige nu, tror jeg. Det er 50%, og derefter margenen er blevet tilføjet til det. CSS har en masse særheder. Så lige nu er det 50% af sidens bredde. Men husk, at du har 10 pixels taget fra hver side. Så hvis du skulle flytte, at over den venstre kant af browseren, så ville det se ud 50%. Igen, som jeg sagde, kan CSS være en masse gæt-og-check. Ligesom, tror du noget er vil opføre en måde, men det opfører en helt anden måde. 

ALLISON Buchholtz-AU: Og du bare klogere, og du bare få en bedre intuition for det, som man bevæger sig langs. 

TOMAS REIMERS: Og det bliver værre og værre. Så det er egentlig bare et løb. 

ALLISON Buchholtz-AU: Det er super opmuntrende. Vi vil have dem til at kunne lide CSS. 

TOMAS REIMERS: CSS er awesome. Husk, at. Andre spørgsmål? 

ALLISON Buchholtz-AU: Den ene ting. Ellers noget? Cool. 

TOMAS REIMERS: Awesome. 

ALLISON Buchholtz-AU: Tja, hvis du fyre har spørgsmål senere, vi er altid til rådighed som sædvanlig. Du vil sikkert se nogle af os for afgangsprojekter og absolut på hackathon. 

TOMAS REIMERS: Absolut. Og på messen. 

ALLISON Buchholtz-AU: Og på messen. Oh. 

TOMAS REIMERS: Glæd dig til se alle dine awesome-- 

ALLISON Buchholtz-AU: Vi vil se alle dine fantastiske websites der vil være smuk. TOMAS REIMERS: Du kan altid se, ligesom de websteder der havde, ligesom, god CSS og derefter Ligesom dem, der ikke forsøger at gøre CSS. ALLISON Buchholtz-AU: Også en anden ting, en ting mere at se på er Bootstrapping. Så Bootstrap er stor. 

TOMAS REIMERS: Google, at hvis du-- 

ALLISON Buchholtz-AU: Google det. Det er fabelagtig. Du vil elske det. Og nu, at du har en grundlæggende forståelse af CSS, det vil gøre meget mere mening. Awesome. Tak, gutter. 

TOMAS REIMERS: Mange tak.