Зважаючи на те, що ви новачок у HTML, ось три готових до використання приклади використання CSS разом із html. Ви можете просто помістити їх у файл, зберегти його та відкрити за допомогою обраного браузера:
Цей безпосередньо вбудовує ваш стиль CSS у ваші теги / елементи. Взагалі це не дуже приємний підхід, тому що ви завжди повинні відокремлювати вміст / html від дизайну.
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
</head>
<body>
<p style="font-weight:bold;">Hi, I'm very bold!</p>
</body>
</html>
Наступний - більш загальний підхід, який працює на всіх тегах "p" (означає абзац) у вашому документі і додатково робить їх ВЕЛИЧЕЗНИМ. Btw. Google використовує такий підхід у своєму пошуку:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<style type="text/css">
p {
font-weight:bold;
font-size:26px;
}
</style>
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Ви, мабуть, займете пару днів, погравши з першими прикладами, однак ось останній. У цьому ви нарешті повністю відокремлюєте дизайн (css) та вміст (html) один від одного у двох різних файлах. stackoverflow використовує такий підхід.
В один файл ви помістите весь CSS (назвіть його "hello_world.css"):
p {
font-weight:bold;
font-size:26px;
}
В іншому файлі слід помістити html (назвіть його "hello_world.html"):
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<link rel="stylesheet" type="text/css" href="hello_world.css" />
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Сподіваюсь, це трохи допомагає. Для конкретних адресних елементів в документі і не всі теги ви повинні зробити самі знайомі з class, idі nameатрибутами. Весело!