Більшість з вас повинні бути готові до HTML, подібної до тої, що я зробив в кінці мого керівництва по HTML для початківців. Лише рядок коду з посиланням на CSS-файл повинен бути доданий в ваш HTML-документ.
Код, представлений нижче, включає всі CSS-техніки, які були описані в цій секції керівництва. Ви можете зберегти його як CSS-стиль, поглянути, як працюють усі властивості в HTML-файлі і перевірити, як саме вони були застосовані в таблиці стилів. На мою думку, найкращий підхід до розуміння засобів CSS полягає в роботі з реальними файлами, коли ви бачите, що відбувається, якщо змінити ті чи інші речі.
01 |
body |
02 |
font-family: arial, helvetica, sans-serif; |
03 |
font-size: 80%; |
04 |
color: black; |
05 |
background-color: #ffc; |
06 |
margin: 1em; |
07 |
padding: 0; |
08 |
|
09 |
10 |
/* До речі, це коментар */ |
11 |
12 |
p |
13 |
line-height: 1.5em; |
14 |
|
15 |
16 |
h1 |
17 |
color: #ffc; |
18 |
background-color: #900; |
19 |
font-size: 2em; |
20 |
margin: 0; |
21 |
margin-bottom: 0.5em; |
22 |
padding: 0.25em; |
23 |
font-style: italic; |
24 |
text-align: center; |
25 |
letter-spacing: 0.5em; |
26 |
border-bottom-style: solid; |
27 |
border-bottom-width: 0.5em; |
28 |
border-bottom-color: #c00; |
29 |
|
30 |
31 |
h2 |
32 |
color: white; |
33 |
background-color: #090; |
34 |
font-size: 1.5em; |
35 |
margin: 0; |
36 |
padding: 0.1em; |
37 |
padding-left: 1em; |
38 |
|
39 |
40 |
h3 |
41 |
color: #999; |
42 |
font-size: 1.25em; |
43 |
|
44 |
45 |
img |
46 |
border-style: dashed; |
47 |
border-width: 2px; |
48 |
border-color: #ccc; |
49 |
|
50 |
51 |
a |
52 |
text-decoration: none; |
53 |
|
54 |
55 |
strong |
56 |
font-style: italic; |
57 |
text-transform: uppercase; |
58 |
|
59 |
60 |
li |
61 |
color: #900; |
62 |
font-style: italic; |
63 |
|
64 |
65 |
table |
66 |
background-color: #ccc; |
67 |
|