CSS, is as a template for styles. Any aspect of software has three major features at a very high level - 1.) Static 2.) Functions 3.) Behaviour. UI is no exception. Static aspect is the aspect which is fixed in a completed application. It is essentially code that executes. Functionality is the purpose for which the code is written. Behaviour speaks about the variations in which the Functionality is achieved. In W3C UI, html takes the static aspect. Being an UI application, we desire to have loads of eye-candy; images, fonts, flash, gradients, sounds etc. This eye candy needs to be consistent across the application. Who would like to have an application in which a page footer with the same content shows up differently in different pages. Behaviour is affected by the ability of the User agents like availability of scripting, browser version etc.
The CSS best practices include avoiding Classitis, Divitis, spacer-gifs. There are other desirable features that make a developers life simple like; using strict DTDs, overriding browser defaults, using liquid/fluid layouts.
When it comes to managability, I find two very intriguing factors.
1.) Design themes
2.) Seperate concerns, into reusable classes or css scripts for colors, fonts, layouts
3.) Create themes for the design
4.) Negotiate the exceptionally difficult UI features with the client. An example would be interweaved style usage: " Role: Consultant Organisation Charing Cross Hospital
for such instances negotiate for a single uniform style for content and try to move the enhancements to Java script.
As always, I will try to include a small CSS snippet for toying around.
#########################################################
Html content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="eGMS.accessibility" scheme="WCAG" content="AA" />
<meta http-equiv="Content-type" content=
"text/html; charset=us-ascii" />
<title>This is Sample 1</title>
<link rel="stylesheet" type="text/css" href=
"../css/samplecss.css" />
<SCRIPT language="JavaScript" SRC="../js/footersetting.js"></SCRIPT>
</head>
<body>
<!-- information tag is used to differentiate footer from main content -->
<div id="information">
<div id="banner">
<h1>Banner is being shown</h1>
</div>
<!-- horizontal navigation -->
<div id="horiz_nav">
<ul>
<li>horiz_1</li>
<li>horiz_2</li>
</ul>
</div>
<!-- main content wrapper -->
<div id="school">
<!-- main content -->
<div id="book">
<!-- primary content -->
<div id="rhymes">
I am a little tea pot, Short and stout, This is my CSS,
Please take me out!
</div><!-- secondary content -->
<div id="questions">
Why did johnny eat sugar? Why did London bridge start
falling and when is it going to break its fall? When did
rats learn to repair clocks? Why didnt' jack and jill
call 999?
</div>
</div>
<!-- vertical navigation -->
<div id="vert_nav">
<ul>
<li>vert_1</li>
<li>vert_2</li>
</ul>
</div>
</div><!-- main content wrapper ends -->
</div><!-- information ends -->
<!-- footer -->
<div id="footer">
Thats' all folks!!
</div>
</body>
</html>
##################################################################
Sample CSS
/* undoing browser defaults */
:link,:visited {text-decoration: none;}
ul,ol {list-style: none;}
h1,h2,h3,h4,h5,h6,pre,code,p {font-size: 1em;}
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0; padding: 0;}
a img,:link img,:visited img {border: none;}
address {font-style: normal;}
/* undoing completed */
#banner h2 {
float: left;
clear: both;
color: #006;
width: 100%;
}
#horiz_nav {
float: left;
clear: both;
width: 100%;
}
#horiz_nav ul {
background-color: #099;
}
#horiz_nav ul li {
display: inline;
}
#school #book {
float: right;
clear: right;
color: #606;
width: 75%;
}
#school #vert_nav {
float: left;
clear: left;
color: #606;
width: 20%;
}
#school #book #rhymes{
float: left;
clear: left;
color: #698;
width: 48%;
}
#school #book #questions{
float: right;
clear: right;
color: #698;
width: 48%;
}
#footer {
float: left;
width: 100%;
clear: both;
text-align: center;
position: relative;
bottom: 0%;
left: 0%;
}
Above is supposed to work independent of browser being used. Anomalies would be there but changing the defaults is easier in CSS structured in this fashion, If one wants to have a close look at the way the boxing is done use the following
################################################
Samplecss.css with boxes
/* undoing browser defaults */
:link,:visited {text-decoration: none;}
ul,ol {list-style: none;}
h1,h2,h3,h4,h5,h6,pre,code,p {font-size: 1em;}
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0; padding: 0;}
a img,:link img,:visited img {border: none;}
address {font-style: normal;}
/* undoing completed */
#banner h2 {
float: left;
clear: both;
color: #006;
border-style: dotted;
width: 100%;
}
#horiz_nav {
float: left;
clear: both;
width: 100%;
border-style: solid;
}
#horiz_nav ul {
background-color: #099;
border-style: solid;
}
#horiz_nav ul li {
border-style: solid;
display: inline;
}
#school #book {
float: right;
clear: right;
color: #606;
border-style: dotted dashed;
width: 75%;
}
#school #vert_nav {
float: left;
clear: left;
color: #606;
border-style: dotted dashed;
width: 20%;
}
#school #book #rhymes{
float: left;
clear: left;
color: #698;
border-style: dashed;
width: 48%;
}
#school #book #questions{
float: right;
clear: right;
color: #698;
border-style: dashed;
width: 48%;
}
#footer {
float: left;
width: 100%;
clear: both;
border-style: solid;
}
Posts
