SPEAKER: Så det er faktisk ikke den bedste designe at blande CSS med HTML. Tværtimod, det er bedst at faktor ud af din CSS, sætte det et sted centralt, og en eller anden måde anvende det til tags i din webside. For at opnå dette, kan vi faktisk stoppe bruge Style attribut og i stedet bruge en stil tag, der hører til i leder af en webside sammen, for eksempel, din titel. 

Lad os give det en chance og re-implementere et hjem side for John Harvard bruge Style tag. Jeg har allerede fået os i gang her med tre divs til John Harvard hjemmeside. Men lad os først nu gå op til denne første div og tilføje en ny attribut, nemlig id, og angive, at en unik identifikator for denne særlige div skal være, for eksempel, citat citat slut "Top", et vilkårligt navn, men beskrivende i, at denne div er faktisk øverst på min side. 

For den næste div, så lad os give det en forskellig ID citat citat slut "Midten", og lad os give den tredje div et id på citat citat slut "bottom". Vi nu har tre entydig identifikator som vi kan anvende nogle CSS egenskaber, men først, lad os vende tilbage til lederen af ​​denne side. Lige over titlen her, vil jeg gå videre og definere stil og luk derefter stil. 

Inde i dette nu, vil jeg definere nogle CSS egenskaber, nemlig samme dem jeg tidligere havde i Style attributter, men her vil de være centralt defineret. At gøre det, vil jeg specificere pund symbol efterfulgt af top, hvorved præciserer, at følgende CSS egenskaber bør gælde uanset HTML-element har den unikke identifikator af toppen. Jeg derefter gå til at have nogle åbne og lukkede krøllede parenteser, og jeg har tænkt mig at specificere, siger, skal skriftstørrelsen være 36 pixels skal skrifttype vægt være modige. 

For at holde tingene rene, jeg sætter hver af disse ejendomme nu på egen hånd linje, men det er bare en stilistisk konvention. Under dette, lad os nu definere en anden selector, så at sige. Denne ene til HTML-tag, der har unik identifikation af midten. Og her, lad os angive en skriftstørrelse 24 pixels, under den anden omskifter for bunden, og inde af det, lad os angive en skriftstørrelse 12 pixels. 

Lad os nu gemme, ændre tilladelserne på, og indlæse denne side i en browser, chmod et plus r css-1.html. Lad os åbne op Chrome og besøge http://localhost/css-1.html. Ikke dårligt. Præcis som jeg havde tænkt mig, men jeg vil gerne tage tingene et skridt videre nu, og center John Harvard tekst. Nu for at gøre det, kunne jeg ombryde hel side i en div, som jeg gjorde et tidligere eksempel. Eller jeg kan være mere klog og indse, at alle disse divs er inde i min side krop, så hvorfor ikke bare anvende én eller flere CSS egenskaber til kroppen tagge sig selv? 

For at gøre det, så lad os gøre det. Lad os gå tilbage til gedit her. Lad os rulle tilbage op til Style tag, og lad os angive en selector bare ved hjælp af denne tag navn, Body. Nedenfor dette, lad os sætte vores krøllede parenteser efterfulgt af tekst-align center. Lad os nu gemme siden og genindlæse det inde i denne browser. Reload i Chrome, og voila. Vi har nu John Harvard side centreret som vi bestemt.