In today’s web arena, CSS has proved its importance in rigid way. Web content is no more targeted to web browsers only, Web content is been served for a verity of media now days. To efficiently handle such situation CSS plays a very crucial role.
In order to extract maximum pulp from CSS fruit there are few things needs to keep in mind. Although rule of thumb is efficiency is directly proportional to experience but I’ll point out few options 3-part post series See, Yes! Yes! – READY, See, Yes! Yes! – STEADY and See, Yes! Yes! – GO. which can help novice CSS developers to take right diversions.
All of following points are optional and one can modify them according to needs and/or simply drop the idea.
Big Picture:
Planning is a must for mid or big projects…for small projects one can instantly start coding.
While coding for new design, web designer must analyze the design mock-up and slice the design by keeping in mind the facts which are resultant of observation and guideline of website/blog/web application.
e.g.
- What portion of design mock can be translated by using CSS rules instead of image?
- Whether background is repeating? Design is fixed width or liquid?
- What element of design is going to change dimension dynamically?
- Re-usability issues needs to be addressed so back-end developer (if any) don’t face any difficulty to plug reusable components.
- Sliced images need to save as optimized for web, as PNG if element is using alpha transparency and if it uses square shape without tranparency JPG images work better in most cases.
CSS Reset:
Purpose of using CSS Reset is to neutralize default rendering of browser, in order to equalize rendering of web page across different browsers.
Its entirly optional for web developers whether to use one or not. Even if Web Designer is very keen to use one, s/he must consider the big picture where the CSS is going to be used (including some future prediction).
In few cases i prefer not to use CSS reset as in Blogs where content is generated by user and web designer don’t have exact control over X/HTML tags.
Following is my reset.css. I have cooked this starter dish by borrowing some spices from here and few from experience.
/* Common CSS and CSS reset Start */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/*links*/
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
/*List*/
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* Common Display Rules*/
.block{
display:block;
}
.none{
display:none;
}
.inline{
display:inline;
}
.clear{
clear:both;
}
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}
.center_div{
margin:0 auto;
}
.bold{
font-weight:700;
}
.normal{
font-weight:normal !important;
}
.underline, .underline:hover{
text-decoration:underline;
}
/* Headings*/
h1, h2, h3, h4, h5, h6{
font-family:Arial, HelveticaNeue, Helvetica, sans-serif;
font-weight:700;
}
h1{
font-size:18px;
}
h2{
font-size:17px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5{
font-size:15px;
}
h6{
font-size:13px;
}
/* Font Size */
.fs8{
font-size:8px;
}
.fs9{
font-size:9px;
}
.fs10{
font-size:10px;
}
.fs11{
font-size:11px;
}
.fs12{
font-size:12px;
}
.fs13{
font-size:13px;
}
.fs14{
font-size:14px;
}
.fs15{
font-size:15px;
}
.fs16{
font-size:16px;
}
.fs17{
font-size:17px;
}
.fs18{
font-size:18px;
}
.fs19{
font-size:19px;
}
.fs20{
font-size:20px;
}
.fs21{
font-size:21px;
}
.fs22{
font-size:22px;
}
.fs23{
font-size:23px;
}
.fs24{
font-size:24px;
}
.fs25{
font-size:25px;
}
.fs26{
font-size:26px;
}
.fs27{
font-size:27px;
}
.fs28{
font-size:28px;
}
.fs29{
font-size:29px;
}
.fs30{
font-size:30px;
}
/* Remove Inherited Style*/
.no_margin{
margin:0 !important;
}
.no_padding{
padding:0 !important;
}
.no_border{
border:none !important;
}
.no_dec{
text-decoration:none !important;
}
/* Common CSS and CSS reset End */
Hmm…I think its a good breakfast.
So guys allow me to take a break…I’ll be digging further into CSS mine very soon on my next post See, Yes! Yes! – STEADY .
