This document is about HTML and CSS code written for integration. How to avid silly mistakes while writing a HTML / CSS code for developer

1. INTEGRATION(HTML/CSS)
The technology behind AESTHETICS
Contents
 Introduction
 How to write HTML and CSS for integration
 CSS override rules
 Fixing bugs after integration
 Review and Modification in code

2. Introduction
Integration is the process where two technologies meet. To become an integrator you must know the technique and follow the
process.Integrators AIMshould be a bug-free web site and a well-integrated web site.But it is web designer’sduty to deliver
quality code for integration.
How to write HTML and CSS for integration
After finishing UI design; web designers create or convert this design into HTML/CSS. Usually they create all components as
same as UI. It is just a front-end design. To make it live; programmers bind these pages with back-end codding. And here the
story starts.
While creating HTML pages first step is to understand the requirement. It helps to form a structure in proper shape with the
help of using appropriate HTML tags and form elements (labels, anchor tag or input button, div, list view etc.)
Do not mention ID to any HTML tag and avoid using IDs to apply style to that element.Ultimately IDs are a developer’s property.
In worst cases use these IDs as a hierarchy for overriding classes to target particular location of the element(s).
In some scenarios it is not possible for a developer to add an ID and use it for development purpose. In this case developers use
a class which was created by web designer. And it gives a major impact when integrator modifies or removes that particular
class from HTML page.
To avoid this possibility integrator can create a specific class for a developer which can be easily identified with proper naming
convention. For example it would be ‘dev-XXX’, dev defines a developer. This class name is dedicated for developer’s purpose
and do not use it for applying any style.
Usually programmers do not understand HTML/CSS, the way web-designers do. If the website/Application requires integration,
web designer should follow few steps while creating pages in HTML/CSS.
TO DO DO NOT
Consolidate identical components throughout the
website/application
Allow to write inline CSS or add style(s) thru JS
Apply all default attributes to the table Complicate with hierarchy while creating style(s)
Create global CSS classes Include header and footer in each HTML page
Calculate total width of component(s) and sharp eye on
alignment
Create separate CSS files for each page
Consistency in form elements style Duplicate all which is not needed
Smart and Simple Codding Repetitive properties for classes or group of classes
Add comments while creating HTML page Use IDs to apply style
Add font and font-size for each element
I. Consolidate identical components throughout the website/application
Creating identical components for integration is a good practice; it allows integrators and developers a clear view to bind
data.For development purpose it is not necessary to include complete HTML page.
While writing HTML for integration, sort out identical components throughout the website/application and create all possible
combination(s) in single structure with appropriate styling. It helps the integrator to choose whichever is required and designer
to manage consistency in the website/application.
II. Apply all default attributes to the table
In some scenarios we use table layout. Always apply table attributes (cellpadding, cellspacing, border, width)It helps to display it
properly in all browser windows especially in Internet Explorer.For examplecreatinga table without adding width may not
occupy complete space in browser.

3. <table cellpadding=”0” cellspacing=”0” border=”0”>
It is always better to follow a good practice.Applying a ‘width’ to thetable,cut down the unnecessary declarationof width for
table class in CSS file, it displays always perfectthough it generates only one TD or multiple TDsif each standard has been
followed.
The same rule is applicable for table elements (TR, TH, and TD)
Adding specific width to TH or TD will maintain the structure and it won’t get disturb based on the data. Always add specific
width only for first row elements, do not repeat it to each row elements. Avoid using inline style or class to specifically apply
width. TABLE, TH and TD have their own Attribute width=”” where width can be mentionedin value in pixels or in %. Try to
maintain consistency of row and column styles. Create a common style for table layout and apply it to all identical tables in
website/application. Do not create different styles to each component.
III. Create global CSS classes
Class files are actually a key factor to maintain consistency. While writing CSS you are writing the future of
thatwebsite/application to make it more beautiful. Before integrating HTML always check with reset CSS, add it if it is not
added.Create global CSS classes and avoid using hierarchy based on page names if it is unavoidable it should start with the base
parent component holder.
Example:
.customBuild.customModule.customModuleFooter.btnSaveModule{}
In this case if you want to use.btnSaveModuleclass in any other page then it is additional work for integrator to customize
available class or create different class.
Other possibilities;if this class was created for that single save module button without hierarchy that would be very easy to use
same class throughout the website/application.
While creating a class always remember that this class can be used in any page so do not restrict it or bind with anything. Re
calculate and think over if client requested a major change in page flow. It should be easy to change sequence of components.
For better flexibility create a common button class which includes width, padding, margin, font-size, line-height etc.,this allows
to control all buttons in single change.For specific button, classes can be created with additional declarations like background
image and background color.
Example:
.saveform.cmnBtn{
min-width:90px;
line-height:33px;
height:33px;
background:#DC6900;
padding:0px5px;

4. text-decoration: none;
text-align:center;
margin:00010px;
border:0;
color:#fff;
cursor:pointer;
font-weight:bold;}
.saveform.savebtn{
background:#dc6900url(../Content/images/save.png)no-repeat5px10px;
text-indent:20px;}
.saveform.cancelbtn{
background:#DEDEE0url(../Content/images/cancel.png)no-repeat5px8px;
color:#333333!important;
text-indent:20px;}
All these type of buttons are added in saveform container. While adding these set of buttons or a single button, justfollow a
structure that’s it.
<divclass="saveform">
<inputtype="button"class="cmnBtn cancelbtn"id="btnCancel"value="Cancel"/>
<inputtype="button"class="cmnBtn savebtn"id="btnSave"value="Save"/>
<inputtype="button"class="cmnBtn previewbtn"id="btnPreview"value="Preview"/>
<inputtype="button"class="cmnBtn releasebtn"id="btnRelease"value="Release"/>
</div>
The same method can be followed for the other elements too.
IV. Calculate total width of component(s)and sharp eye on alignment
While arranging components or containers, always calculate their width, it should not exceed than the main container width.
And if it exceeds it should show scrollbar for better readability. Table should always 100% in width in common scenarios.For
table elements like THs and TDs mention their width based on data they are carrying/displaying.
Though wrapper (main container) width is fixed in pixels, specify inner container’s width always in %, it helps to switch to any
resolution in minimum modification and creates a layout very flexible.Fixed width in pixels can be added to an element(s)only in
some scenarios where it is mandatory.
Do not force to align components with the help of margin and padding in negative values.
Alignment& positioning is a most important part in layout,for better consistency and perfection do not complicate HTML code
& CSS classes. Always use proper attributes. For aligning content use‘text-align’ property instead of‘float’. Floating could be used
if structure builds for responsive design, but again for content alignment you should always use ‘text-align’ property. For vertical
text alignment you can use line-height, vertical-align property may not supported to all web browsers. Adding unnecessary
padding and margin may create out layout unbalanced. If you are using CSS3 and assuring for multiple browser support, then
make sure you will write supportive attributes while creating classes.
Avoid using hacks. When you think of using hack for positioning, that means code is not as per standards.If the code was written
as per standards it doesn’trequireadding any hack(s).

5. V. Consistency in form elements style
Form elements are normally same in behavior and in look throughout the website/application.So create common class for form
elements,do not use any hierarchy while creating these classes. It should be global and can be use anywhere in
website/application.Classes can be overridden, based on the difference in dimensions and beautification.
VI. Smart and SimpleCodding
Be specific and clear about what you want to write in HTML and CSS file.
In approved UI if there is a data gridand for integration you are writing a HTML page. Then do not create all rows shown in UI.
Just add one or maximum two. That’s enough for integration. If HTML page is already created then try to give only require code
by removing additional rows, containers, attached style sheets etc. Visualize what exactly needed in a page, header, footer, style
sheets, wrapper can be added thru master page. Create separate .js file and attaché this file to that specific page if needed. Try
to avoid writing internal script, internal style sheet, inline style; it will slow down the performance.
While creating classes, make sure you consolidate CSS Syntaxes or Nesting Selectors and write smart declarations to selectors.
Do not create classes based on a page; consider all pages and a complete website/application.
Example:
Avoid writing set of declarations for each CSS selector:
.edit{
background:url(../Content/images/edit.png)no-repeattopcenter;
display:block;
height:16px;
width:16px;
margin:0px;
padding:0px;
outline:none;
cursor:pointer;
text-align:center;}
.delete{
background:url(../Content/images/delete_btn.png)no-repeattopcenter;
display:block;
height:16px;
width:16px;
margin:0px;
padding:0px;
outline:none;
cursor:pointer;
text-align:center;}
If you want to create a class for icon(s) and the similar type of icons or set of icons has been used throughout the
website/application. Set of icons are same in dimension and display property so creating a common class for all icons would be a
better option and create classes with appropriate names and unique declarations to differentiate icons. This practice helps to
maintain or modify website/application in easier way.
.cmnIcon{
display:block;
height:16px;
width:16px;
margin:0px;
padding:0px;
outline:none;
cursor:pointer;
text-align:center;}
.edit{
background:url(../Content/images/edit.png)no-repeattopcenter}
.delete{
background:url(../Content/images/delete_btn.png)no-repeattopcenter}
VII. Add comments while creating HTML page

6. It is a good practice to add comments while creating any HTML or CSS page, basically it helps to identify why it is written. In
commented code you can also write instructions.
Example:
In HTML file
<!-- Button area starts hereuse this complete div container ‘savefrm’ to add buttons -->
<divclass="saveform">
<inputtype="button"class="cmnBtn cancelbtn"id="btnCancel"value="Cancel"/>
<inputtype="button"class="cmnBtn savebtn"id="btnSave"value="Save"/>
<inputtype="button"class="cmnBtn previewbtn"id="btnPreview"value="Preview"/>
<inputtype="button"class="cmnBtn releasebtn"id="btnRelease"value="Release"/>
</div>
<!-- Button area ends here -->
In CSS file
/* BTN Style */
.saveform{
text-align:right!important;
margin-bottom:10px;
clear:both;
margin-top:10px;
padding-right:10px;}
.saveform.savebtn{
background:#dc6900url(../Content/images/save.png)no-repeat5px10px;
text-indent:20px;}
.saveform.cancelbtn{
background:#DEDEE0url(../Content/images/cancel.png)no-repeat5px8px;
color:#333333!important;
text-indent:20px;}
This will help aperson,who wants to review or work on the project.
CSS override rules
Overriding classes is a common method adopted by integrators and web designers. It is very useful while working with CMS like
sharepoint, Drupal etc.
While developing any website/application, it is obvious to create multiple CSS files and end number of classes. It is very difficult
to handle if page styles are different and there is a drastic change in structure and their content. In this case you can create a
base style for all page elements,form elements, containers and components.And based on requirements you can over write
these classes by changing declaration value.
This process is having simple logic behind. You have created a button (search-button) for search by using <a> tag which is used in
various pages of website/application. But in some pages you need similar button with different background, width and font
color.
In this case creating a different class is absolutely a wrong idea. You can use same class created for search-button and just over
write whichever properties you want. Remember; do not duplicate all the existing values. You must have to re-write whatever
you want to change. Duplicating all values is the same as creating new class.
While overriding you must mention hierarchy (do not complicate hierarchy) to target that specific location otherwise it will
impact overall pages where this class name added. This process can be useful if you want to modify the same class formultiple
pages. You just need to define appropriate hierarchy.
Example:
a.search-button{
width:77px;
height:33px;
background:url(../Content/images/searchbtn.png);
color:#fff;
text-decoration:none;
display:block;

7. text-align:center;
font-size:14px;
line-height:28px;}
.searchareaa.search-button{
width:130px;
height:33px;
background:#ccc url(../Content/images/searchbtn.png);
color:#000;
text-decoration:none;
display:block;
text-align:center;
font-size:14px;
line-height:28px;}
Right way of writing:
Only override specific values which you want to change
.searchareaa.search-button{
width:130px;
background:#fcfcfcurl(../Content/images/searchbtn.png);
color:#000}
In some cases overriding values doesn’t work, so adding a ‘!important’ keyword after value means this value should apply and
ignore previous value. This keyword is supported by multiple browsers. This keyword should only use when you want to override
values.
.searchareaa.search-button{
width:130px;
background:#fcfcfc url(../Content/images/searchbtn.png);
color:#000 !important}
Fixing bugs after integration
It is obvious to find bugs where a couple of resources are working on a single project; we cannot track on each resource and ask
why you made some changes. But we can cut down these types of surprises by controlling CSS files. Integrator can hold the
rights and not allowing developers to add any class in CSS files.
Though integrator controls, bugs is a part of website/application. It is not because someone writes a wrong code. Somewhere
client requirement changes and integrator needs to modify in existing classes and HTML structure.
While fixing bugs,integrator should be aware of the impact in changing in CSS file.At this time comment helps a lot and it gives a
clear vision.In common scenarios fixing bugs is nothing but overriding classes. If you are aware of complete website/application
it is very easy to handle issues and fix those without hesitation.
Review and Modification in code
Being an integrator and Web designer it is very important to keep an eye what is going on with the design. After integrating, all
code should be reviewed.And if it is necessary integrator have to make require changes in CSS files and or HTML pages. It is also
important to remove inline styles, internal styles. Sometime it was added for specific reason, so it is integrator’s duty to add
those style(s)in appropriate CSS file(s) or create/override classes.
If you follow rules from the beginning it is very easy to handle any project in any condition.