هناك ما يسمى بقوالب اختصار الوقت كفكرة ليس بها أي اختلاف ولكن ما يميزها هو لمن يكثرون على نفس النمط كثير. هذا هيدر.. هذا فوتر.. هذا جانب.. وهكذا، هي جمع لبعض الأوامر التي تسهل عليك الكثير، ويمكن لأي شخص التعديل والإضافة عليها وحفظها، وانتظر التعليقات لمن يريد الإضافة عليها كورقة كاملة لتعم الفائدة إن شاء الله. قوالب توفير الوقت في CSS 1 – تعليقات الراس: كثير لا يكتبها ولكنها مفيدة على الأقل لمعرفه الحقوق لذلك سنبدأ بها.

[html] /*
Site Name:
Site URI:
Description:
Version:
Author:
Author URI:
*/
[/html]

2- الألوان الأساسية: فقط لتحديد نمط الألوان الأساسية في الموقع وليس تفصيلا.

[html] Body Background:
Main Text:
Links:
*/
[/html]

3- إعادة التصفير: لابدأن نأخذ في الاعتبار أن يكون بسيط وفي نفس الوقت يؤدي الغرض المطلوب منه وهو تصفير الخاص بـ ياهو.

[html] body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol,ul {
list-style: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
abbr,acronym { border: 0;
}
[/html]

4- التنسيق الكامل للصفحة: يمكن الإضافة والحذف على حسب ما تريد، هذه مجرد الافتراضات الأساسية والشائعة التي يستخدمها الكثير من المصممين، ولا تنسَ أن تلائم الهتميل على هذه الافتراضات.

[html] body {
font-family: ;
font-size: 100%;
background: ;
color: #;
}
a:link {
color: #;
}
a:visited {
color: #;
}
a:hover, a:active {
color: #;
text-decoration: none;
}
h1 {
color: #;
font-size: ;
}
h2 {
color: #;
font-size: ;
}
h3 {
color: #;
font-size: ;
}
h4 {
color: #;
font-size: ;
}
ol {
list-style-type: ;
}
ul {
list-style-type: ;
}
li {
margin: ;
}
blockquote {}
#wrapper {
width: 960px;
margin: 10px auto;
}
[/html]

5 – الراس: للهيدر الخاص بالصفحة ]html[ #header {} #logo {} [/html] 6- الجزء الخاص بالملاحة كما يسمونه جزء القوائم:

[html] #nav {}
[/html]

7- المحتويات

[html] #content {}
#content h2 {}
#content h3 {}
#content p {}
[/html]

8- الجوانب

[html] #sidebar {}
#sidebar h2 {}
#sidebar ul {}
#sidebar li {}
[/html]

9- الحقول

[html] input {}
textarea {}
button {}
input:focus {}
textarea:focus {}
button:hover {}
[/html]

10- الجداول

[html] table {}
tr {}
th {}
td {}
[/html]

11- المؤخرة أو التذييل

[html] #footer {}
#footer h2 {}
#copyright {}
[/html]

12- وهناك بعض الإضافات الشائعة التي لا تندرج تحت بند معين من هذه البنود السابقة.

[html] .alignleft {float: left;}
.alignright {float: right;}
.clear {clear: both;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.small {font-size: 0.8em;}
.hidden {display: none;}
[/html]