Every time we start a new website, we need to write our CSS code from the beginning. Actually, many of the codes are the same as our previous website, like settings of blockquote, title(<h1> to <h6>), etc. I was thinking that we can create a CSS template for all websites which containing most common CSS settings.

I lately found Kyle has done this, his master stylesheet has everything I need for a new website. I tried to add something to the stylesheet, but not much can be added, but the global browser setting I learn from Andrew, which may be useful:

[css]
* {
padding:0;
margin:0;
}
[/css]

So here is my stylesheet:

[css]
/***** Browser Settings *****/
* {
padding:0;
margin:0;
}
/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}

textarea {
width:100%;
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }

.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }

.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }

.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }

.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }
[/css]

Let’s name this as version 0.1, we will improve it when we learn new technique.

You can also find more information about master stylesheet from this post.

2 Responses to “Design a Master CSS Stylesheet”

Leave a Reply

Trackbacks and Pingbacks:

  1. Zack Live

    通用CSS樣式表模版…

    每次設計一個新的網站,我們都要寫一個新的CSS樣式表,而當中的內容有很多是跟以往的設計類似,甚至一樣,像是blockqoute, <h1>至<h6>等設定。因此,我一直想要整理出一個通用的CSS樣式表模版(Master Stylesheet),裡面包含一些最基本最常用的CSS設定。當開始設計一個新網站的時候,我們首先載入這個模版,就能馬上完成了基本的設計,接下來,只要針對這個網站進行細節的設計,如果模版的設定不適合新網站,可以在新網站的CSS文件重寫,CSS會自動覆蓋模版的設…

  2. Zack Live

    通用CSS样式表模版…

    每次设计一个新的网站,我们都要写一个新的CSS样式表,而当中的内容有很多是跟以往的设计类似,甚至一样,像是blockqoute, <h1>至<h6>等设定。因此,我一直想要整理出一个通用的CSS样式表模版(Master Stylesheet),里面包含一些最基本最常用的CSS设定。当开始设计一个新网站的时候,我们首先载入这个模版,就能马上完成了基本的设计,接下来,只要针对这个网站进行细节的设计,如果模版的设定不适合新网站,可以在新网站的CSS文件重写,CSS会自动覆盖模版的设…