СПІКЕР: Так що це насправді не найкращий дизайн змішуватися CSS з HTML. Швидше, краще винести за ваш CSS, покласти його де-небудь центральний, і якось застосувати його до теги у вашій веб-сторінці. Щоб добитися цього, ми можемо насправді зупинити за допомогою атрибуту стилю і замість використовувати стиль тег, який належить в Глава веб-сторінки поряд, для Примірник, ваша назва. 

Давайте дамо цьому спробу і повторно реалізувати Домашня сторінка для Джона Гарварда з використанням стилю тег. Я вже отримав нас почали тут з трьома діви для Домашня сторінка Джона Гарварда. Але давайте спочатку тепер підійти до цієї першої справ і додати новий атрибут, а саме ID, і вказати, що це унікальний ідентифікатор для цього конкретного DIV має бути, наприклад, цитата кінець цитати "Кращих", це довільне ім'я, але описовий, що це справ є дійсно у верхній частині моєї сторінці. 

Протягом наступного DIV, давайте дамо йому відрізняється Ідентифікатор цитатою Unquote "Середній", і давайте дамо третій DIV Ідентифікатор цитатою кінець цитати "дна". Ми Тепер є три унікальний ідентифікатор , До якого ми можемо застосувати деякі CSS властивості, але спочатку давайте повернення глави цій сторінці. Прямо над назвою тут, я буду йти вперед і визначають стиль а потім закрийте стиль. 

Всередині це зараз, я збираюся визначити деякі властивості CSS, а саме ті самі, я раніше була в стилі атрибути, але тут вони будуть централізовано визначені. Щоб зробити це, я збираюся вказати фунт символ з наступним вершині, тим самим уточнивши, що наступне CSS властивості повинні застосувати до будь-якої HTML елемент має унікальний ідентифікатор вершини. Я тоді буде мати деякі відкриті і закриті фігурні дужки, і я збираюся вказати, скажімо, розмір шрифту повинен бути 36 пікселів, вага шрифту повинен бути сміливим. 

Щоб усе було чисто, я ставлю кожен з цих властивостей тепер сама по собі лінія, але це тільки стилістична умовність. Нижче цього, давайте визначимо інший Селектор, так сказати. Це один для HTML тега, який має унікальний ідентифікатор середині. І тут, давайте вказати розмір шрифту з 24 пікселів, нижче, що інший Селектор для нижньої, а всередині про це, давайте уточнимо Розмір шрифту 12 пікселів. 

Давайте тепер зберегти, змінити права доступу на, і завантажити цю сторінку в браузері, CHMOD плюс г CSS-1.html. Давайте відкрити Chrome і відвідати http://localhost/css-1.html. Не погано. Точно так, як я передбачав, але я хотів би, щоб приймати речі на один крок далі тепер і Текст центру Джона Гарварда. Тепер, щоб зробити це, я міг обернути вся сторінка в DIV, як я зробив більш ранній приклад. Або я можу бути розумнішими і розуміти, що всі ці діви знаходяться всередині Тіло моїй сторінці, так чому б просто не застосовуються один або кілька CSS властивості для організму помітити себе? 

Щоб зробити це, давайте зробимо це. Давайте повернемося до Gedit тут. Давайте прокрутки назад до Style тега, і давайте вказати селектор просто За допомогою цього тега ім'я, тіло. Нижче цього, давайте поставимо наші фігурні дужки потім вирівнювання тексту центру. Давайте тепер зберегти сторінку і перезавантажте це усередині цього браузера. Перезавантаження в Chrome, і вуаля. Тепер у нас є сторінка Джона Гарварда в центрі, як ми мали намір.