1
00:00:00,000 --> 00:00:00,300

2
00:00:00,300 --> 00:00:04,840
>> SIARADWR: Felly mewn gwirionedd nid oedd y gorau
dylunio i intermingle CSS gyda HTML.

3
00:00:04,840 --> 00:00:08,700
Yn hytrach, mae'n well i ffactor eich
CSS, ei roi yn rhywle canolog, a

4
00:00:08,700 --> 00:00:11,430
rhywsut yn berthnasol i'r
tagiau yn eich tudalen we.

5
00:00:11,430 --> 00:00:15,290
Er mwyn cyflawni hyn, gallwn roi'r gorau i mewn gwirionedd yn
gan ddefnyddio'r briodoledd Arddull ac yn lle hynny

6
00:00:15,290 --> 00:00:19,290
defnyddio tag Style, a oedd yn perthyn yn y
pennaeth dudalen ar y we ochr yn ochr, ar gyfer

7
00:00:19,290 --> 00:00:20,700
enghraifft, eich teitl.

8
00:00:20,700 --> 00:00:24,400
>> Gadewch i ni roi cynnig arni ac ail-weithredu
tudalen gartref i John Harvard

9
00:00:24,400 --> 00:00:26,410
ddefnyddio'r tag Style.

10
00:00:26,410 --> 00:00:28,930
Rwyf eisoes wedi gotten i ni ddechrau
yma gyda thri divs ar gyfer

11
00:00:28,930 --> 00:00:30,260
Hafan John Harvard.

12
00:00:30,260 --> 00:00:33,990
Ond gadewch i ni gyntaf yn awr yn mynd i fyny at y cyntaf
div ac ychwanegu nodwedd newydd,

13
00:00:33,990 --> 00:00:38,680
sef adnabod, ac yn nodi bod yn unigryw
dynodwr ar gyfer y div penodol

14
00:00:38,680 --> 00:00:42,390
fydd, er enghraifft, dyfynnwch unquote
"Top," enw mympwyol, ond

15
00:00:42,390 --> 00:00:45,840
disgrifiadol yn y div hyn yn
yn wir ar ben fy dudalen.

16
00:00:45,840 --> 00:00:48,920
>> Ar gyfer y div nesaf, gadewch i ni roi cynnig
ID gwahanol o dyfyniad unquote

17
00:00:48,920 --> 00:00:54,080
"Canol," a gadewch i ni roi'r trydydd div
ID o dyfyniad unquote "gwaelod." Rydym yn

18
00:00:54,080 --> 00:00:57,740
Erbyn hyn mae tri dynodwr unigryw
y gallwn wneud cais rhywfaint CSS

19
00:00:57,740 --> 00:01:01,210
eiddo, ond yn gyntaf, gadewch i ni ddychwelyd
i ben y dudalen hon.

20
00:01:01,210 --> 00:01:04,760
Yn union uwchben y teitl yma, 'n annhymerus'
mynd yn ei flaen a diffinio arddull

21
00:01:04,760 --> 00:01:07,120
ac yna arddull agos.

22
00:01:07,120 --> 00:01:10,340
>> Y tu mewn i hyn yn awr, yr wyf i'n mynd i ddiffinio
rhai eiddo CSS, sef y

23
00:01:10,340 --> 00:01:14,550
un rhai yr wyf eisoes wedi mewn Steil
priodoleddau, ond yma byddant yn

24
00:01:14,550 --> 00:01:16,320
canolog.

25
00:01:16,320 --> 00:01:20,880
I wneud hynny, yr wyf i'n mynd i nodi'r bunt
symbol yna top, a thrwy hynny

26
00:01:20,880 --> 00:01:24,710
yn nodi bod y CSS yn dilyn
Dylai eiddo yn berthnasol i beth bynnag

27
00:01:24,710 --> 00:01:28,800
Elfen HTML gan y unigryw
dynodwr y top.

28
00:01:28,800 --> 00:01:32,240
Yna yr wyf i'n mynd i gael rhywfaint o agored a
braces cyrliog caeedig, ac yr wyf i'n mynd i

29
00:01:32,240 --> 00:01:39,170
bennu, dyweder, bydd maint y ffont yn 36
picsel, bydd pwysau ffont fod yn feiddgar.

30
00:01:39,170 --> 00:01:41,810
>> Er mwyn cadw pethau'n lân, rwy'n rhoi pob
yr eiddo hyn bellach ar ei phen ei hun

31
00:01:41,810 --> 00:01:44,610
llinell, ond dim ond yn
confensiwn arddull.

32
00:01:44,610 --> 00:01:47,830
Islaw hyn, gadewch i ni yn awr yn diffinio un arall
detholydd, fel petai.

33
00:01:47,830 --> 00:01:52,680
Mae hyn yn un ar gyfer y tag HTML sydd wedi
dynodwr unigryw canol.

34
00:01:52,680 --> 00:01:57,540
Ac yn y fan hon, gadewch i ni yn pennu maint y ffont
o 24 picsel, yn is na'r un arall

35
00:01:57,540 --> 00:02:01,520
detholydd ar gyfer gwaelod, ac y tu mewn
o hynny, gadewch i ni nodi

36
00:02:01,520 --> 00:02:03,850
maint ffont o 12 picsel.

37
00:02:03,850 --> 00:02:09,350
>> Gadewch i ni yn awr yn arbed, yn newid y caniatadau
ar, a llwytho y dudalen hon mewn porwr,

38
00:02:09,350 --> 00:02:14,230
chmod yn fantais r css-1.html.

39
00:02:14,230 --> 00:02:22,260
Gadewch i ni agor Chrome ac ymweld
http://localhost/css-1.html.

40
00:02:22,260 --> 00:02:22,960
Ddim yn ddrwg.

41
00:02:22,960 --> 00:02:26,930
Yn union fel yr wyf yn bwriadu, ond hoffwn i
cymryd pethau un cam ymhellach yn awr ac

42
00:02:26,930 --> 00:02:29,050
testun canolfan John Harvard.

43
00:02:29,050 --> 00:02:32,080
Nawr i wneud hynny, gallwn lapio y
dudalen gyfan mewn div gan fy mod

44
00:02:32,080 --> 00:02:33,800
oedd yn enghraifft gynharach.

45
00:02:33,800 --> 00:02:37,820
Neu allaf fod yn fwy clyfar ac yn sylweddoli bod
pob un o'r divs hyn tu mewn

46
00:02:37,820 --> 00:02:42,420
corff fy nhudalen, felly pam na dim ond yn berthnasol
un neu fwy o eiddo CSS i'r corff

47
00:02:42,420 --> 00:02:43,850
tagio ei hun?

48
00:02:43,850 --> 00:02:45,460
>> I wneud hynny, gadewch i ni wneud hyn.

49
00:02:45,460 --> 00:02:47,650
Gadewch i ni fynd yn ôl at gedit yma.

50
00:02:47,650 --> 00:02:52,460
Gadewch i sgrolio yn ôl i fyny at y tag Style,
a gadewch i ni pennu dewisydd yn unig

51
00:02:52,460 --> 00:02:54,520
gan ddefnyddio enw, Corff y tag yn.

52
00:02:54,520 --> 00:03:00,580
Is na hynny, gadewch i ni roi ein braces cyrliog
ddilyn gan ganolfan-alinio testun.

53
00:03:00,580 --> 00:03:05,580
Gadewch i ni yn awr achub y dudalen a ail-lwytho
y tu mewn y porwr.

54
00:03:05,580 --> 00:03:08,090
Ail-lwytho yn Chrome, a voila.

55
00:03:08,090 --> 00:03:11,000
Erbyn hyn mae gennym dudalen John Harvard
canolbwyntio wrth i ni fwriadwyd.

56
00:03:11,000 --> 00:03:12,619