Jika anda seorang yang ingin mendalami website development, dalam hal ini lebih kearah style website (bukan programming). Saya memiliki basic style css yang biasa saya gunakan ketika saya membuat sebuah website.
Dengan menggunakan basic style css yang saya kumpulkan dari beberapa resource ini anda dapat menghemat waktu development pada bagian set typography, css reset. Yang terdapat pada basic style css ini ada 2 bagian utama yakni CSS reset (untuk mereset css tyle anda yang sudah menghandle banyak browser) dan css typography (style untuk h1, h2, h3, sampai h6 basic paragraph, ul li dan basic HTML tag lainnya)
Untuk lebih jelasnya silahkan lihat halaman demo untuk hasil akhirnya.
Memang pada bahasan kita saat ini kita hanya akan membuat 2 bagian utama didalam css yakni css reset dan typography. Berikut source lengkap dari halaman demo diatas.
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html><html lang="en" class="no-js"><head> <meta charset="utf-8" /> <title>belajarngoding.com | basic css style</title> <link rel="stylesheet" href="style.css" type="text/css" /></head><body><h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. </p><ul> <li>first list</li> <li>second list</li> <li>third list</li></ul><ol> <li>first</li> <li>second</li> <li>third</li></ol> </body></html> |
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
| .clearfix { *zoom:1; }.clearfix:before, .clearfix:after { display:table; content:"";}.clearfix:after { clear:both; }.fade-out { opacity:0 !important; }html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }body { line-height:1; }blockquote, q { quotes:none; }blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}table { border-collapse:collapse; border-spacing:0;}body { background: url('background.png') repeat; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; color:#3b3a37; font-size:100%; line-height:1.6;}a, a:link, a:visited, a:active, a:focus { color: #363636; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0.1);}a:hover { color:#cc0000; text-decoration:none;}a:focus { outline:thin dotted; }a:hover, a:active { outline:0; }::-moz-selection, ::selection { background:#cc0000; color:#ffffff; text-shadow:none;}p a, li a, blockquote a, .text-block a { border-bottom:1px solid #000000; border-bottom-color:rgba(0,0,0,0.3);}p a:hover, li a:hover, blockquote a:hover, .text-block a:hover { border-bottom-color:#cc0000; }.underlined { border-bottom:1px solid #000000; border-bottom-color:rgba(0,0,0,0.3);}.underlined:hover { border-bottom-color:#cc0000; }small { font-size:0.75em; }h1, h2, h3, h4, h5, h6 { font-weight:bold; font-family:inherit;}h1 { font-size:2.5em; line-height:1.1em;}h2 { font-size:1.8em; margin:1.05em 0 .55em; line-height:1.2em;}h3 { font-size:1.25em; margin:1.1em 0 0.5em; line-height:1.2em;}h4, h5, h6 { font-size:1em; margin:1.5em 0 0.5em;}p { margin-bottom:1em; }p img { display:block; height:auto; width:auto; max-width:768px; max-width: 620px;}ul, ol { margin:0 0 1em 2em; }li { margin:0 0 0.5em 0; }blockquote { margin:1em 0 1em 2em; }pre { font-family:Courier, monospace; font-size:0.75em; line-height:1.2em;}/* * put your custom section here */ |
Pada style.css diatas baris 1 sampai 7 merupakan css reset, sedangkan baris berikutnya mengatur style pada basic tag HTML. Untuk lebih jelasnya lihat demo untuk tutorial ini.
Tidak ada komentar:
Posting Komentar